README.md 3.6 KB

#鉴义后台模板规范

#####基于vue-element-admin

#####组件参考:element-ui 2.13版本vue-element-admin

src目录结构

api - API文件 assets -静态资源目录 components - 公用组件存放 directive - 全局自定义指令 filters - 全局过滤器 icons - 图标 layout - 布局 mixins - 混入 router - 路由配置 store - store styles - 全局样式(sass) utils - 工具 views - 页面

1.api规范

###1.1 文件命名规范 每个模块单独一个js,例如

api

user.js

###1.2 文件内容命名规范 每个请求必须注释名字

//引入request
import request from '@/utils/request'


//用户登录
export function userLogin(data) {    //命名为文件名_api名
  return request({
    url: '/api/auth/sdk/login',
    method: 'post',
    data
  })
}

###1.3 文件引用规范 按需引入需要的接口,未使用的不允许引入

//引入用户登录接口
import { userLogin } from '@/api/user'

//接口使用
userLogin(data).then(e=>{console.log(e)})

##2. views规范 ###2.1 命名规范 ####2.1.1 views页面文件夹命名 views下面的页面文件夹命名为 业务名+模块名以驼峰方式隔开,同业务不同模块分为2个文件夹 ,例如

views

userList userDetail

####2.1.2 页面文件夹规范 文件夹下页面入口为index.vue,例:

views

userList

index.vue

#####如需要页面单独的组件则再该文件夹下单独创建components文件夹存放,其余文件同理。 #####遇到通用性比较多的组件 需放到公共组件‘src/components/’目录下

####2.1.3 index.vue规范 页面命名必须和文件夹一样,开头大写,例 用户列表页面 则:

export default {
  name: 'UserList',
}

##3. 字典规范 ###3.1 字典表维护 前端字典表统一维护在/utils/optionList.js中, VALUE必须为NUMBER类型

// 用户状态
export const userStatus = [
  { value: 0, label: '未实名' },
  { value: 1, label: '实名' }
]

###3.2 字典表统一过滤器 使用方式: {{ 接口返回数据 | getOptionsLabel('字典名') }} 例:

 {{ req.data.status | getOptionsLabel('userStatus') }} 
 //字典名为optionList中设置的对应字典

##4. 其他规范 ###4.1 注释规范

  • 定义函数方法时必须加注释,描述功能,说明参数,如有返回值的写明返回值类型和相关描述
  • data 内定义的属性,必须添加注释描述(vue)
  • 单行注释以 // 开头。
  • 多行注释以 /* 开头,以 */ 结尾。

4.2 变量规范

  • 变量申明不要使用关键字var,用let/const,统一常量不变值用 const 定义
  • 变量或属性不允许赋值“undefined”
  • 若表单内表单项有双向绑定 form 对象内属性,请在 data 中定义被绑定的属性(vue)
  • 变量定义禁止使用“_”开头或者结尾
  • 变量采用驼峰命名法进行命名,禁止使用‘_’拼接;

4.3 git规范

请务必遵守git规范 1.master只有发版提交 2.开发拉一个本地分支,根据功能命名,开发完毕合并到develop 3.无特殊情况不允许推送各种分支到git上 4.开发完毕确认无误后 把develop合并到master

安装/开发/打包

 //安装
 npm install
 
 //开发  页面因考虑权限 需要提前和后端定义
 npm run dev
 
 //打包
 npm run build:dev //dev环境  文件:.env.development
 npm run build:prod //生产环境 文件:.env.production
npm run build:stage //演示环境 文件:.env.staging 
// api路径改上面对应文件

#其他暂定。。。