vue开发规范
2019-05-13 本文已影响0人
凌枝
Vue 开发规范目录及说明
- 规范目的
- 命名规范
- 结构化规范注
- 释规范
- 编码规范
- CSS 规范
规范目的
为提高团队协作效率
便于后台人员添加功能及前端后期优化维护
输出高质量的文档
命名规范
为了让大家书写可维护的代码，而不是一次性的代码
让团队当中其他人看你的代码能一目了然
甚至一段时间时候后你再看你某个时候写的代码也能看
普通变量命名规范
- 命名方法 ：驼峰命名法
- 命名规范 ：
- 命名必须是跟需求的内容相关的词，如
let productPageDetail = "产品详情页面";
- 命名是复数的时候需要加s,如
const productList = new Array();
常量
- 命名方法 : 全部大写
- 命名规范 : 使用大写字母匈牙利式命名法。
const MAX_COUNT = 10
const URL = 'https://www.cupshe.com/'
组件命名规范（驼峰式命名）
- 公用组件以cupshe_AR(公司+项目名)开头如：
cupsheAR-TopBar,
cupsheDE-TopBar
- 页面内部组件以组件模块名简写为开头，Item 为结尾，如：
addToCartItem,
checkoutItem
method 方法命名命名规范
- 匈牙利式命名，统一使用动词或者动词+名词形式
get_user_list,
submit_cart_product
- 请求数据方法，以 data 结尾
get_product_list_data
get_user_data
views下的文件命名
- 尽量是名词,且使用驼峰命名法
productDetailPage
props 命名
- 在声明 prop 的时候，使用驼峰命名法，在模板中使用 kebab-case
<script>
props: {
greetingText: String
}
</script>
<welcome-message greeting-text="hi"></welcome-message>
结构化规范
目录文件夹及子文件规范
以下统一管理处均对应相应模块
以下全局文件文件均以 index.js 导出，并在 main.js 中导入
以下临时文件，在使用后，接口已经有了，发版后清除
src 源码目录
|-- api 接口，统一管理
|-- assets 静态资源，统一管理
|-- components 公用组件，全局文件
|-- filters 过滤器，全局工具
|-- icons 图标，全局资源
|-- datas 模拟数据，临时存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模拟接口，临时存放
|-- router 路由，统一管理
|-- store vuex, 统一管理
|-- views 视图目录
| |-- staffWorkbench 视图模块名
| |-- |-- staffWorkbench.vue 模块入口页面
| |-- |-- indexComponents 模块页面级组件文件夹
| |-- |-- components 模块通用组件文件夹
vue 文件基本结构
<template>
<div>
</div>
</template>
<script>
export default {
components : {
},
data () {
return {
}
},
mounted() {
}，
methods: {
}
}
</script>
<!--声明语言，并且添加scoped-->
<style lang="scss" scoped>
</style>
组件选项顺序
- components
- props
- data
- computed
- created
- mounted
- metods
- filter
- watch
注释规范
务必添加注释列表
- 公共组件使用说明
- 各组件中重要函数或者类说明
- 复杂的业务逻辑处理说明
- 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用
- 了某种算法或思路等需要进行注释描述
- 多重 if 判断语句
- 注释块必须以/（至少两个星号）开头/
- 单行注释使用//
编码规范
指令规范
:class="{'show-left'：true}"
@click="getListData"
v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
避免 v-if 和 v-for 同时用在一个元素上（性能问题）
- 将数据替换为一个计算属性，让其返回过滤后的列表
<ul>
<li v-for="user in activeUsers" :key="user.id">
{{ user.name }}
</li>
</ul>
<script>
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
</script>
- 将 v-if 移动至容器元素上 (比如 ul, ol)
<ul v-if="shouldShowUsers">
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
Props 规范
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
其他
避免 this.$parent调试信息
console.log() debugger 使用完及时删除
除了三目运算，if,else 等禁止简写
CSS 规范
统一使用"-"连字符
省略值为 0 时的单位
如果 CSS 可以做到，就不要使用 JS
建议并适当缩写值，提高可读性，特殊情况除外
padding-bottom: 0;
margin: 0;
- 分类的命名方法
使用单个字母加上"-"为前缀
布局（grid）（.g-）；
模块（module）（.m-）；
元件（unit）（.u-）；
功能（function）（.f-）；
皮肤（skin）（.s-）；
状态（.z-）。
