关于前端:vite-vue3-ts-pinia-elementui-基础后台管理系统

分享一个 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

yarn add vue-router@4 --save-dev

1、在 /router 建路由
2、在 main.ts 引入
import router from './router/index'

设置动静路由和动态路由
动静路由依据 permission.ts 中获取权限进行动态显示

建文件夹 views

yarn add pinia --save

pinia 应用

<!-- 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)

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/*"]
   }
 }
}

yarn add sass sass-loader node-sass --save-dev

全局款式在 vite.config.ts 配置，会呈现在首次加载到登录也款式没引入的问题
解决：在 main.ts 中引入

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

yarn add –dev eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier-eslint eslint-config-prettier

`
引入 axios
yarn add axios
`

Vue Language Features (Volar)

volar 导致 elementui-plus 的问题（JSX 元素类型“El-”不具备任何结构签名或者调用签名）

<!-- tsconfig.json 里批改 -->
{
  "vueCompilerOptions": {"experimentalSuppressInvalidJsxElementTypeErrors": true}
}
或者
{
"types": ["element-plus/global"]
}

src/common/directives/

关于前端:vite-vue3-ts-pinia-elementui-基础后台管理系统

根底后盾管理系统

版本性能

目录

创立

引入 router

建文件夹 views

引入 pinia（代替 vuex 应用）

pinia 应用

pinia 长久化 pinia-plugin-persist

vite.config.ts 配置

引入 sass

装置 elementui

装置 eslint

封装申请

需下载 Vscode 插件（引入 vue3 的 vue 会提醒谬误）

volar 导致 elementui-plus 的问题（JSX 元素类型“El-”不具备任何结构签名或者调用签名）

增加自定义指令拖拽、按钮权限