使用vite快速搭建一个vue3+ElementPlus项目

使用vite搭建一个vue3项目在终端中运行如下命令，即可使用Vite快速搭建一个Vue项目。$npminitvite-app$cd$npminstall$npmrundevimportElementPlusinstallElementPlus:npminstallelement-plus--savemain.js完全引入ElementPlus:import{createApp}from'vue'从'element-plus'导入ElementPlus；导入'element-plus/lib/theme-chalk/index.css'；从'./App.vue'导入App；constapp=createApp(App)app.use(ElementPlus)app.mount('#app')引入SCSS执行安装sass的命令，npmisass-D，然后在vue文件的style标签下添加lang="scss"。这些和之前的vue2是一样的。npmisass-Dimporteslintinstalleslintnpmieslint-D使用eslint初始化这个项目npxeslint--init按照提示设置，这是我选择的设置importvue-routerinstallVueRouter4npminstallvue-router@4在src目录下新建router文件夹，在router下新建index.js用于路由配置import*asVueRouterfrom'vue-router'constroutes=[{path:'/',component:()=>import('../page/Home.vue')},{path:'/login',component:()=>import('../page/Login.vue')}]exportdefaultVueRouter.createRouter({history:VueRouter.createWebHashHistory(),routes})在main.js下使用这个中间件importrouterfrom'./router'//...app.use(router)introducevuexinstallationvuexnpminstallvuex@next--save下src创建store路径，并createindex.jsimport{createStore}from'vuex'exportdefaultcreateStore({state(){return{username:''}},mutations:{setUserName(state,payload){state.用户名=负载}}})使用storeimportvuexfrom'./store'//...app.use(vuex)在main.js中引入axios对于网络请求，这里使用axios，首先在src目录下安装axiosnpmiaxios创建api目录，并在api路径下创建axios.js，配置axios实例//axios.jsimportaxiosfrom'axios'//importconfigfrom'../../config'import{useRouter}from'vue-router'exportdefaultfunction(){//1.发送请求在这一次，如果有token，需要附加到请求头consttoken=localStorage.getItem('token')letinstance=axiosif(token){instance=axios.create({//baseURL:config.server,headers:{authorization:'Bearer'+token}})}constrouter=useRouter()instance.interceptors.response.use((resp)=>{//2.响应时，如果有token，将token保存在本地(localstorage)if(resp.data.data.token){localStorage.setItem('token',resp.data.data.token)}//3.响应时，如果响应消息码为403(没有令牌，令牌无效），删除本地令牌if(resp.data.code===403){localStorage.removeItem('token')localStorage.removeItem('username')router.push({name:'登录'})}returnresp},(err)=>{returnPromise.reject(err)})returninstance}在api路径下创建index.jswriteapiimportrequestfrom'./axios.js'importconfigfrom'../../config'exportdefault{//loginlogin(params){returnrequest().post(`${config.server}/login`,params)},//获取用户列表getUserList(params){returnrequest().get(`${config.server}/user/list`,{params:params})},//添加AusercreateUser(params){returnrequest().post(`${config.server}/user/`,params)},//...接下来使用vue3的compositionapi开发组件，这里是开发列表用户模块：编辑删除取消确定