...【摸摸你的手】带你搭建一个基于Vite2.0+Vue3.0+Element-plus的后台管理系统浏览器原生ESModule特性导入组织代码，生产中使用rollup作为打包工具。具有以下特点：光速启动模块热更换按需编译详情可点击Vite官网传送门开始（项目构建）请确保您的电脑已成功安装Node.js，本项目使用Vite构建工具，需要Node.js版本>=12.0.0。查看Node.js版本：node-v使用Vite快速初始化项目使用NPM：npminit@vitejs/app使用Yarn：yarncreate@vitejs/app然后按照终端提示完成以下操作：输入项目名称例如：项目名vue3-element-admin选择模板。我们选择vue，会自动安装Vue3。您还可以通过其他命令行选项直接指定项目名称和要使用的模板。例如，要构建一个Vite+Vue项目，运行：#npm6.xnpminit@vitejs/appmy-vue-app--templatevue#npm7+，需要额外的双破折号：npminit@vitejs/appmy-vue-app----templatevue#yarnyarncreate@vitejs/appmy-vue-app--templatevue支持的模板预设包括：vanillavuereactpreactlit-elementsvelte安装依赖cd./vue3-element-adminnpminstallstartprojectnpmrundev如上图所示，说明Vite+Vue3的简单项目骨架已经搭建完成。接下来，我们将为这个项目集成VueRouter、Vuex、ElementPlus和Sass。修改Vite配置文件Vite配置文件vite.config.js位于根目录下，项目启动时会自动读取。本项目从一些简单的配置开始，比如设置@指向src目录、服务启动端口、打包路径、代理等。从'vite'导入{defineConfig}从'path'导入{resolve}从'@vitejs/plugin-vue'//https://vitejs.dev/config/exportdefaultdefineConfig(({command})=>{return{base:'/',//开发或生产环境服务的公共基础路径。plugins:[vue()],resolve:{alias:{'@':resolve('./src'),//设置`@`指向`src`目录'@img':resolve('./src/assets/img'),},},server:{port:7001,//设置服务启动端口号open:false,//设置服务启动时是否自动打开浏览器//设置代理,根据项目实际情况配置代理:{'/api':'http://admin.xueyueob.cn/api',},},}})目录结构├──publish/└──src/├──assets///静态资源目录├──components///公共组件目录├──layout///项目布局目录├──router///路由配置目录├──store///state管理目录├──styles///通用样式目录├──utils///工具功能目录├──views///页面组件目录├──App.vue├──main.js├──index.html├──vite.config.js//Vite配置文件└──package.json集成路由管理工具VueRouter安装支持Vue3路由工具vue-router@nextnpmivue-router@next创建src/router/index.js文件在src下创建router目录，然后创建router目录李新建index.js文件:└──src/├──router/├──index.js//路由配置文件import{createRouter,createWebHistory}from'vue-router'exportconstconstantRoutes=[{path:'/login',component:()=>import('@/views/login/index.vue'),name:'Login',meta:{title:'Login',},},{path:'/',组件:()=>import('@/layout/index.vue'),redirect:'/dashboard',children:[{path:'/dashboard',component:()=>import('@/views/dashboard/index.vue'),name:'Dashboard',meta:{title:'Home',icon:'el-icon-s-home',affix:true},},{path:'/user',组件:()=>import('@/views/user/user.vue'),name:'User',meta:{title:'User',icon:'el-icon-user-solid',角色:['admin','editor']},},],},]exportconstrouter=createRouter({history:createWebHistory(),routes:constantRoutes,})exportdefaultrouter根据本项目路由配置的实际情况,需要在src下创建views目录，用于存放页面组件可以直接复制代码Demo入口在main.js文件中挂载路由配置import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router/index'createApp(App).使用(router).mount('#app')集成状态管理工具Vuex安装支持Vue3状态管理工具vuex@nextnpmivuex@next创建src/store/index.js文件在src下创建store目录，然后store创建一个目录下新建index.js文件：└──src/├──store/├──modules/├──app.js├──tagsView.js├──index.js//store配置文件这里我用import.meta.globEager函数导入模块目录下的所有模块：（自动化，一劳永逸）//indes.jsimport{createStore}from'vuex'constmodulesFiles=import.meta.globEager('./modules/*.js')constpathList=[]for(constpathinmodulesFiles){pathList.push(path)}constmodules=pathList.reduce((modules,modulePath)=>{constmoduleName=modulePath.replace(/^\.\/modules\/(.*)\.\w+$/,'$1')constvalue=modulesFiles[modulePath]modules[moduleName]=value.defaultreturnmodules},{})conststore=createStore({模块,})导出默认存储//app.jsconststate={device:'desktop',}constmutations={TOGGLE_DEVICE:(state,device)=>{state.device=device},}constactions={toggleDevice({commit},device){commit('TOGGLE_DEVICE',device)},}exportdefault{namespaced:true,state,mutations,actions,}如何使用//apptagsView是模块this.$store.dispatch('app/toggleDevice','mobile')this.$store下的modulesdirectory.dispatch('tagsView/addVisitedView','user')在main.js文件中挂载Vuex配置storefrom'./store'createApp(App).use(router).use(store).mount('#app')集成UI框架ElementPlus在main中安装Vue3支持的UI框架ElementPlusnpmielement-plus。jsMountElementPlusimport{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElementPlusfrom'element-plus'import'element-plus/lib/theme-chalk/index.css'cre??ateApp(App).use(router).use(store).use(ElementPlus).mount('#app')集成CSS预编译器Sassinstallsassnpmisass-Duse...至此一个基于Vite+Vue3+VueRouter+Vuex+ElementPlus+Sass的前端项目开发环境构建完成后，项目demo托管在GitHub仓库中。需要的同学可以下载。参考研究的结尾（回答问题）。我们的题目是关于搭建一个后台管理系统的项目。没显示？标题党？等等，我们继续往下看^-^先下载一个@PanJiaChen开发维护的67.2KStarvue-element-admin后台管理系统模板。然后我们复制src目录替换我们的src目录，替换前做好备份，然后替换上面文本中的routerstoremain.js。当你运行项目时，你会发现有很多错误，这是正常的。因为vue3相比vue2有一些比较大的变化；element-ui和element-plus也有少量改动；所以我们解决错误的过程就是从vue2升级到vue3的过程；由于文章篇幅，解决错误的过程就不一一列举了。有兴趣的同学可以去vue官网查看和更改vue官网的传送门。另外，对于喜欢TypeScript的同学，我也写了一个TypeScript版本。拿下楼吧^\_^JavaScript版TypeScript版后记（ES6系列）随着现代浏览器对ES6的强大支持，我们可以使用ES6写出更加简洁优雅的代码。在下一篇文章中，我会列出很多使用ES6的最佳实践
