vite|vite + vue3 + ts + pinia + elementui 基础后台管理系统 vite+vue3+ts+pinia+elementui基础后台

基础后台管理系统分享一个vue3.0的基础后台管理系统
主要集成vite + vue3 + ts + pinia + elementui
版本功能

具备侧边栏、标签导航栏路由页面跳转
权限控制（路由、按钮）
代码规范（需要安装Volar）

文章图片

演示
代码

src
- assets 静态资源
  - images 图片
- 【vite|vite + vue3 + ts + pinia + elementui 基础后台管理系统】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 --save

pinia 使用

import { createPinia } from 'pinia' createApp(App).use(createPinia())import { defineStore } from 'pinia'export const layoutStore = defineStore({ // id: 必须的，在所有 Store 中唯一 id: 'layoutStore', // state: 返回对象的函数 state: () => ({ a: 2 }), // getter getter: { c(state) { return this.count ** 2; }, }, // 操作的方法 actions: { b() {} } })import { layoutStore } from '@/store/layoutStore.js'

pinia持久化 pinia-plugin-persist

yarn add pinia-plugin-persistcreatePinia().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){ "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-”不具有任何构造签名或者调用签名）