vuecli项目文件命名_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{} /* 不推荐 */

<