安装启动步骤安装yarn首先使用yarn命令安装，没有该命令的同学可以先安装npminstallyarn-g安装vite项目并启动yarncreatevite-appcdprojectname进入目录然后yarninstallyarndevvite配置配置文件为vite.config.js启动配置文件与package.json中的webpack方法“dev”相同："vite--config./vite.config.js"const{resolve}=require('path')exportdefault{alias:{'/@/':resolve(__dirname,'./src')}}注意：这里定义@目录时，前面必须加斜杠/，才能从根目录中获取组件。根据上面的定义，意味着/@符号会直接指向根目录下的src文件夹。vue中路由配置使用时如下：()=>import('@/components/HelloWorld2.vue')，改为component：()=>import('/@/components/HelloWorld2.vue'),如果没有这个/@，调用的location会自动从@node_module中搜索目录，导致一直获取不到路径。创建路由文件目录并配置好后，我们就可以创建路由了##安装路由：yarnaddvue-router@next//先安装路由，创建路由文件并配置路由根目录创建文件夹router，并在路由器中创建路由文件router.js代码如下：import{createRouter,createWebHistory}from"vue-router";//路由信息constroutes=[{path:"/aaa",name:"aaa",component:()=>import('/@/components/HelloWorld2.vue'),}];//导出路由exportdefaultcreateRouter({history:createWebHistory(),routes,});引用路由虽然创建了，但是在当前项目中并没有使用到，所以我们需要引用路由。根目录下有一个main.js文件。router/index.js'varapp=createApp(App)app.use(router)app.mount('#app')，即app.use(router)表示使用路由注意：importVuefrom'vue'this现在已经不支持这种写法了，添加的时候会报错，所以如果要引用里面的cteateApp方法只能改成import{createApp}from'vue'interfaceproxyconfigurationinscr/config/index-vite.js可配置代理服务器varconfig={title:'guiplan,element-plus',//背景标题localUrl:'http://127.0.0.1:7070/',baseUrl:{//api请求基本路径dev:'/user/list',//打开开发环境中的接口地址pro:'/'//官方环境接口地址}}module.exports=configvite.config.js配置const{resolve}=require('path')constconfig=require('./src/config/index-vite.js')varobj={别名:{'/@/':resolve(__dirname,'./src')},proxy:{}}obj.proxy[config.baseUrl.dev]={target:config.localUrl,changeOrigin:true,//rewrite:path=>path.replace(/^\/api/,'')}exportdefaultobj整个过程是当前端后续地址为/user时/list，会指向localUrl地址注意：并且地址还会加上localUrl后缀，即如下图所示。另外注意：每次修改vite相关配置，都需要重启服务，即修改vue文件，会自动更新，但修改配置文件需要重启Serve。（如果不注意这部分，你会一直认为配置不起作用，会陷入死循环。）打包。这里使用的是SFC规范，所以只能根据提示格式化代码，定位错位的位置。如上图3所示：4106表示第三行4106列的位置。然后对错误进行一一排查。根据SFC规范，vite对代码格式也有很多要求。例如，您不能再以双标签的形式编写单标签。不再支持某些指令。比如给div标签添加v-text指令也会报错等等。常见的错误有：单标签排版双标签格式v-text命令也会报错，放到div里直接报错。重复的指令或属性，比如两个class写在一个div中，或者两个v-for属性之间没有空格来分隔开源demo下载如下图。目前我已经开源了前后端代码。虽然还不成熟。但也可以用于学习交流或者二次开发。配合guiplan开发工具一体生成vue，在做项目的时候也会事半功倍。https://gitee.com/guiplan/element-plus-vite/tree/masterSummary我的文章和别人的不一样。我会把我踩过的每一个坑都记录下来，并加一个提醒，以防大家以后再踩，分享出来后，希望大家多注意这些注意事项，因为每一个注意事项都是一个坑，如果你不注意，排查问题会花很多时间。要走很多弯路。
