522 lines
21 KiB
Markdown
522 lines
21 KiB
Markdown
|
# 官方文档
|
|||
|
|
|
|||
|
|
https://vuejs-core.cn/admin-book-2025/
|
|||
|
|
密码Vabdbsqj或zxwkbf
|
|||
|
|
|
|||
|
|
# 1.环境要求
|
|||
|
|
|
|||
|
|
node版本要求：16+，node版本22.14.0版本(npm 8.15.0) 可用，其它自行测试。
|
|||
|
|
|
|||
|
|
## 当电脑存在多node版本时
|
|||
|
|
|
|||
|
|
请使用nvm进行管理及切换
|
|||
|
|
|
|||
|
|
# 2.依赖安装
|
|||
|
|
|
|||
|
|
1、建议使用腾讯源安装 npm i --registry=http://mirrors.cloud.tencent.com/npm/
|
|||
|
|
2、打包如遇suport.ts文件 elMessage等简单报错，请前往报错文件手动导入 import { ElMessage, ElMessageBox } from 'element-plus'
|
|||
|
|
3、打包如遇图片报错 请前往config cli.config.js关闭图片压缩
|
|||
|
|
4、用户名与key在邮件邀请函，打包时记得配好
|
|||
|
|
5、如果一定要用cnpm，则必须用cnpm8.2.0版本 cnpm安装教程npm install cnpm@8.2.0 -g --registry=https://registry.npmmirror.com
|
|||
|
|
|
|||
|
|
## 必须使用 powershell 管理员模式安装
|
|||
|
|
|
|||
|
|
npm install cnpm@8.2.0 -g --registry=https://registry.npmmirror.com
|
|||
|
|
|
|||
|
|
## 必须使用 powershell 获取管理员权限，选择A
|
|||
|
|
|
|||
|
|
set-ExecutionPolicy RemoteSigned
|
|||
|
|
|
|||
|
|
# 3.快速删除node_modules
|
|||
|
|
|
|||
|
|
## 项目根目录执行
|
|||
|
|
|
|||
|
|
cnpm i rimraf -g
|
|||
|
|
rimraf node_modules
|
|||
|
|
|
|||
|
|
# 4.开发工具配置
|
|||
|
|
|
|||
|
|
选择一种常用的开发工具，配置好环境即可规范代码，此页内容十分重要必须全部看完。
|
|||
|
|
必备插件安装（建议 vscode 只保留以下插件，防止自动格式化、自动修复失效）
|
|||
|
|
Local History (opens new window)local-history]（强烈推荐，必须安装，可找回丢失代码）
|
|||
|
|
Eslint (opens new window)eslint（必须安装）
|
|||
|
|
Stylelint (opens new window)stylelint（必须安装）
|
|||
|
|
Prettier - Code formatter (opens new window)代码自动格式化（必须安装）
|
|||
|
|
Element Plus Helper (opens new window)（vue3 用户强烈推荐，必须安装，vab 官方出品，代码生成等）
|
|||
|
|
|
|||
|
|
Auto Import (opens new window)import 引入自动补全（推荐安装）
|
|||
|
|
Import Cost (opens new window)查看你引入的依赖模块大小（推荐安装）
|
|||
|
|
Auto Close Tag (opens new window)自动补全 html 标签（推荐安装）
|
|||
|
|
Auto Rename Tag (opens new window)自动重命名 html 标签（推荐安装）
|
|||
|
|
Docthis (opens new window)注释插件（可不安装）
|
|||
|
|
One Monokai Theme (opens new window)vscode 主题包（可不安装）
|
|||
|
|
Git History (opens new window)查看 git 提交历史（可不安装）
|
|||
|
|
Live Server (opens new window)打包项目可直接预览（可不安装）
|
|||
|
|
Svg Preview (opens new window)svg 查看器（可不安装）
|
|||
|
|
|
|||
|
|
# 5.代码生成
|
|||
|
|
|
|||
|
|
强烈推荐使用代码生成机构建页面，它会为您规避很多坑，执行完代码生成机后记得控制台命令行输入npm run lint规范一下代码格式，部分注意事项如下：
|
|||
|
|
|
|||
|
|
使用时尽量使用简单单词，不要使用驼峰，驼峰会被认定为多层目录
|
|||
|
|
使用时文件命名切勿与已存在的文件重复，否则可能导致文件丢失
|
|||
|
|
如需生成多层目录，使用/间隔即可 #运行代码生成机
|
|||
|
|
npm run template #新增 router
|
|||
|
|
这个不用多说了吧，建完了 view 必须在配置路由才能访问，后端配置参照 mock 文件夹下的 router.js，前端配置在 router 文件夹下的 index.js
|
|||
|
|
|
|||
|
|
#创建 view
|
|||
|
|
不用自己建，已为您提供了模板
|
|||
|
|
|
|||
|
|
npm run template #键盘上下键选择创建view，填入名称会自动为您创建 #创建 api 与 mock
|
|||
|
|
不用自己建，已为您提供了模板
|
|||
|
|
|
|||
|
|
npm run template #键盘上下键选择创建mock，填入名称会自动为您创建 #新增组件
|
|||
|
|
不用自己建，已为您提供了模板
|
|||
|
|
|
|||
|
|
npm run template #键盘上下键选择创建components，填入名称会自动为您创建 #新增 store
|
|||
|
|
不用自己建，已为您提供了模板
|
|||
|
|
|
|||
|
|
npm run template #键盘上下键选择创建vuex，填入名称会自动为您创建 #新增 表格增删改查全部功能
|
|||
|
|
不用自己建，已为您提供了模板
|
|||
|
|
|
|||
|
|
npm run template #键盘上下键选择创建curd，填入名称会自动为您创建 #接下来运行代码修复
|
|||
|
|
npm run lint #最后配置路由启动即可
|
|||
|
|
|
|||
|
|
# 6.全局配置
|
|||
|
|
|
|||
|
|
## vue/cli 配置
|
|||
|
|
|
|||
|
|
位置：src/config/cli.config.js
|
|||
|
|
|
|||
|
|
## 网络配置
|
|||
|
|
|
|||
|
|
位置：src/config/net.config.js
|
|||
|
|
|
|||
|
|
## 通用配置
|
|||
|
|
|
|||
|
|
位置：src/config/setting.config.js
|
|||
|
|
|
|||
|
|
## 主题配置
|
|||
|
|
|
|||
|
|
位置：src/config/theme.config.js
|
|||
|
|
|
|||
|
|
## vab 常用封装
|
|||
|
|
|
|||
|
|
说明：vab 常用的原型链封装。
|
|||
|
|
位置：src/vab/plugins/vab.js
|
|||
|
|
|
|||
|
|
## vab 常用正则校验
|
|||
|
|
|
|||
|
|
说明：vab 常用的原正则校验。
|
|||
|
|
位置：src/utils/validate.js
|
|||
|
|
|
|||
|
|
# 7.项目开发必要接口
|
|||
|
|
|
|||
|
|
本项目需要三个必要的接口，联调前务必保证这登录接口、用户信息接口、退出接口无问题，请注意application/x-www-form-urlencoded;charset=UTF-8与 application/json;charset=UTF-8请求的区别，具体可在src/config/settings.js 中配置， 注意：除登录接口外其他接口连接后端后携带 token，格式如下Authorization: Bearer admin-token-24ba1FFF-AcC8-f0AE-ECea-A1EE12d712Ae-后端在登陆时返回给你的token字符串
|
|||
|
|
|
|||
|
|
## 1）登录接口 /login（post 请求） application/json;charset=UTF-8 请求参数（默认格式）
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
"username": "admin",
|
|||
|
|
"password": "123456"
|
|||
|
|
}
|
|||
|
|
返回格式：（必须严格按照此格式，不能为空这里返回的 token 会在今后所有的接口中自动通过 headers 的 Authorization 携带到后端，后端注意接收并处理跨域问题）
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"code": 200,
|
|||
|
|
"msg": "success",
|
|||
|
|
"data": {
|
|||
|
|
"token": "admin-accessToken-xxxxxx"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 2）用户信息接口 /userInfo（get 请求）
|
|||
|
|
|
|||
|
|
此接口默认会通过 headers 将 Authorization（token）传递到后端，后端根据 headers 判断用户所包含的权限，并返回相应的数据即可
|
|||
|
|
|
|||
|
|
返回格式：（必须严格按照此格式，不能为空）。
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"code": 200,
|
|||
|
|
"msg": "success",
|
|||
|
|
"data": {
|
|||
|
|
"username": "admin",
|
|||
|
|
"roles": ["Admin"],
|
|||
|
|
"permissions": ["read:system", "write:system", "delete:system"],
|
|||
|
|
"avatar": "https://i.gtimg.cn/club/item/face/img/2/16022_100.gif"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
rbac文档：https://auth0.com/docs/authorization/sample-use-cases-role-based-access-control
|
|||
|
|
|
|||
|
|
## 3）退出接口 /logout（get 请求）
|
|||
|
|
|
|||
|
|
此接口默认会通过 headers 将 Authorization（token）传递到后端，后端根据 headers 判断用户所包含的权限，退出对应的账号即可
|
|||
|
|
返回格式
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"code": 200,
|
|||
|
|
"msg": "success"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
其余可配置关闭的接口，如顶部的搜索、通知接口请自行查看mock/controller下的示例
|
|||
|
|
|
|||
|
|
# 8.前端请求示例
|
|||
|
|
|
|||
|
|
强烈建议：所有请求放到 src/api 文件夹下
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// post请求示例
|
|||
|
|
import request from '@/utils/request'
|
|||
|
|
|
|||
|
|
export function getList(data) {
|
|||
|
|
return request({
|
|||
|
|
url: '/table/list',
|
|||
|
|
method: 'post',
|
|||
|
|
data,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// get请求示例
|
|||
|
|
import request from '@/utils/request'
|
|||
|
|
|
|||
|
|
export function getList(params) {
|
|||
|
|
return request({
|
|||
|
|
url: '/table/list',
|
|||
|
|
method: 'get',
|
|||
|
|
params,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# 9.前端请求约定
|
|||
|
|
|
|||
|
|
请求中会在 headers 中自动传入 token，格式如下Authorization: Bearer admin-token-24ba1FFF-AcC8-f0AE-ECea-A1EE12d712Ae-后端在登陆时返回给你的token字符串
|
|||
|
|
|
|||
|
|
/_表格中请求参数约定_/
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"pageNo": 1, //页数
|
|||
|
|
"pageSize": 10 //每页条数
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#resultful 的规范，后端返回 JSON 数据的约定
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"code": 200, //成功的状态码
|
|||
|
|
"msg": "success", //提示信息
|
|||
|
|
"data": { //返回数据
|
|||
|
|
"list": [{}，{}，{}], //返回数组
|
|||
|
|
"total": 238, //总条数（表格中用到，其它接口可以不返回）
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# 10.目录结构
|
|||
|
|
|
|||
|
|
├── .github # 自动化 ci 配置（可删除）
|
|||
|
|
├── .vscode # vscode 配置（不可删除）
|
|||
|
|
├── mock # 本地 mock 数据
|
|||
|
|
├── node_modules # 项目依赖模块
|
|||
|
|
├── library # 核心模块，请勿修改，仅限Plus2022年2月7日后版本 > v3.0.1
|
|||
|
|
│ ├── chainWebpack # cli脚手架相关，请勿修改
|
|||
|
|
│ ├── vuePlugins # vue全自动导入，非专业前端请勿修改
|
|||
|
|
│ |── components # 所有vab组件
|
|||
|
|
| | ├── VabApp # 入口页
|
|||
|
|
| | ├── VabAppMain # 内页
|
|||
|
|
| | ├── VabAvatar # 头像
|
|||
|
|
| | ├── VabBreadcrumb # 面包屑
|
|||
|
|
| | ├── VabCard # el-card封装（支持骨架屏）
|
|||
|
|
| | ├── VabColorfulCard # 多彩卡片封装
|
|||
|
|
| | ├── VabErrorLog # 错误日志
|
|||
|
|
| | ├── VabLanguage # 国际化
|
|||
|
|
| | ├── VabFold # 展开合并
|
|||
|
|
| | ├── VabFullScreen # 全屏
|
|||
|
|
| | ├── VabLogo # logo
|
|||
|
|
| | ├── VabNav # 顶部navBar
|
|||
|
|
| | ├── VabNotice # 通知
|
|||
|
|
| | ├── VabRefresh # 刷新
|
|||
|
|
| | ├── VabSearch # 搜索
|
|||
|
|
| | ├── VabSideBar # 左侧菜单
|
|||
|
|
| | ├── VabTabs # 多标签页
|
|||
|
|
| | ├── VabTheme # 主题
|
|||
|
|
| | ├── VabTopBar # 横向布局头部
|
|||
|
|
| | ├── VabLink # 链接跳转封装
|
|||
|
|
| | ├── VabLock # 锁屏
|
|||
|
|
| | ├── VabMenu # 菜单封装
|
|||
|
|
│ | └── VabQueryForm # 顶部查询条件布局封装
|
|||
|
|
│ ├── layouts # 界面布局（不需要的主题可删除，手机端适配必须保留纵向布局）
|
|||
|
|
| | ├── VabLayoutColumn # 分栏布局
|
|||
|
|
| | ├── VabLayoutCommon # 常规布局
|
|||
|
|
| | ├── VabLayoutComprehensive # 综合布局
|
|||
|
|
| | ├── VabLayoutHorizontal # 横向布局
|
|||
|
|
| | ├── VabLayoutFloat # 浮动布局
|
|||
|
|
| | └── VabLayoutVertical # 纵向布局
|
|||
|
|
│ │ ├── pulgin # vab必要插件
|
|||
|
|
│ │ └── styles # vab主题相关
|
|||
|
|
├── public
|
|||
|
|
│ ├── img # pwa图标
|
|||
|
|
│ ├── static # 静态资源
|
|||
|
|
│ ├── favicon.ico # favicon图标
|
|||
|
|
│ ├── favicon_backup.ico # 备份favicon
|
|||
|
|
│ └── index.html # 入口 HTML
|
|||
|
|
├── src
|
|||
|
|
│ ├── api # API 服务模块
|
|||
|
|
│ ├── assets # 本地静态资源
|
|||
|
|
│ ├── config # 项目配置
|
|||
|
|
│ │ ├── cli.config.js # vue/cli配置
|
|||
|
|
│ │ ├── net.config.js # 网络配置
|
|||
|
|
│ │ ├── setting.config.js # 通用配置
|
|||
|
|
│ │ ├── theme.config.js # 主题配置
|
|||
|
|
│ │ └── index.js # 自定义配置合并（不建议修改）
|
|||
|
|
│ ├── extra # 封装的小工具
|
|||
|
|
│ ├── i18n # 多语言
|
|||
|
|
│ ├── icon # 存放自定义svg图标 ，仅在icon属性为isCustomSvg时才会调用svg图标，如无必要建议使用内置图标
|
|||
|
|
│ ├── router # 路由配置
|
|||
|
|
│ ├── store # vuex 状态管理配置
|
|||
|
|
│ ├── utils # js 工具
|
|||
|
|
│ ├── vab(Pro以及2022年1月前的Plus) # 核心模块
|
|||
|
|
│ │ |── components # 所有vab组件
|
|||
|
|
| | | ├── VabAppMain # 内页
|
|||
|
|
| | | ├── VabAvatar # 头像
|
|||
|
|
| | | ├── VabBreadcrumb # 面包屑
|
|||
|
|
| | | ├── VabFold # 展开合并
|
|||
|
|
| | | ├── VabFullScreen # 全屏
|
|||
|
|
| | | ├── VabLanguage # 国际化
|
|||
|
|
| | | ├── VabLogo # logo
|
|||
|
|
| | | ├── VabNav # 顶部navBar
|
|||
|
|
| | | ├── VabNotice # 通知
|
|||
|
|
| | | ├── VabRefresh # 刷新
|
|||
|
|
| | | ├── VabSearch # 搜索
|
|||
|
|
| | | ├── VabSideBar # 左侧菜单
|
|||
|
|
| | | ├── VabTabs # 多标签页
|
|||
|
|
| | | ├── VabTheme # 主题
|
|||
|
|
| | | ├── VabTopBar # 横向布局头部
|
|||
|
|
| | | ├── VabLink # 链接跳转封装
|
|||
|
|
| | | ├── VabMenu # 菜单封装
|
|||
|
|
│ │ | └── VabQueryForm # 顶部查询条件布局封装
|
|||
|
|
│ │ ├── layouts # 界面布局(不需要主题可删除)
|
|||
|
|
| | | ├── VabLayoutColumn # 分栏布局
|
|||
|
|
| | | ├── VabLayoutCommon # 常规布局
|
|||
|
|
| | | ├── VabLayoutComprehensive # 综合布局
|
|||
|
|
| | | ├── VabLayoutHorizontal # 横向布局
|
|||
|
|
| | | ├── VabLayoutFloat # 浮动布局
|
|||
|
|
| | | └── VabLayoutVertical # 纵向布局
|
|||
|
|
│ │ ├── pulgin # vab必要插件
|
|||
|
|
│ │ └── styles # vab主题相关
|
|||
|
|
│ ├── views # 页面组件
|
|||
|
|
│ │ ├── callback # 第三方登录回调页面
|
|||
|
|
│ │ ├── index # 首页
|
|||
|
|
│ │ ├── login # 登录
|
|||
|
|
│ │ ├── mall # 物料市场
|
|||
|
|
│ │ ├── setting # 配置
|
|||
|
|
│ │ ├── register # 注册
|
|||
|
|
│ │ └── vab # 组件页
|
|||
|
|
│ ├── App.vue # 应用入口组件
|
|||
|
|
│ ├── registerServiceWorker.js # PWA注册（支持https生产环境）
|
|||
|
|
│ └── main.js # 应用入口js
|
|||
|
|
├── .eslintrc.js # eslint 配置项
|
|||
|
|
├── babel.config.js # babel-loader 配置
|
|||
|
|
├── package.json # package.json
|
|||
|
|
├── postcss.config.js # postcss 配置
|
|||
|
|
├── prettier.config.js # prettier 配置
|
|||
|
|
├── vab.config.js # vab 配置
|
|||
|
|
└── vue.config.js # vue-cli 配置
|
|||
|
|
|
|||
|
|
# 11.路由配置
|
|||
|
|
|
|||
|
|
路由加载实现 3 种方案：
|
|||
|
|
|
|||
|
|
前端进行拦截，路由写在src/router/index.js下，角色权限清晰不会随意变更时，配置authentication: "intelligence"，rolesControl:true，参数项在src/config/setting.config.js中配置 。
|
|||
|
|
|
|||
|
|
后端返回路由但由前端过滤权限拦截，配置authentication: "all"，rolesControl:true，后端返回接口格式可参照mock/controller/router.js，参数项在src/config/setting.config.js中配置 。
|
|||
|
|
|
|||
|
|
后端返回处理好权限逻辑的路由，，配置authentication: "all"，rolesControl:false，路由 JSON 无需再返回 guard 字段，后端返回接口格式可参照 mock/controller/router.js，参数项在src/config/setting.config.js中配置。
|
|||
|
|
|
|||
|
|
## 1）路由配置项
|
|||
|
|
|
|||
|
|
语法与 vue-router 语法一致，具体详见src/router/index.js，使用前请务必阅读https://router.vuejs.org/zh/
|
|||
|
|
|
|||
|
|
#### 极为重要：name 与 path 的配置极为终于请仔细阅读注释，没理解之前请勿配置路由，name 首字母大写，一定要与 vue 文件 export 的 name 对应起来，name 名不可重复，用于 noKeepAlive 缓存控制（该项特别重要），path 注意根路由（第一条数据）是斜线，第一级路由必须带斜线，第二级路由开始不能带斜线，并且 path 名不可重复，框架会自动将父级与子级进行拼接，path 只能是一个单词切勿配置成/a/b/c这种写法
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"name": "Demo", //首字母大写，一定要与vue文件export的name对应起来，name名不可重复，用于noKeepAlive缓存控制（该项特别重要）
|
|||
|
|
"path": "/", //注意根路由（第一条数据）是斜线，第一级路由必须带斜线，第二级路由开始不能带斜线，并且path名不可重复，框架会自动将父级与子级进行拼接，path只能是一个单词切勿配置成`/a/b/c`这种写法
|
|||
|
|
"component": "Layout", //后端路由时此项为字符串，前端路由时此项为import的function，第一级路由是为Layout，其余为层级为vue的文件路径
|
|||
|
|
"redirect":"" //重定向到子路由，格式从第一级路由开始拼接（默认可不写）
|
|||
|
|
"meta": {
|
|||
|
|
"hidden": true, //2021年5月23日后新版用法：是否显示在菜单中显示隐藏路由（默认值：false）
|
|||
|
|
"levelHidden": false, //2021年5月23日后新版用法：是否显示在菜单中显示隐藏一级路由（默认值：false）
|
|||
|
|
"title": "title", //菜单、面包屑、多标签页显示的名称
|
|||
|
|
"icon": "", //新版图标
|
|||
|
|
"isCustomSvg": false, //是否是自定义svg图标（默认值：false，如果设置true，那么需要把你的svg拷贝到icon下，然后icon字段配置上你的图标名）
|
|||
|
|
"noKeepAlive": true, //当前路由是否不缓存（默认值：false）
|
|||
|
|
"noClosable": true, //当前路由是否可关闭多标签页，同上（2021年10月后新版支持）
|
|||
|
|
"noColumn":false, //是否隐藏分栏，仅在分栏布局中二级路由生效（默认值：false，不推荐使用）
|
|||
|
|
"badge": "New", //badge小标签（只支持子级，String类型，支持自定义）
|
|||
|
|
"tabHidden": true, //当前路由是否不显示多标签页（默认值：false，不推荐使用）
|
|||
|
|
"target": "_blank", //是否浏览新标签页打开（不适用于分栏布局左侧tab部分，不推荐使用）
|
|||
|
|
"activeMenu": "", //高亮指定菜单，要从跟路由的path开始拼接（用于隐藏页高亮）
|
|||
|
|
"dot": false, //小圆点（默认值：false）
|
|||
|
|
"dynamicNewTab": false, //动态传参路由是否新开标签页（默认值：false）
|
|||
|
|
"breadcrumbHidden": true, //面包屑是否显示（默认值：false）
|
|||
|
|
"guard": ["Admin", "..."], //2021年9月份版本，当config/settings.js中rolesControl配置开启时，用于控制角色（简写）
|
|||
|
|
"guard": {
|
|||
|
|
//2021年9月份新版本，当config/settings.js中rolesControl配置开启时，用于控制角色（全写）
|
|||
|
|
"role": ["Admin", "..."],
|
|||
|
|
"mode": "allOf" //allOf: 数组内所有角色都拥有，返回True oneOf: 数组内拥有任一角色，返回True(等价第1种数据) except: 不拥有数组内任一角色，返回True(取反)
|
|||
|
|
},
|
|||
|
|
//"affix": true, //当前路由是否固定多标签页（旧版）
|
|||
|
|
//"roles": ["admin", "..."], //旧版本，当config/settings.js中rolesControl配置开启时，用于控制角色（简写）
|
|||
|
|
//"roles": {
|
|||
|
|
//旧版本当config/settings.js中rolesControl配置开启时，用于控制角色（全写）
|
|||
|
|
//"role": ["admin", "..."],
|
|||
|
|
//"ability": ["READ", "WRITE", "DELETE"], //ability: ["READ","WRITE"],
|
|||
|
|
//"mode": "allOf" //allOf: 数组内所有角色都拥有，返回True oneOf: 数组内拥有任一角色，返回True(等价第1种数据) except: 不拥有数组内任一角色，返回True(取反)
|
|||
|
|
//},
|
|||
|
|
//"remixIcon": "", //旧版remix图标
|
|||
|
|
//"isCustomSvgIcon": false, //旧版，是否是自定义svg图标（默认值：false，如果设置true，那么需要把你的svg拷贝到icon/remixIcon下，然后remixIcon字段配置上你的图标名）
|
|||
|
|
},
|
|||
|
|
"children": [{...},{...}],
|
|||
|
|
//"hidden": true, //2021年5月23日前旧版2.0.4版本前的用法：是否显示在菜单中显示隐藏路由（默认值：false）
|
|||
|
|
//"menuHidden": false, //2021年5月23日前旧版2.0.4版本前的用法：是否显示在菜单中显示隐藏一级路由（默认值：false，除分栏布局有效）
|
|||
|
|
//"alwaysShow": true, //2021年5月23日前旧版2.0.4版本前的用法：当只有一级子路由时是否显示父路由是否显示在菜单中显示路由（默认值：false）
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 2）history 与 hash
|
|||
|
|
|
|||
|
|
注意事项：hash 模式时，src/config/settings.js下的publicPath字段可配置为空"",history 模式时src/config/settings.js下的publicPath字段需要配置为"/项目名/"，如果没有项目名，请配置为"/"
|
|||
|
|
|
|||
|
|
# 12.权限
|
|||
|
|
|
|||
|
|
## 1）设置角色和权限点
|
|||
|
|
|
|||
|
|
你可以在 src/store/modules/user.js 中 getUserInfo 的时候对角色(role)和权限点(permission)进行设置
|
|||
|
|
|
|||
|
|
## 2）权限使用
|
|||
|
|
|
|||
|
|
一个完整的权限判断对象
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"role": ["Admin", "Editor"],
|
|||
|
|
"permission ": ["read:system","write:system","delete:system"],
|
|||
|
|
"mode": "oneOf" | "allOf" | "except"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
mode说明（mode 模式不输入默认是 oneOf)：
|
|||
|
|
allOf: 数组内所有角色都拥有，返回True
|
|||
|
|
oneOf: 数组内拥有任一角色，返回True(等价第1种数据)
|
|||
|
|
except: 不拥有数组内任一角色，返回True(取反)
|
|||
|
|
|
|||
|
|
我们依旧保留了 v-permissions 自定义指令，如果你想简单的使用，直接输入一个字符串数组即可，默认使用 role 角色判断，oneOf 模式
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
v-permissions="['Admin']" 等价于 v-permissions="{ role: ['Admin'], mode: 'oneOf'}"
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 如果你想使用更多的功能，比如使用权限点 permission控制，输入完整的对象即可，以下输入皆可行
|
|||
|
|
|
|||
|
|
v-permissions="{ role: ['Admin'] }"
|
|||
|
|
|
|||
|
|
v-permissions="{ permission: ['delete:system'] }"
|
|||
|
|
|
|||
|
|
v-permissions="{ role: ['Admin'], permission: ['delete:system'], mode: 'allOf'}"
|
|||
|
|
|
|||
|
|
## 3)页面权限
|
|||
|
|
|
|||
|
|
注意事项：路由会与userInfo接口返回的roles进行匹配和过滤，当路由模式为all模式时，你可以完全后端处理路由以及页面，那么你可以将src/config/settings.js中的rolesControl设置为false
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"meta": {
|
|||
|
|
"guard": ["Admin"]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
也可以更细粒度的设置，根据个人需求设置
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"meta": {
|
|||
|
|
"guard": { "role": ["Admin", "Editor"], "mode": "allOf" }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# 13.样式
|
|||
|
|
|
|||
|
|
## 1）scoped
|
|||
|
|
|
|||
|
|
强烈建议使用 scoped ，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
|
|||
|
|
|
|||
|
|
## 2）通过深度选择器自定义子组件样式
|
|||
|
|
|
|||
|
|
该方法同样适用于局部某个组件自定义 element-ui 样式
|
|||
|
|
|
|||
|
|
```SCSS
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
::v-deep {
|
|||
|
|
.el-menu--collapse {
|
|||
|
|
border-right: 0 !important;
|
|||
|
|
|
|||
|
|
.el-submenu__icon-arrow {
|
|||
|
|
right: 10px;
|
|||
|
|
margin-top: -3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-submenu__title {
|
|||
|
|
span {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
该方法同样适用于局部某个组件自定义 element-plus 样式
|
|||
|
|
|
|||
|
|
```SCSS
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
:deep(*) {
|
|||
|
|
.el-menu--collapse {
|
|||
|
|
border-right: 0 !important;
|
|||
|
|
|
|||
|
|
.el-submenu__icon-arrow {
|
|||
|
|
right: 10px;
|
|||
|
|
margin-top: -3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-submenu__title {
|
|||
|
|
span {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 3)使用变量
|
|||
|
|
|
|||
|
|
在项目中可的任何一个 vue 文件中都可以使用 src/vab/styles/variables/variables.scss 下的任意一个变量
|
|||
|
|
|
|||
|
|
#### variables.scss 配置
|
|||
|
|
|
|||
|
|
说明：这里可以修改你项目的配色方案，简单修改即可实现风格大变。
|
|||
|
|
library/styles/variables/variables.module.scss
|