根底后盾管理系统
分享一个vue3.0的根底后盾管理系统
次要集成vite + vue3 + ts + pinia + elementui
版本性能
- 具备侧边栏、标签导航栏路由页面跳转
- 权限管制（路由、按钮）
- 代码标准（须要装置Volar）
演示
代码
目录
src
assets 动态资源
- images 图片
common 公共资源
directives 自定义指令
- dialogDrag dialog拖拽
- permission 权限
- auth.ts 全局办法（token）
- color.ts 全局色彩
- index.ts 公共办法
- interface.ts 公共interface
- regexp.ts 公共正则表达式
- request.ts 申请办法
- components 公共组件
layout 布局组件
- HeaderView 头部组件
- Sidebar 侧边栏
- AppMain 主页面
- index 整个布局
- router 路由
- store 全局通信（pinia）
styles 公共款式
- element.scss 批改elementui组件款式
- index.scss 公共款式
- variables 导出款式（vite 不反对）
views 页面
- about 测试页面
- home 首页
- login 登录页
- redirect 重定向页
- 404
- App.vue
- env.d.ts 申明文件
- permission.ts 权限设置
- shims-vue.d.ts 申明文件（申明.vue 的引入）
- .eslintrc.js 页面标准
- .prettierrc.js 页面标准
- index.html
- package.json
- README.md
- tsconfig.json
- tsconfig.node.json
- vite.config.ts
- yarn-error.log
- yarn.lock
创立
yarn create @vitejs/app // 默认vue3引入 router
yarn add vue-router@4 --save-dev1、在/router 建路由2、在main.ts 引入import router from './router/index'设置动静路由和动态路由动静路由依据permission.ts 中获取权限进行动态显示建文件夹views
引入pinia（代替vuex 应用）
yarn add pinia --savepinia 应用
<!-- main.ts 引入 -->import { createPinia } from 'pinia'createApp(App).use(createPinia())<!-- 在/store创立对应的store 文件 -->import { defineStore } from 'pinia'export const layoutStore = defineStore({ // id: 必须的，在所有 Store 中惟一 id: 'layoutStore', // state: 返回对象的函数 state: () => ({ a: 2 }), // getter getter: { c(state) { return this.count ** 2; <!-- 或者 return state.count ** 2; --> }, }, // 操作的办法 actions: { b() {} }})<!-- vue 文件中应用 --><!-- 例如 /layout/index -->import { layoutStore } from '@/store/layoutStore.js'pinia长久化 pinia-plugin-persist
yarn add pinia-plugin-persist<!-- 应用 在main.ts 调用-->createPinia().use(piniaPluginPersist)vite.config.ts 配置
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { loadEnv } from 'vite'// const path = require('path')import path from 'path'console.log(process.env.NODE_ENV)export default ({ mode }) => { return defineConfig({ 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-line quotes additionalData: "@import '@/styles/index.scss';" //全家引入scss } } }, resolve: { alias: { '@': resolve('src') } }, plugins: [vue()] })}function resolve(dir: string) { return path.resolve(__dirname, dir)}<!-- 问题 -->resolve 不存在通过 yarn add --save-dev @types/node 引入const path = require('path')function resolve(dir: string) { return path.resolve(__dirname, dir)}<!-- @符号问题 -->Cannot find module '@/store/layout' or its corresponding type declarations.Vetur(2307)<!-- 在tsconfig.json中配置 -->{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }}引入sass
yarn add sass sass-loader node-sass --save-dev全局款式在vite.config.ts配置， 会呈现在首次加载到登录也款式没引入的问题解决：在main.ts 中引入装置 elementui
1、yarn add element-plus 2、main.ts引入import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'<!-- 引入图标 -->yarn add @element-plus/icons-vue装置 eslint
yarn add --dev eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier-eslint eslint-config-prettier
封装申请
`
引入 axios
yarn add axios
`
需下载Vscode 插件（引入vue3 的vue会提醒谬误）
Vue Language Features (Volar)
volar 导致elementui-plus 的问题（JSX 元素类型“El-”不具备任何结构签名或者调用签名）
<!-- tsconfig.json 里批改 -->{ "vueCompilerOptions": { "experimentalSuppressInvalidJsxElementTypeErrors": true }}或者{"types": [ "element-plus/global"]}增加自定义指令拖拽、按钮权限
src/common/directives/