基于vite搭建vue3及避坑指南

搭建环境准备

1. node环境 Vite 需要node版本 14.18+，16。 Node.js官网，选择LTS版本（稳定版）傻瓜式安装即可。在命令行窗口执行 node -v 出现版本号即安装成功

2. 使用npm create vite@latest 进行安装vite 3. projectname输入自己命名的项目名称 4. Select a framework 选择vue框架

vite安装中遇到的问题

1. npm出现Error: EPERM: operation not permitted, unlink XXX报错，表示权限不足

解决方法： 使用管理员身份运行命令提示符

2. npm 报ERR!code ENOLOCAL,表示Node所安装路径中有空格

解决办法： 执行npm config get cache检查 根据得到的路径执行 npm config set cache "C:\Program~1\nodejs\node_cache"--global

确定src目录组织结构，根据组织结构安装插件和工具

路由搭建，配置router文件

• npm install vue-router@next
• 创建router文件夹，在index.ts文件中引入createRouter
• 具体代码实现

   //index.ts 
   import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
   import home from '../page/home/index.vue'; 
   const routerList: Array<RouteRecordRaw> = [ 
       {
           path: '/', 
           redirect: '/home'
       },
       {
           path:'/home',
           name:'home',
           component:()=>import('../page/home/index.vue')
       } 
   ] 
   const router = createRouter({ routes: routerList, history: createWebHashHistory() });
   export default router;

在maiin.js文件中进行引用

    //main.js 
    import { createApp } from 'vue' 
    import App from './page/app/index.vue' 
    import router from './router/index' 
    import './index.css' 
    let app = createApp(App); 
    app.use(router).mount('#app')

css预处理sass

• npm install sass
• npm install sass-loader

安装sass时遇到的问题

[vite] Dep optimization failed with error: Could not load util (imported by node_modules/sass/sass.dart.js): ENOENT: no such file or directory, open 'D:\project\vuejs\vue-test\util' [Error: Could not load util (imported by node_modules/sass/sass.dart.js): ENOENT: no such file or directory, open 'D:\project\vuejs\vue-test\util']

• 问题原因：sass没有安装在devDependencies
• 解决办法：npm install sass -D

[vite] Dep optimization failed with error: Could not load path (imported by node_modules/sass-loader/dist/index.js): ENOENT: no such file or directory, open 'D:\project\vuejs\vue-test\path' [Error: Could not load path (imported by node_modules/sass-loader/dist/index.js): ENOENT: no such file or directory, open 'D:\project\vuejs\vue-test\path']

• 问题原因：sass-loader没有安装在devDependencies
• 解决办法：npm install sass-loader -D

造成上述问题的原因由于没有在安装插件的时候加上--save-dev，导致安装的包在devdependencies中，致使sass和sass-loader找不到对应路径

3.vuex数据管理

npm install vuex@next

总结

以上就是初步搭建一个项目所安装的插件和工具，当然这些还不够全面，比如我们在请求后端接口时还需要封装Axios，在提交代码时需要git托管等等，这些都需要我们在项目中逐渐完善所需的工具，渐进式学习。