前端后台管理项目开发文档

前端后台管理(预设用户管理中心) 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) 可以参考如下的动作:
  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]
} 
多个特性的元素应该分多行撰写,每个特性一行。(增强更易读) 例:



注释规范

  • 代码注释在一个项目的后期维护中、和二次开发时显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明
源码风格
  • 使用 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 全局变量样式文件请在页面中引入使用

`

你可能感兴趣的:(前端后台管理项目开发文档)