VUE项目编程规范实践

1 开发环境

1.1 开发工具

不做限制，但是不能使项目文件出现多于空格及换行符。

1.2 安装方法

操作	命令
安装依赖	npm install
运行开发环境	npm run dev
打包代码	npm run build

2 命名规则

注意：所有命名尽量控制于一个单词

2.1 文件及文件夹

类型	规则	命名
文件	驼峰式	viewPanel.vue
文件夹	驼峰式	imagesManager

2.2 变量、常量及方法

类型	规则	命名
变量	驼峰式	configBase
常量	全大写	SAVE_DATA
类名	大驼峰式	BaseServer
普通方法	驼峰式	openCarInfoDialog
事件方法	驼峰式	onTypeChange

2.3 HTML及CSS

类型	规则	命名
class	短横杠连接式	content-item
id	下划线连接式	content_item

3 开发规则

3.1 注释

注意：注释要言简意赅、准确描述功能

3.1.1 文件头部注释

js及css头部注释：

/******************************************************************/
/**
 * @description 全局配置文件
 * @author xxx
 * @version 2018.08.29
 */
/******************************************************************/

html及vue头部注释

3.1.2 行注释

行注释用于类、方法中某行代码的注释

// 清除缓存
clearCache()

3.1.3 段注释

段注释用于类、方法开头的注释

/**
* @description 全局常量文件
* @author xxx1(add);xxx2(modify);xxx3(modify)...
* @version 2018.08.29
* @param {String} imageUrl 当前窗口图像的url
*/

3.2 语法规则

3.2.1 JavaScirpt

• 严格符合ES2015语法规则
• 所有文件均需要被ESlint检测通过
• 不可引起意外的死循环、递归、内存泄漏；如需要用闭包，必须保证可控
• 避免两个文件相互引入
• 保证高内聚低耦合，功能脚本不可有外部依赖
• 所有需要操作DOM的功能必须注意影响范围

3.2.2 HTML

• class和id必须言简意赅，尽量避免使用多个单词

3.2.3 CSS

• 像素单位统一采用rem (1rem = 100px)
• 严格符合sass语法
• 运用好sass（mixin，variavle等特性）

3.2.4 Vue

vm实例各项及生命钩子函数放置顺序

1. name
2. components
3. props
4. computed
5. data
6. created
7. mounted
8. updated
9. activited
10. deactivited
11. watch
12. filter
13. methods

4 css

4.1：像素单位统一采用rem（1rem = 100px）（边框固定为1px或者2px的除外）

运用好sass（mixin，variavle等特性）

5 api方法

方法低耦合

6.vuex

谨慎使用computed和watch
谨慎对vuex进行零碎化赋值或者循环赋值操作

7.编程风格遵循ES6 Module方式和es-lint校验

import和export等

8.非业务性公共组件和和业务性公共组件

和api一样严格遵循一个原则：高内聚，低耦合

#最后，以提高性能、便于后续维护和迭代开发为原则进行开展

#对前端性能优化的一些建议（主要从页面渲染方面）：
1.需要通过js修改样式时，尽可能的使用className，而不是直接修改style
2.避免使用css expresion(css表达式)
3.减少全局变量的使用（包括vuex的使用）
4.避免在循环中修改dom或者css样式