文章目录
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头部注释
<!------------------------------------------------------------------
* @description 全局布局组件
* @author xxx
* @version 2018.08.29
* @param {String} image 当前图像对象
* @function clickTriger 点击左键后的冒泡方法
------------------------------------------------------------------->
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实例各项及生命钩子函数放置顺序
- name
- components
- props
- computed
- data
- created
- mounted
- updated
- activited
- deactivited
- watch
- filter
- 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样式