项目规范
- 项目名称根据项目来命名。
- 项目层级文件夹按照业务功能命名。
- 合适的编译工具。
- 合适的代码规范插件。
- 合适的UI辅助框架。
代码规范
vue 文件基本结构
<template>
<div>
<!--必须在div中编写页面-->
</div>
</template>
<script>
export default {
components : {
},
data () {
return {
}
},
mounted() {
}，
methods: {
}
}
</script>
<!--声明语言，并且添加scoped-->
<style lang="scss" scoped>
</style>
多个特性的元素规范
多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)
<!-- bad -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c"></my-component>
<!-- good -->
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
>
<my-component
foo="a"
bar="b"
baz="c"
>
</my-component>
文件名称规范
- 单文件组件
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)**
|-VideoUpload.vue
|-video-upload.vue
- 组件文件
组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。可以快速区分找到需要的文件,增加可读性
components/
|- UserList.vue
|- UserItem.vue
- 完整的单词组件名
组件名应该倾向于完整单词而不是缩写。
components/
|- UserOrder.vue
|- UserVideo.vue
指令规范
- 指令有缩写一律采用缩写形式
// bad
v-bind:class="{'show-left'：true}"
v-on:click="getListData"
// good
:class="{'show-left'：true}"
@click="getListData"
- v-for设置键值
key必须和v-for循环使用（唯一性），以便维护内部组件及其子树的状态
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
- v-for避免和v-if一起使用,
为了避免渲染本应该被隐藏的列表
class样式名规范
应该为横线链接(kebab-case)组合,并且以功能去定义名称，方便阅读。
<span class='user-avater'></span>
method 方法命名命名规范
驼峰式命名，统一使用动词或者动词+名词形式
<el-button
v-if="permissionList.word_export"
size="small"
icon="el-icon-download"
type="warning"
@click="toWordExport"
>导出</el-button
>
代码注释
复杂的业务逻辑和特殊的场景，应该有相应的注释，便于后期维护和理解。
- 单行注释
// 姓名
var name = “abc”;
2.多行注释
组件使用说明，和调用说明
/**
* 组件名称
* @module 组件存放位置
* @desc 组件描述
* @author 组件作者
* @date 2017年12月05日17:22:43
* @param {Object} [title] - 参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
* <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
**/
git提交规范
可以过滤某些commit（比如文档改动），便于快速查找信息。
如：git commit -m "feat:增加了某些新的功能"
feat：新功能（feature）
fix：修补bug
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动
