前端后台管理（预设用户管理中心） Vue-web 端模板

安装依赖环境

npm install

启动开发

npm run serve

构建生产测试发布包

npm run build

检查修复

npm run lint

编写规范

• 不要出现拼音命名
• 开发过程中随时添加注释
• 尽量按照 ESLint 格式要求编写代码

普通变量命名规范

• 命名方法 ：驼峰命名法且与内容相关

let mySchool = "我的学校"

class 类名

• 命名方法 : 全部小写
• 命名规范 : 使用小写字母和中划线来组合命名，中划线用以分割单词。 例如：

<view class="menu-item"></view>

ID

• 命名方法 : 全部大写
• 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。 例如：

<view id="MENU_ITEM"></view>

组件命名

• 文件夹的命名统一首字母大写 及驼峰命名规则

• 文件名统一使用index.vue

• 组件名应该始终是多个单词的

• 有意义的名词、简短、具有可读性

  例: OrgSelectDialog
      UserMenu

method 方法命名命名规范

• 驼峰式命名，统一使用动词或者动词+名词形式
• 请求数据方法，以 data 结尾

   methods: {
     jumpPage(){},
     openCarInfoDialog(){},
     getListData(){},
     postFormData(){}
   }

尽量使用常用单词开头（set、get、go、can、has、is） 可以参考如下的动作：

1. has: 判断是否含有某个值
2. is: 判断是否为某个值
3. get: 获取某个值
4. set: 设置某个值
5. update: 更新某个值
6. fetch: ajax 请求（一般用在 vuex 里的 actions）
7. on: 触发事件（click/change 等 dom 事件或者emit派发事件）
8. render: 渲染页面
9. handle: 执行某一个事件（如果不清楚用什么动词前缀，可以使用 handle）
10. 还有很多类似的动作，例如：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]
} 

多个特性的元素应该分多行撰写，每个特性一行。(增强更易读) 例：

<img
  src="https://"
  alt=""
>
<my-component
  a="a"
  d="b"
  c="c"
>
</my-component>

注释规范

• 代码注释在一个项目的后期维护中、和二次开发时显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明

源码风格

• 使用 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 已经全局加载直接使用 例：

<template>
    <el-form-item>
        <el-input />
    </el-form-item>
</template>

• 全局组件自动注册，可在任意页面加载使用无需再次引入，详见下文 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中的 <RouterView />

<keep-alive>
    <RouterView />
</keep-alive>

即我们新建页面要定义在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 组件写法 例：

定义: 
<script>
export default {
    name: 'SvgIcon',
    props: {
        name: {
            type: String,
            required: true
        }
    }
}
</script>

页面中使用:
<template>
    <SvgIcon />
</template>

• 如需定义非公共组件 在components中新建符合命名规则单独文件夹，在单页面中引入使用

assets

• 项目用icon，字体，图片，雪碧图，公共样式存放路径
• @/assets/styles/resources/variables.scss 全局变量样式文件请在页面中引入使用

`