共计 3170 个字符,预计需要花费 8 分钟才能阅读完成。
根底后盾管理系统
分享一个 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-dev
1、在 /router 建路由
2、在 main.ts 引入
import router from './router/index'
设置动静路由和动态路由
动静路由依据 permission.ts 中获取权限进行动态显示
建文件夹 views
引入 pinia(代替 vuex 应用)
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)
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/
正文完