Vue项目代码规范

一、 项目目录篇

├── dist                          生成打包后文件  								
├── node_modules                 	安装的依赖包     								
├── public                       	public中的表态资源会被复制到输出目录(dist)中	
│   ├── index.html				主页，项目入口								
│   ├── 	favicon.ico				网站图标										
├── src  																	
│   ├── assets              		放置一些静态资源，例如图片，图标，字体  			
│   ├── components            	公共组件  									
│   ├── directive				自定义指令									
│   ├── layout					公共布局组件									
│   ├── router                  	vue-router 相关配置 							
│   ├── store                     vuex 相关配置 								
│   ├── utils                     自定义的工具类  								
│   ├── views                     所有的页面  									
│   ├── App.vue              		路由组件的顶层路由 							
│   └── main.js                 	Vue 入口文件  								
├── package.json                 	npm包配置文件、依赖包信息						
└── vue.config.js                 配置				
复制

二、 组件篇

1.组件开发需要全面的收集需求，深刻分析此组件可以覆盖的业务范围，并作出正确的取舍。 2.一个组件不可能是大而全的，但可以是层层扩展的，从一个基础组件，一层层的扩展成更复杂的组件，甚至超大型的组件。 3.组件的props、method、events需要遵守同样的命名规范，如获取值用getXXX,设置值用setXXX，创建用createXXX等，这些可以快速的帮助使用者找到需要的接口。 4.组件需要添加name，在设置keep-alive时需要用到。 5.组件头部应该添加组件的说明注释，如接收的传入参数、向外层抛出的事件名等。 6.props定义应该尽量详细，包括type、default、required、甚至validator 7.样式应该设置scoped，避免污染全局样式。

三、 命名规范篇

1. CSS命名规范

1）css class命名尽量使用英语，不要使用汉拼，并且有意义， ​ 2）使用单词命名时不要缩写，除非非常有名的单词。 ​ 3）规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _ 例如（header-list） ​ 4）不允许通过1、2、3等序号进行命名 ​ 5）避免class与id重名

css 编写顺序

​ 1）位置，定位，层级（position，top，bottom，left，right，z-index，display，float） ​ 2）大小（width，height，padding，margin） ​ 3）文字系列（font, line-height, letter-spacing, color- text-align） ​ 4）背景（background，border） ​ 5）其他（animation，transition）

2. javascript规范（基于ES6 结合eslint 强制编码格式）

1）变量命名采用小驼峰命名法—即首字母小写，后每个单词首字母大写 2）常量命名采用全字母大写命名，以便于与变量区分 ​ 常量 const PI = 3.141592653 变量 let name = ‘’ 3）函数命名使用小驼峰命名法，条件允许情况下请采用动词前缀方式，请保证函数命名语义化明确 4）构造函数命名必须采用大驼峰命名法，即首字母必须大写 5）字符串拼接推荐使用ES6中``拼接 6）判断等于尽量使用===

3. 组件命名规范

1）组件名应该始终是多个单词组合的，一些vue内置组件除外，如App、component、transition等。 2）组件在components文件夹下，一个组件建一个文件夹，文件夹名为该组件名，格式为大驼峰格式，文件夹下是index.vue（基础）+ 其他 例如： 3）特定和基础组件，应该以一个特定的前缀开头，比如Base、App等

components/  
|- BaseButton  
|- BaseTable  
|- BaseIcon 
components/  
|- AppButton  
|- AppTable  
|- AppIcon 
复制

4）组件的命名应该使用完整单词，而不是缩写

//反例   
components/   
|- BtnAdd   
|- UName     
//推荐   
components/   
|- ButtonAdd   
|- UserName  
复制

4. 页面命名规范

views下为项目所有页面。 1）层级与业务一致，即与功能层级一致 例如： 2）命名格式为小驼峰格式，但建议多层级、单个单词的方式，末级文件夹为功能名称，下面包括index.vue（基础）+ 其他。

四、 接口篇

1.api文件夹下接口文件层级与页面保持一致。 2.具体形式与项目封装的数据请求有关。 框架一般会统一处理失败的请求，所以在项目中，前端开发者只需要处理成功后的相关操作和提示。

五、 注释篇

1.template部分：

特殊组件或其他特殊含义内容使用注释。

2.script部分：

1）data中的所有对象必须加注释，对象上方单行注释。 例如：

data() {
  return {
    // 遮罩层
    loading: true,
    // 选中数组
    ids: [],
    // 非多个禁用
    multiple: true,
    // 显示搜索条件
    showSearch: true,
    // 总条数
    total: 0,
    // 表格数据
    list: [],
    // 查询参数
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      userName: undefined,
      status: undefined
    }
  };
},
复制

2）methods中的所有方法必须加注释，方法上方多行注释，注释内容包括方法描述。 例如：

methods: {
/**
 * @description: 查询登录日志列表
 * @param {*} 
 * @return {*}
 */
  getList() {
    this.loading = true;
    list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      }
    );
  },
}
复制

3.style部分：

一般不加，存在特殊含义内容是加注释说明

六、 常用变量限制及验证（根据项目实际情况调整）

1.名称字数限制 （推荐1-20） ​ 2.手机号，电话，邮箱验证（通用验证） ​ 3. 上传附件 ​ 图片：若无特殊要求，格式限制jpg、png、jpeg、gif ，大小限制 5M以下 ​ 视频：若无特殊要求，格式限制mp4、MPEG4

七、 页面显示及功能交互通用

1.文字超出容器需要进行 ‘…’ 省略 ​2.图片显示 无特殊要求时，按原图宽高比显示（element-UI中el-image属性fit设置为scale-down） ​3.美化滚动条 ​4.涉及数据处理功能按钮，增加防频繁点击处理（提交按钮添加loading,根据场景loading可以在promise的then或者finally里中关闭）