1.概要
前端开发时，开发人员需要遵循的一些开发规范。2. VUE规范
2.1 VUE文件存放文件夹views
views 文件夹下面是由 以页面为单位的 vue 文件 或者 模块文件夹 组成的，放在 src 目录之下，与 components、assets 同级。
2.2 views 下的文件夹命名
views 下面的文件夹代表着模块的名字
文件夹命名
由名词组成（car、order、cart）
单词只能有一个（good: car order cart）（bad: carInfo carpage）
尽量是名词（good: car）（bad: greet good）
以小写开头（good: car）（bad: Car）
2.3 views 下的 vue 文件命名
放在模块文件夹之下
只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 Login Home
尽量是名词
大写开头，开头的单词就是所属模块名字（CarDetail、CarEdit、CarList）
名字至少两个单词（good: CarDetail）（bad: Car）
常用结尾单词有（Detail、Edit、List、Info、Report）
以 Item 结尾的代表着组件（CarListItem、CarInfoItem）
2.4 vue 编码顺序
在编写vue 文件时，需要注意代码的顺序，需要遵循如下的顺序来编写代码。
- name(名字)
- components(组件注册)
- props(属性)
- mixins(继承)
- computed(计算属性)
- data(数据)
- created(实例创建完成)
- mounted(模板渲染完成，可以拿到DOM节点和数据)
- activited(keeplive)
- updated （组件更新后调用）
- beforeUpdate（组件更新之前)
- metods(vue方法)
- filter
- watch
2.5 方法命名
- method 自定义方法命名
动宾短语（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）
ajax 方法
以 get、post 开头，以 data 结尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）事件方法
以 on 开头（onTypeChange、onUsernameInput）
init、refresh 单词除外
- 尽量使用常用单词开头
（set、get、open、close、jump）
- 驼峰命名
（good: getListData）（bad: get_list_data、getlistData）
2.6 data props 注意点
使用 data 里的变量时请先在 data 里面初始化
props 指定类型，也就是 type
props 改变父组件数据 基础类型用 $emit ，复杂类型直接改
ajax 请求数据用上 isLoading、isError 变量，控制加载进度条
不命名多余数据
例如 现在是详情页、你的数据是 ajax 请求的，那就直接声明一个对象叫 data，而不是每个字段都声明
2.7 生命周期方法注意点
- 不在 mounted、created 之类的方法写逻辑，取 ajax 数据，
- 在 created 里面监听 Bus 事件
2.8 实例
2.8.1 文件命名
src
assets
...
components
...
views
car
CarEdit.vue
CarList.vue
CarDetai.vue
user
UserDetail.vue
UserEdit.vue
UserPasswordRest.vue
customer
CustomerCardItem.vue
CustomerList.vue2.8.2 vue文件
<template>
<div class="container">
<ul>
<li v-for="car in carList" :key="car.id">
<img src="car.logo" alt="">
<p>{{car.name | empty}}</p>
</li>
</ul>
<button @click="loadNextPage">下一页</button>
<div class="last" v-show="isLast">已经没有更多了...</div>
<div class="loading" v-show="isLoading">正在加载...</div>
<div class="error" v-show="isError" @click="getCarListData">加载错误，点击 <span class="font-blue">这里</span> 重试</div>
</div>
</template>
<script>
export default {
computed: {
// 是否是最后一条
isLast() {
return !this.isLoading && this.carList.length > 10 && !this.isError && this.page >= this.totalPage;
}
},
data() {
return {
carList: [],
// 总页数
totalPage: 1,
// 当前页数
page: 0,
// 是否正在加载
isLoading: false,
// 是否加载错误
isError: false
}
},
mounted() {
this.loadNextPage();
},
methods: {
// 获取列表数据
getCarListData() {
let data = {
page: this.page, // 当前页数
pageSize: 10 // 每页条数
}
this.isLoading = true;
this.isError = false;
this.$ajaxGet('/car/list', data).then(data => {
// 加载成功
this.carList.concat(data.list);
this.page = data.page;
this.totalPage = data.totalPage
this.isLoading = false;
}).catch(() => {
// 加载列表失败
this.isLoading = false;
this.isError = true;
});
},
// 下一页
loadNextPage() {
if(this.page <= this.totalPage) {
this.page ++;
this.getCarListData();
}
}
},
filters: {
empty(value) {
return value || '未知';
}
}
}
</script>2.9 组件文档
在编写组件时我们需要会编写组件的属性，发布的事件，或者控件的返回的数据类型。
- 控件的属性都需要进行说明，如果参数是JSON格式的数据，需要进行说明。
- 控件发布的事件，事件参数进行说明
- 控件的返回数据需要给出结构及说明。
