# vue前端开发规范
# 1、前言
现代软件行业的高速发展对开发者的综合素质要求越来越高，因为不仅是编程知识点，其它维度的知识点也会影响到软件的最终交付质量。为了提高工作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端架构。
# 2、概述
该文档主要对前端开发提供了标准化的数据参考和使用实例，便于前端项目的开发。符合web标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良。页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。
# 3、技术选型
PC端Vue项目UI框架：Element-UI
移动端Vue项目UI框架：Vant-UI
路由管理：Vue-Router
网络请求：Axios
全局状态：Vuex
css预处理器：Sass
富文本编辑器：WangEditor
图表：Echarts
地图：百度map、高德map
# 4、命名规范
# 4.1、命名原则
应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名（原则：见名知其义）。
# 4.2、具体命名规范（驼峰命名法）
文件夹采用“小驼峰命名法”
例：dataBaseUser：变量dataBaseUser单词首字母大写。 注：文件名不要以中文或人名命名，可以在文件内部注释说明是谁修改或建立的这个文件.vue文件夹采用“大驼峰命名法”
例：Index、BaseUser：变量BaseUser单词首字母大写。其它文件夹采用“小驼峰命名法”
例：dataBaseUser：变量dataBaseUser单词首字母大写。id采用“小驼峰命名法”
例：myStudentCount：变量myStudentCount第一个单词是全部小写，后面的单词首字母大写。class：采用“中划线法命名法”
例：print-employee-paychecks：函数名中的每一个逻辑断点都有一个下划线来标记。
# 4.3、精简命名
精简命名，应当表达该变量或方法的含义；采用缩写后，应当在首次使用的地方进行注释；id和class命名越精简越好，只要足够表达意思，这样有助于理解，同时也能提高代码效率。
.navigation{} /* 不推荐 */
.login_box_inside_con{} /* 不推荐 */
.nav{} /* 推荐 */
# 4.4、命名嵌套问题
书写css要注意先后顺序和嵌套问题，从性能上考虑尽量减少选择器的层级。
// 常规写法 - 最好不超过三级
.nav ul.list{} /* 不推荐 */
.nav .list{} /* 推荐 */
// sass 写法 - 不推荐
.nav {}
.nav-list{}
.nav-list-item{}
// sass 写法 - 推荐 (以模块划分写样式)
.nav {
&-list {
&-item {
...
}
}
}
# 4.5、避免使用中文拼音
命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。
- 命名注意缩写，但是不能盲目缩写；
- 不允许通过1、2、3等序号进行命名；
- 避免class与id重名；
- id注意用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id；
- class用于标识某一个类型的对象，命名必须言简意赅；
- 尽可能提高代码模块的复用，样式尽量用组合的方式；
- 规则名称中不应该包含颜色、定位等与具体显示效果相关的信息，应该用意义命名，而不是结果名称。
# 4.6、Vue 项目中的命名
* Store 中的Module 使用“小驼峰命名法”
* Store 中的Mutation 使用 全部大写的下划线命名法
* Store 中的state/getters/action 使用“小驼峰命名法”
* 组件必须使用“大驼峰命名法”命名法,
* 引用组件时禁止使用别名，模板内组件标签名遵循html 标签命名规范，或者使用组件名
* 组件名必须避免使用Vue保留标签名（包括HTML标签和Vue内部标签）
* 模块文件夹不要和文件出现重复相同的单词
* 前端路由路径使用“小驼峰命名法”
# 5、排版规范
# 5.1、代码格式
1、大括号的使用约定。
* 如果是大括号内为空，则简洁地写成{}即可，不需要换行 例：{} * 非空代码块则: （1）左大括号前不换行有空格； （2）左大括号后换行； （3）右大括号前换行； （4）右大括号后还有else等代码则不换行; （5）表示终止的右大括号后必须换行。 （6）在vue里面换行可以不使用分号(;)。 例： methods: { testFunc () { console.log("测试方法") var flag = false if (this.num === 0) { flag = true } else { flag = false } } }2、左右小括号与中间字符之间不出现空格。
例： if (this.num === 0) { // 左右小括号()中间字符直接不出现空格 flag = true; }3、if/for/while/switch 等保留字与括号之间都必须加空格。
例： if () {} for () {} while () {} switch () {}4、任何二目、三目运算符的左右两边都需要加一个空格。
例： int a = 1, b = 2, z, c = 3; z = a > b ? a : (b > c ? b : c);
- 5、变量和方法在首次使用时，应当添加标准注释；注释的双斜线与注释内容之间有且只有一个空格。
例： // 我就是个注释信息展示 /** 我就是个注释信息展示 / / ** 我就是个注释信息展示 **/
// 函数注释 /**
- 累加函数
- @param {number} 初始值
- @param {number} 累加值
- @return {number} 累计后值 */
- 6、方法参数在定义和传入时，多个参数逗号后边必须加空格。
```dart
例：
methods: {
testFunc (pra1, pra2, pra3) {
console.log("测试方法");
var flag = false;
if (this.num === 0) {
flag = true;
} else {
flag = false;
}
}
}
- 7、在 if/else/for/while/do 语句中必须使用大括号。即使只有一行代码，避免采用 单行的编码方式:if (condition) statements;
# 5.2、vue文件代码顺序
必须按照该代码结构构建代码。
// html 代码
<template></template>
// js 代码
<script>
export default {
props: {},
components: {},
watch: {},
computed: {},
data () {},
methed: {},
beforeCreated () {},
created () {},
beforeMounted () {},
mounted () {},
beforeUpdated () {},
updated () {},
beforeDestroyed () {},
destroyed () {},
}
</script>
// css 代码
<style lang="scss" scoped></style>
# 6、项目结构
# 6.1 项目基本目录
├── dist // 打包后文件
├── node_modules // 依赖包
├── public // html模板和静态文件
├── src // 源代码（模块应与apis里的js一一对应）
│ ├── apis // 后端接口
│ ├── assets // 静态资源
│ ├── components // 全局公用组件
│ ├── layout // 布局
│ ├── router // 路由
│ ├── store // 全局状态管理
│ ├── utils // 全局公用方法
│ ├── views // 前端页面代码
│ │ ├── admin // 系统管理模块
│ │ │ ├── menu // 菜单管理页面
│ │ │ │ ├── components // 页面组件
│ │ │ │ ├── Index.vue // 页面入口
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── .env.dev // 开发环境配置文件
├── .env.test // 测试环境配置文件
├── .env.prod // 生产环境配置文件
└── package.json // 依赖包管理
# 6.2 各环境开发文件配置
不同的打包命令对应着不同的配置文件。
.env.dev // 开发环境配置文件 .env.test // 测试环境配置文件 .env.prod // 生产环境配置文件
// 正常打包 npm run build // 开发环境打包 npm run build-dev // 测试环境打包 npm run build-test // 生成环境打包 npm run build-prod配置文件
// 后端的接口服务地址 VUE_APP_PORT = 'http://192.169.0.220:5001' // 可以配置多个对应不同的后端 VUE_APP_PORT_TEST1 = 'http://192.169.0.220:5002' VUE_APP_PORT_TEST2 = 'http://192.169.0.220:5003' VUE_APP_PORT_TEST3 = 'http://192.169.0.220:5004' // 注意：必须以 VUE_APP_ 开头
# 6.3 后端接口注册
所以的后端接口在apis文件夹中统一注册，每一个模块对应一个js文件，接口必须以页面 + 下划线 + 功能 （全大写）定义。
例如：
// 配置文件中定义的后端接口服务地址
let baseURL = process.env.VUE_APP_PORT || ''
// api管理
export const DEMO_LIST = baseURL + '/system/demo/list'
# 6.3 页面和组件
公用组件和全部已经抽离sanhui里面，具体是使用方法请请参考说明文档。
页面全部定义在views文件夹下，以模块文件夹 + 页面文件夹 + Index.vue组成，页面组件放在页面文件夹的components文件夹下。
例： admin // 系统管理模块 ├── menu // 菜单管理页面 │ ├── components // 页面组件 │ ├── Index.vue // 页面入口其它组件，由业务部门自定义的公用组件放在views同级下的conpoents目录下。
# 6.4 样式管理
- 样式由技术部进行统一封装管理，原则上业务部门不应该写全局样式。
- 页面局部样式写在.vue文件中，避免样式污染，每个style标签必须加上scoped属性。
# 7、接口规范
# 7.1、接口命名
接口URL规范：以projectName/name或者IP:port/name开头，name一般放表名或者能表达这个接口的单词，name遵循驼峰法命名。
例如：
projectName/login 、ip:port/projectList等
# 7.2、请求方式规范
支持 HTTP /HTTPS协议（全称HyperText Transfer Protocol/HyperText Transfer Protocol Secure，超文本传输协议/超文本传输安全协议），公司层面统一使用WebApi接口。
GET 从指定的资源请求数据。
POST 向指定的资源提交修改数据/获取数据。
请求传输方式：HTTP /HTTPS协议，支持GET/POST方法。
# 7.3、请求参数规范
请求参数使用JSON格式,采用application/json;charset=UTF-8进行请求。
需要登录的请求必须带Token， Token参数放在请求头 header内。
例如： Authorization: Bearer 269b5e37bdc0444ab756b02977f07e83
# 7.4、返回参数规范
数据对象字段，不建议返回null，数据应当是{}（类），一些接口也可以是[]（数组）或者 ‘’ （字符串）。
参数格式：JSON
普通请求必须参数如下：code状态码，data业务数据，msg返回消息
{ code: 0, data: {}, msg: '成功' }列表请求必须参数如下：code状态码，data业务数据，msg返回消息，count总条数
{ code: 0, data: [], count: 0, msg: '成功' }
# 7.5、状态码
- code为0时请求成功，非0时当成错误抛出。
- code为2时为未登录，自动跳转登录页。