#鉴义后台模板规范

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

#####组件参考：[element-ui 2.13版本](https://element.eleme.cn/2.13/#/zh-CN/component/installation) 和 [vue-element-admin](https://github.com/PanJiaChen/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路径改上面对应文件
```

#其他暂定。。。