团队人数多、和每个人的代码风格都有差异、所以需要约定开发规范、遵守开发规范可以：约束开发的合理化、增强项目的一致性、避免代码的重构！

文件命名与文件夹命名规范

  • 采用小写方式、多个单词使用 - 进行连接（ 示例：element-ui.js ）

  • 说明文件可采用大写命名为了显目 （ 示例：README、LICENSE )

    变量命名：采用小驼峰式命名方法

    1. let userInfo = {...}

    函数：小驼峰方式（构造函数使用大驼峰命名）

    1. function getUserInfo(){}
    2. function User(){}
    3. let userInfo = new User();

    常量：全部大写、多个单词使用 _ 连接

    1. const SYSTEM = "SYSTEM"
    2. const SYSTEM_CONFIG = "SYSTEM_CONFIG"

    类

  • 公共属性和方法使用小驼峰

  • 私有属性和方法 前缀使用 _下划线+小驼峰

    1. function Student(name) {
    2.   var _name = name; // 私有成员
    4.   // 公共方法
    5.   this.getName = function () {
    6.       return _name;
    7.   }
    9.   // 公共方式
    10.   this.setName = function (value) {
    11.       _name = value;
    12.   }
    13. }
    14. var st = new Student('tom');
    15. st.setName('jerry');
    16. console.log(st.getName()); // => jerry：输出_name私有变量的值

    严格等

    1. const type = 1;
    2. const status = 1;
    3. if(type === status){}

    组件属性和封装规范

  • 基础组件应以特定前缀开头 比如 Base 、App 或者 V

    1. components/
    2. |- BaseButton.vue
    3. |- BaseTable.vue
    4. |- BaseIcon.vue

  • import 统一使用 大驼峰方式

    1. import MemberList from "xx"
    2. // 使用
    3. <MemberList></MemberList>

  • 总是用 key 配合 v-for、以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为 ```json

  • {{ todo.text }} 

  2. - Props定义尽量**详细**
  3. ```json
  4. // 这样做只有开发原型系统时可以接受
  5. props: ['status']
  6. // 好的
  7. props: {
  8.   status: String
  9. }
  10. // 更好的做法！
  11. props: {
  12.   status: {
  13.     type: String,
  14.     required: true,
  15.     validator: function (value) {
  16.       return [
  17.         'syncing',
  18.         'synced',
  19.         'version-conflict',
  20.         'error'
  21.       ].indexOf(value) !== -1
  22.     }
  23.   }
  24. }
  • 永远不要把 v-if 和 v-for 同时用在同一个元素上。
  • 为组件设置作用域 scoped

  • Props名大小写

    1. props: {
    2. greetingText: String
    3. }
    4. <WelcomeMessage greeting-text="hi"/>

    缩进 使用4个空格

    一些开源库的规范

  • Vue

  • 京东凹凸实验室

工具的约束

  • 引入pre-commit来对工程代码规范进行检测
  • 引入 eslint 规范配合jenkins进行检查，如检查失败将会阻止代码构建
  • 安装自动格式化插件