vue开发规范
一、框架
vue 目录结构规范如下
src 源码目录
|-- api 接口，统一管理
|-- assets 静态资源，统一管理
|-- components 公用组件，全局文件
|-- filters 过滤器，全局工具
|-- icons 图标，全局资源
|-- layout 侧边栏及导航存放文件
|-- mock 模拟接口，临时存放
|-- router 路由，统一管理
|-- store vuex, 统一管理
|-- views 视图目录
| |-- login 视图模块名
| |-- |-- index.vue 模块入口页面
| |-- |-- components 模块页面级通用组件文件夹
| |-- |-- |--login-verify.vue 模块页面级通用组件页面
1.组件文件夹
组件文件夹的名字：应该始终是以连接线（-）连接的单词，一方面可与组件名一致，使项目更加清晰，另一方面这样的写法对编辑器引入也很友好。
页面级组件文件命名：应该始终以视图模块文件夹名为前缀开头以连接线（-）连接组件功能名词用以区别与其他业务组件。
|-- exam-system 视图模块文件夹
|-- |-- index.vue 模块入口页面
|-- |-- components 模块页面级通用组件文件夹
|-- |-- |-- exam-system-item.vue 模块页面级组件文件
|-- |-- |-- exam-system-nav.vue 模块页面级组件文件
|-- |-- |-- exam-system-header.vue 模块页面级组件文件
2.组件名
组件名为多个单词，并且用连接线（-）连接，避免与 HTML 标签冲突，并且结构更加清晰。
export default {
name: 'page-edit'
}
3.Prop
定义 Prop 的时候应该始终以驼峰格式（camelCase）命名，在父组件赋值的时候使用连接线（-）。这里遵循每个语言的特性，因为在 HTML 标记中对大小写是不敏感的，使用连接线更加友好；而在 JavaScript 中更自然的是驼峰命名。
props: {
articleStatus: Boolean
}
// HTML
<article-item :article-status="true"></article-item>
Prop 的定义应该尽量详细的指定其类型、默认值和验证
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)
}
}
}
4.v-for
在执行 v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更高。
<ul>
<li v-for="item in list" :key="item.id">
{{ item.title }}
</li>
</ul>
v-for 应该避免与 v-if 在同一个元素（例如：< li >）上使用，因为 v-for 的优先级比 v-if 更高，为了避免无效计算和渲染，应该尽量将 v-if 放到容器的父元素之上。
<ul v-if="showList">
<li v-for="item in list" :key="item.id">
{{ item.title }}
</li>
</ul>
5.v-if / v-else-if / v-else
若同一组 v-if 逻辑控制中的元素逻辑相同，Vue 为了更高效的元素切换，会复用相同的部分，例如：value。为了避免复用带来的不合理效果，应该在同种元素上加上 key 做标识。
<div v-if="hasData" key="mazey-data">
<span>{{ mazeyData }}</span>
</div>
<div v-else key="mazey-none">
<span>无数据</span>
</div>
6.指令缩写
为了统一规范始终使用指令缩写，使用v-bind，v-on并没有什么不好，这里仅为了统一规范。
<input :value="mazeyUser" @click="verifyUser">
7.样式
为了避免样式冲突，整个项目要么全都使用 scoped 特性，要么使用 BEM 约定
<!-- 使用 scoped 特性 -->
<template>
<button class="btn btn-sure">确认</button>
</template>
<style scoped>
.btn{
border: 1px solid #F1F1F1;
}
.btn-sure{
background-color: blue;
}
</style>
<!-- 使用 BEM（Block Element Modifier） 特性 -->
<template>
<button class="menu-btn menu-btn-sure">确认</button>
</template>
<style>
.menu-btn{
border: 1px solid #F1F1F1;
}
.menu-btn-sure{
background-color: blue;
}
</style>
8.单文件组件的顶级元素顺序
为了统一和便于阅读，应该按 < template>、< script>、< style>的顺序放置。
<template>
<!-- HTML -->
</template>
<script>
/* JavaScript */
</script>
<style>
/* CSS */
</style>
二.JavaScript
1.var / let / const
建议不再使用 var，而使用 let / const，优先使用 const。任何一个变量的使用都要提前申明，除了 function 定义的函数可以随便放在任何位置。
声明变量时使用驼峰命名法，命名必须是跟需求的内容相关的词如果是复数加s
let productPageDetail = "产品详情页面";
声明常量时使用大写字母匈牙利式命名法
const MAX_COUNT = 10
const URL = 'https://www.baidu.com/'
2.引号
建议不再使用双引号，静态字符串使用单引号，动态字符串使用反引号衔接。
const foo = '测试'
const bar = `${foo}，vue规范`
3.method 方法命名命名规范
统一使用驼峰命名法，请求数据方法，以 Data 结尾
methods: {
footerItemData(){
/*方法*/
},
}
4.组件选项顺序
components
props
data
computed
created
mounted
methods
filter
watch
5.注释
应该给每一个模块文件写一个区块注释。Vscode安装 KoroFileHeader 插件
<!--
* @Descripttion:
* @version:
* @Author:
* @Date: 2020-05-06 10:05:08
* @LastEditors:
* @LastEditTime: 2020-05-07 15:13:15
-->
网友评论