基于 Vue 的前端开发规范

组件名为多个单词，并且用连接线（-）连接，避免与 HTML 标签冲突，并且结构更加清晰。

示例：

// 反例export default {    name: 'item'}// 正例export default {    name: 'page-article-item'}

组件的名字应该始终是以连接线（-）连接的单词，一方面可与组件名一致，使项目更加清晰，另一方面这样的写法对编辑器引入也很友好。

示例：

// 反例├── index.html
├── main.js
└── components
    ├── pageheader
    ├── pagearticle
    └── pageheader// 正例├── index.html
├── main.js
└── components
    ├── page-header
    ├── page-article
    └── page-header

对于例如按钮、下拉框或表格这样的基础组件应该始终以一个特定的前缀开头，区别与其他业务组件。

示例：

// 反例├── index.html
├── main.js
└── components
    ├── page-header
    ├── page-article
    ├── page-header
    ├── mazey-button
    ├── mazey-select
    └── mazey-table// 正例├── index.html
├── main.js
└── components
|   ├── page-header
|   ├── page-article
|   └── page-header
└── base
    ├── mazey-button
    ├── mazey-select
    └── mazey-table

定义 Prop 的时候应该始终以驼峰格式（camelCase）命名，在父组件赋值的时候使用连接线（-）。这里遵循每个语言的特性，因为在 HTML 标记中对大小写是不敏感的，使用连接线更加友好；而在 Javascript 中更自然的是驼峰命名。

示例：

// 反例// Vueprops: {
    article-status: Boolean
}// HTML// 正例// Vueprops: {
    articleStatus: Boolean
}// HTML

Prop 的定义应该尽量详细的指定其类型、默认值和验证。

示例：

// 反例props: ['attrM', 'attrA', 'attrZ']// 正例props: {    attrM: Number,    attrA: {        type: String,        required: true
    },    attrZ: {        type: Object,        // 数组/对象的默认值应该由一个工厂函数返回
        default: function () {            return {                msg: '成就你我'
            }
        }
    },    attrE: {        type: String,        validator: function (v) {            return !(['success', 'fail'].indexOf(v) === -1) 
        }
    }
}

在执行 v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更高。

示例：

// 反例

    
        {{ item.title }}    
// 正例

    
        {{ item.title }}    

v-for 应该避免与 v-if 在同一个元素（例如：

// 反例

    
        {{ item.title }}    
// 正例
    
        {{ item.title }}    

若同一组 v-if 逻辑控制中的元素逻辑相同，Vue 为了更高效的元素切换，会复用相同的部分，例如：value。为了避免复用带来的不合理效果，应该在同种元素上加上 key 做标识。

示例：

// 反例
    {{ mazeyData }}
    无数据// 正例
    {{ mazeyData }}
    无数据

为了统一规范始终使用指令缩写，使用v-bind，v-on并没有什么不好，这里仅为了统一规范。

示例：

为了避免样式冲突，整个项目要么全都使用 scoped 特性，要么使用 BEM 约定。

示例：

// 反例
    .btn{        border: 1px solid #F1F1F1;
    }    .btn-sure{        background-color: blue;
    }// 正例
    .btn{        border: 1px solid #F1F1F1;
    }    .btn-sure{        background-color: blue;
    }
    .menu-btn{        border: 1px solid #F1F1F1;
    }    .menu-btn-sure{        background-color: blue;
    }

注意

不建议使用类似于 font-size-20，color-666，margin-top-20这样的类，此时如果想把全局的color-666颜色改成 #ccc，不管是直接把 .color-666{color: #666;} 改成 .color-666{color: #ccc;}，还是 全局搜索修改 class 名都很麻烦。本质上我认为 color-666 和直接写 style="color: #666;" 并没有区别。

为了统一和便于阅读，应该按