一、编译命令配置
package-lock.json 文件
“scripts”: {
“dev”: “vue-cli-service serve”,
“build:prod”: “vue-cli-service build”,
“build:stage”: "vue-cli-service build --mode ",
“preview”: “node build/index.js --preview”,
“lint”: “eslint --ext .js,.vue src”,
“test:unit”: “jest --clearCache && vue-cli-service test:unit”,
“test:ci”: “npm run lint && npm run test:unit”,
“svgo”: “svgo -f src/icons/svg --config=src/icons/svgo.yml”,
“new”: “plop”
},
二、api 端口 配置
.env 文件中
VUE_APP_BASE_API = ‘/dev-api’
prot = 3201
三、权限控制
1、src\router\index.js 页面 记录所有页面，包括是否需要权限控制
constantRoutes 无需权限控制
asyncRoutes 需要权限控制
注：
affix: 在状态栏上是否显示关闭按钮
ishidden:是否显示
redirect：这个页必须存在，控制跳转
2、src\views\permission\role.vue 中设置权限
2、store\modules\permission.js 控制权限操作
generateRoutes 方法 根据用户过滤权限
3、src\permission.js 加载用户权限菜单、未登录跳转登录等
const accessRoutes = await store.dispatch(‘permission/generateRoutes’, roles)
同时控制是否有token，无则跳转登录
各组件路径及功能
1、打开标签栏
src\layout\components\TagsView
affix: 是否显示关闭按钮
2、左侧菜单
src\layout\components\Sidebar
src\layout\components\Sidebar\Item.vue 菜单item显示，自定义图片在此控制
3、顶部导航栏
src\layout\components\Navbar.vue
hamburger 是否显示菜单栏名称
src\store\modules\app.js 控制侧边菜单栏文字显示等
4、设置 主题切换等
src\layout\components\Settings\index.vue
5、设置属性 src\settings.js
设置存储js src\store\modules\settings.js
通用配置
src\settings.js
说明
showSettings //是否显示设置
tagsView //是否标签栏
fixedHeader //是否锁定头部
sidebarLogo: //是否显示菜单logo
errorLog: ‘production’ //生产环境日志
6、主页
html:
public\index.html
vue
src\layout\index.vue
main
src\main.js
7、主页主体窗体容器
src\layout\components\AppMain.vue
css样式说明
主样式页
src\styles\index.scss
通用样式变量
src\styles\variables.scss
8、页面tilte
title 设置方法
src\utils\get-page-title.js
设置title
src\permission.js
document.title = getPageTitle(to.meta.title)
注：其他
vueelementadmin启动自动打开双窗口
1.配置在vue.config.js，注释open: true