一、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、添加必要的注释
所有自定义的方法需要给出注释
比较大的代码块需要给出注释
所有代码中出现的阿拉伯数字需要给出注释
程序中出现加密／解密 逻辑的操作地方，需要给出注释说明过程（无论是系统还是自定义）
- 整体代码风格需要统一
代码后面的“{” 不需要单独占用一行
逻辑运算符 与 代码之前空一格
