Vue项目代码规范

一、UI框架及css预处理器选择

1、PC端Vue项目UI框架：ElementUI（优先）、iView
2、移动端Vue项目UI框架：mint-ui（优先）、vant
3、sass/scss、less、stylus ?????
推荐less：less相对比sass更简洁，而stylus的语法灵活性开放性过大，不利于团队协作开发。

二、脚手架、插件选择

2.1、脚手架vue-cli2.0 OR vue-cli3.0
推荐vue-cli2.0：团队中熟悉2.0版本脚手架的人居多，脚手架是一个工具类的存在。
2.2、网络请求：axios
2.3、时间格式化插件：momentjs
2.4、富文本编辑器：ueditor
2.5、图片剪裁插件：cropperjs
2.6、图表：echarts

三、命名规范

3.1、id和class的命名原则

应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名（原则：见名知其义）

3.2、文件夹、文件名、id、class具体命名规范:驼峰命名法

• 文件夹采用“大驼峰命名法”

例：DataBaseUser：变量DataBaseUser单词首字母大写。
注：文件名不要以中文或人名命名，可以在文件内部注释说明是谁修改或建立的这个文件

• 文件名采用“大驼峰命名法”

例：DataBaseUser：变量DataBaseUser单词首字母大写。

• id：采用“小驼峰命名法”

例：myStudentCount：变量myStudentCount第一个单词是全部小写，后面的单词首字母大写。

• class：采用“中划线法命名法”

例：print-employee-paychecks：函数名中的每一个逻辑断点都有一个下划线来标记。

3.3、id和class命名越精简越好，只要足够表达意思，这样有助于理解，同时也能提高代码效率

.navigation{} /* 不推荐 */
.login_box_inside_con{} /* 不推荐 */
.nav{} /* 推荐 */

3.4、命名嵌套问题

书写css要注意先后顺序和嵌套问题，从性能上考虑尽量减少选择器的层级

.nav ul.list{} /* 不推荐 */
.nav .list{} /* 推荐 */

3.5、命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

• 命名注意缩写，但是不能盲目缩写；
• 不允许通过1、2、3等序号进行命名；
• 避免class与id重名；
• id注意用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id；
• class用于标识某一个类型的对象，命名必须言简意赅；
• 尽可能提高代码模块的复用，样式尽量用组合的方式；
• 规则名称中不应该包含颜色、定位等与具体显示效果相关的信息，应该用意义命名，而不是结果名称。

3.6、Vue 项目中的命名

* Store 中的Module 使用“小驼峰命名法”
* Store 中的Mutation 使用 全部大写的下划线命名法
* Store 中的state/getters/action 使用“小驼峰命名法”
* 组件必须使用“大驼峰命名法”命名法,
* 引用组件时禁止使用别名，模板内组件标签名遵循html 标签命名规范，或者使用组件名
* 组件名必须避免使用Vue保留标签名（包括HTML标签和Vue内部标签）
* 组件文件和组件使用相同的名字
* 前端路由路径使用全小写命名法

四、排版规范

4.1、代码格式

• 1、大括号的使用约定。

* 如果是大括号内为空，则简洁地写成{}即可，不需要换行
例：{}

* 非空代码块则:
（1）左大括号前不换行有空格；
（2）左大括号后换行；
（3）右大括号前换行；
（4）右大括号后还有else等代码则不换行;
（5）表示终止的右大括号后必须换行。
例：
    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、注释的双斜线与注释内容之间有且只有一个空格

例：
// 我就是个注释信息展示
/** 我就是个注释信息展示 **/
/** 
 ** 我就是个注释信息展示 
**/

• 6、方法参数在定义和传入时，多个参数逗号后边必须加空格。

例：
    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.1、项目初始目录

├── node_modules  // 项目依赖包文件夹
├── build   // 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config  // 项目基本设置文件夹
│   ├── dev.env.js  // 开发配置文件
│   ├── index.js  // 配置主文件
│   └── prod.env.js  // 编译配置文件
├── index.html   // 项目入口文件
├── package-lock.json  // npm5 新增文件，优化性能
├── package.json  // 项目依赖包配置文件
├── src    // 我们的项目的源码编写文件
│   ├── App.vue  // APP入口文件
│   ├── assets  // 初始项目资源目录，回头删掉
│   │   └── logo.png
│   ├── components // 组件目录
│   │   └── Hello.vue // 测试组件，回头删除
│   ├── main.js // 主配置文件
│   └── router // 路由配置文件夹
│       └── index.js   // 路由配置文件
└── static // 资源放置目录

5.2 src目录配置

├── App.vue // APP入口文件
├── components  // 组件文件夹
│   └──common  // 共用组件文件夹
│   └──page  // 我们的页面组件文件夹
│   │   ├── home   // 模块划分文件夹
│   │   ├── user     // 模块划分文件夹
│   └──Main.vue    // 项目主入口文件
├── plugins  // 项目配置文件夹
│   └── ajax // 网络请求配置文件
│   │   ├── http.js     // 网络请求封装文件
│   └── api  // 常用工具文件夹
│   │   ├── index.js     // 自定义工具注册入口
│   │   ├── ValideCard.js     // 身份证验证规则文件
│   │   ├── valideEmail.js     // 邮箱验证规则
│   │   ├── valideTel.js         // 手机号证规则
│   └── url  // 项目配置文件
│   │   ├── index.js     // 接口注册入口
│   │   ├── url.js         // 接口API自定义文件
├── main.js  // 项目配置文件
├── router  // 路由配置文件夹
│   └── index.js  // 路由配置文件
├── style  // scss 样式存放目录（待定，选用less或scss）
│   ├── base   // 基础样式存放目录
│   │   ├── _base.scss   // 基础样式文件
│   │   ├── _color.scss  // 项目颜色配置变量文件
│   │   ├── _mixin.scss  // scss 混入文件
│   │   └── _reset.scss  // 浏览器初始化文件
│   ├── scss   // 页面样式文件夹
│   │   ├── _content.scss  // 内容页面样式文件
│   │   └── _index.scss  // 列表样式文件
      └── style.scss  // 主样式文件

5.3 CSS属性编写顺序（一般遵循显示属性 -> 自身属性 -> 文本属性 -> 其他属性的书写格式）

• 显示属性：display/list-style/position/float/clear...
• 自身属性（盒模型）：width/height/margin/padding/border
• 背景：background
• 行高：line-height
• 文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
• 其他：cursor/z-index/zoom/overflow...
• CSS3属性：transform/transition/animation/box-shadow/border-radius

• 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加，标准属性写在最后
  链接的样式请严格按照如下顺序添加：a:link -> a:visited -> a:hover -> a:active

   

  

  属性编写顺序.png

注：补充说明

1、删除多余的空行

• 所有方法与方法之间空1行

• 所有代码块之间空1行

2、删除多余的注释

• 删除注释掉的代码

• 删除没有意义的注释

3、删除多余的方法

• 如果方法没有使用到，请删除它

• 如果方法没有执行任何业务逻辑，请删除它或者给出一定注释

4、删除未被使用的资源文件

5、添加必要的注释

• 所有自定义的方法需要给出注释

• 比较大的代码块需要给出注释

• 所有代码中出现的阿拉伯数字需要给出注释

• 程序中出现加密／解密 逻辑的操作地方，需要给出注释说明过程（无论是系统还是自定义）

1. 整体代码风格需要统一

• 代码后面的“{” 不需要单独占用一行

• 逻辑运算符 与 代码之前空一格

                                                                                                                                                                              转自作者：罗小耳