前端后台管理（预设用户管理中心） Vue-web 端模板
安装依赖环境
npm install
启动开发
npm run serve
构建生产测试发布包
npm run build
检查修复
npm run lint
编写规范
- 不要出现拼音命名
- 开发过程中随时添加注释
- 尽量按照 ESLint 格式要求编写代码
普通变量命名规范
- 命名方法 ：驼峰命名法且与内容相关
let mySchool = "我的学校"
class 类名
- 命名方法 : 全部小写
- 命名规范 : 使用小写字母和中划线来组合命名，中划线用以分割单词。 例如：
ID
- 命名方法 : 全部大写
- 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。 例如：
组件命名
文件夹的命名统一首字母大写 及驼峰命名规则
文件名统一使用index.vue
组件名应该始终是多个单词的
有意义的名词、简短、具有可读性
例: OrgSelectDialog
UserMenu
method 方法命名命名规范
- 驼峰式命名，统一使用动词或者动词+名词形式
- 请求数据方法，以 data 结尾
methods: {
jumpPage(){},
openCarInfoDialog(){},
getListData(){},
postFormData(){}
}
尽量使用常用单词开头（set、get、go、can、has、is） 可以参考如下的动作：
- has: 判断是否含有某个值
- is: 判断是否为某个值
- get: 获取某个值
- set: 设置某个值
- update: 更新某个值
- fetch: ajax 请求（一般用在 vuex 里的 actions）
- on: 触发事件（click/change 等 dom 事件或者emit派发事件）
- render: 渲染页面
- handle: 执行某一个事件（如果不清楚用什么动词前缀，可以使用 handle）
- 还有很多类似的动作，例如：add/delete/put/select/change/move/remove/to等
例外情况
- 作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。
- 循环变量可以简写，比如：i，j，k 等，例：
for (let i = 0; i < arr.length; i ++){
let obj = arr[i]
}
多个特性的元素应该分多行撰写，每个特性一行。(增强更易读) 例：
注释规范
- 代码注释在一个项目的后期维护中、和二次开发时显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明
源码风格
- 使用 ES6 风格编码
- 定义变量使用 let ,定义常量使用 const
- 静态字符串一律使用单引号，动态字符串使用反引号
- 数组成员对变量赋值时，优先使用解构赋值
const [num1, num2] = arr
- 函数的参数如果是对象的成员，优先使用解构赋值
function getUserData({ age, name }) {}
- 箭头函数 需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this
()=> {};
指令规范
- 指令有缩写一律采用缩写形式
:value=""
@click=""
- v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一
- 避免 v-if 和 v-for 同时用在一个元素上（性能问题）, 可将数据替换为一个计算属性，让其返回过滤后的列表(先把你要循环的数据通过计算属性进行处理)
项目快速上手
介绍
本项目模板是管理后台系统1.0版本，持续优化
- Element 已经全局加载直接使用 例：
- 全局组件自动注册，可在任意页面加载使用无需再次引入，详见下文 components 全局公用组件
import Vue from 'vue'
const componentsContext = require.context('./global', true, /index.(vue|js)$/)
componentsContext.keys().forEach(file_name => {
// 获取文件中的 default 模块
const componentConfig = componentsContext(file_name).default
if (/.vue$/.test(file_name)) {
Vue.component(componentConfig.name, componentConfig)
} else {
Vue.prototype[`$${componentConfig.name}`] = componentConfig
}
})
挂载全局 :
Vue.prototype.$api = api
Vue.prototype.$axios = axios
Vue.prototype.$echarts = echarts
Vue.prototype.$dayjs = dayjs
Vue.prototype.$hotkeys = hotkeys
依赖
- 此模板主要使用的包依赖：Axios，Vuex,Vue-Router，Element UI
- 线上依赖已经安装的有：
"@tinymce/tinymce-vue": "^4.0.0",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"dayjs": "^1.9.7",
"default-passive-events": "^2.0.0",
"echarts": "^4.9.0",
"element-ui": "^2.14.1",
"file-saver": "^2.0.5",
"hotkeys-js": "^3.8.1",
"nprogress": "^0.2.0",
"swiper": "^6.3.5",
"tinymce": "^5.6.1",
"vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1",
"vue-cookies": "^1.7.4",
"vue-meta": "^2.4.0",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"xlsx": "^0.16.9"
- 开发依赖已经安装的有：
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.12.0",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"sass-resources-loader": "^2.1.1",
"svg-sprite-loader": "^5.1.1",
"vue-template-compiler": "^2.6.11",
"webpack-alioss-plugin": "^2.4.0",
"webpack-spritesmith": "^1.1.0"
- 具体依赖详见package.json文件可根据具体项目进行添加与删除
npm install xxx
npm uninstall xxx
开发与生产环境
- 与后端的请求接口已经分别放在了 .env.development 和 .env.production 中
- 不同项目 把上述文件中 VUE_APP_API_ROOT 的路径替换即可
代码校验
- 在 .editorconfig 文件中已经预设了一些代码校验风格 可根据不同场景自主修改
结构
- 项目初步结构已经搭建 包含登录页 用户管理 角色管理 组织机构管理 菜单管理等模块
- 下面将详细叙述项目结构
Axios 与 API
- 请求拦截，响应拦截 在 @/util/request.js 文件中
- 具体页面的请求接口自行在 @/api 中新建js文件设置后在组件中引入使用即可，在新建文件中需先引入request.js文件
- 示例：
import { api } from '@/util/request'
export function listFlowTaskDone(data) { // 已审批列表
return api({
url: '/wsb/flowtask/listFlowTaskHaveDone',
method: 'GET',
data
})
}
util文件夹
- 这里放置你的组件需要用到的的一些信息 包括：城市信息area.js，邮编信息org.js，自定义指令preventRepeatClick，正则校验validate.js，在你需要使用的组件中引入即可
views文件夹
- 这里就是你的页面文件存放区域，遵守命名规则使用
store文件夹
- 存放全局公用状态
router
注意 侧边栏导航，通过路由自动生成
- 登录时会进行权限判断拦截，筛选出登入用户所拥有的权限菜单进行动态渲染
- 开发时如需体验完整导航列表可在@/setting.js中 把 openPermission 设置为 true ：
openPermission: true
router 及 store 详情可打开项目结构详览
layout 页面释放出口
- 登录成功后 页面释放出口为layout中的
即我们新建页面要定义在layout Children中 示例：
新建@/router/modules/menu.management.js文件
import Layout from '@/layout'
export default {
path: '/menu-management',
component: Layout,
name: 'menuList',
redirect: '/menu-management/list',
meta: {
title: '菜单管理',
icon: 'component'
},
children: [
{
path: 'list',
name: '',
component: () => import('@/views/menu_management/menuList'),
meta: {
title: '菜单列表',
sidebar: false
}
}
]
}
且必须在router.index中注册
例：在@/router/index 中 引入上述在@/router/modules/menu.management.js定义的内容
import menuManagement from './modules/menu.management'
let asyncRoutes
if (store.state.global.showHeader) {
asyncRoutes = [{
meta: {
title: '首页',
icon: 'layout'
},
name: 'HomepageManagement',
children: [
// 这里添加即可在路由中添加此路径，根据权限动态匹配，匹配成功即可在侧面菜单显示
menuManagement
]
}]
} else {
asyncRoutes = []
}
components 全局公用组件
- 全局组件自动注册
- 全局组件统一放在 ./global 目录下，需要注意各个组件按文件夹区分，文件夹名称与组件名无关联
- 文件夹内至少保留一个文件名为 index 的组件入口，例如 ShowBaseDictList.vue
- 普通组件必须设置 name 并保证其唯一，自动注册会将组件的 name 设为组件名，可参考 SvgIcon 组件写法 例：
定义:
页面中使用:
- 如需定义非公共组件 在components中新建符合命名规则单独文件夹，在单页面中引入使用
assets
- 项目用icon，字体，图片，雪碧图，公共样式存放路径
- @/assets/styles/resources/variables.scss 全局变量样式文件请在页面中引入使用
`