基础后台管理系统共享一个vue3.0基础后台管理系统。主要集成了vite+vue3+ts+pinia+elementui版本功能。有侧边栏、标签导航栏、路由页面跳转权限控制（路由、按钮）代码规范（需要安装Volar）demo地址代码仓库目录srassets静态资源图片images公共资源指令自定义命令dialogDrag对话框拖放权限permissionauth。ts全局方法（令牌）color.ts全局颜色index.ts公共方法interface.tspublicinterfaceregexp。tspublicregularexpressionrequest.tsrequestmethodcomponentspubliccomponentlayoutlayoutcomponentHeaderViewheadercomponentSidebarsidebarAppMain主页面索引整个布局routerroutingstoreglobalcommunication(pinia)stylespublicstyleelement.scss修改elementui组件样式索引。scsspublicstylevariablesexportstyle(vite不支持)viewspageabouttestpagehomehomepageloginloginpageredirect重定向页面404App.vueenv.d.ts声明文件permission.ts权限设置shims-vue.d.ts声明文件(declarationIntroductionof.vue).eslintrc.js页面规范.prettierrc.js页面规范index.htmlpackage.jsonREADME.mdtsconfig.jsontsconfig.node.jsonvite.config.tsyarn-error.logyarn.lockcreateyarncreate@vitejs/app//defaultVue3引入routerarnaddvue-router@4--save-dev1，在/router2中构建路由，在main.ts中引入importrouterfrom'./router/index'设置动态路由和静态路由动态路由permission.ts获取动态显示权限，创建文件夹视图，引入pinia（替代vuex）yarnaddpinia--savepiniauseimport{createPinia}from'pinia'createApp(App).use(createPinia())import{defineStore}from'pinia'exportconstlayoutStore=defineStore({//id:必需，在所有Stores中唯一id:'layoutStore',//state:返回对象的函数状态:()=>({a:2}),//gettergetter:{c(state){returnthis.count**2;},},//操作方法actions:{b(){}}})import{layoutStore}from'@/store/layoutStore.js'piniapersistentpinia-plugin-persistyarnaddpinia-plugin-persistcreatePinia().use(piniaPluginPersist)vite.config.tsconfigurationimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{loadEnv}from'vite'//constpath=require('path')importpathfrom'path'console.log(process.env.NODE_ENV)exportdefault({mode})=>{returndefineConfig({base:loadEnv(mode,process.cwd()).VITE_NODE_ENV==='product'?'/':'./',server:{open:'/',host:'localhost',//使用127.0.0.1，不会有跨域请求port:8080,proxy:{'/api':{target:'http://127.0.0.1:5000',changeOrigin:true,rewrite:(path)=>path.replace(/^\/api/,'')}}},css:{preprocessorOptions:{scss:{//eslint-disable-next-linequotesadditionalData:"@import'@/styles/index.scss';"//全家引入scss}}},resolve:{alias:{'@':resolve('src')}},plugins:[vue()]})}functionresolve(dir:string){returnpath.resolve(__dirname,dir)}resolve不存在。通过yarnadd--save-dev@types/node=require('path')functionresolve(dir:string){returnpath.resolve(__dirname,dir)}引入const路径找不到模块'@/store/layout'or其对应的类型declarations.Vetur(2307){"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]}}}引入sassyarnaddsasssass-loadernode-sass--save-dev在vite.config.ts中配置全局样式，会出现加载时不引入样式的问题首次。解决方法：在main.ts引入安装elementui1，yarnaddelement-plus2，main.ts引入importElementPlusfrom'element-plus'import'element-plus/dist/index.css'yarnadd@element-plus/icons-vueinstalleslintyarnadd--deveslinteslint-plugin-vue@typescript-eslint/parser@typescript-eslint/eslint-pluginprettier-eslinteslint-config-prettier封装请求`引入axiosyarnaddaxios`需要下载Vscode插件（引入vue3的vue会提示错误）VueLanguageFeatures(Volar)volar导致elementui-plus出现问题（JSX元素类型“el-”没有任何构造签名或调用签名）{"vueCompilerOptions":{"experimentalSuppressInvalidJsxElementTypeErrors":true}}or{"types":["element-plus/global"]}添加自定义命令拖放，按钮权限src/common/directives/
