views 命名
views 文件夹下面是由 以页面为单位的 vue 文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components、assets 同级。
views 下的文件夹命名
-
views 下面的文件夹代表着模块的名字
-
由名词组成(car、order、cart)
-
单词只能有一个(good: car order cart)(bad: carInfo carpage)
-
尽量是名词(good: car)(bad: greet good)
-
以小写开头(good: car)(bad: Car)
views 下的 vue 文件命名
-
views 下面的 vue 文件代表着页面的名字
-
放在模块文件夹之下
-
只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 Login Home
-
尽量是名词
-
大写开头,开头的单词就是所属模块名字(CarDetail、CarEdit、CarList)
-
名字至少两个单词(good: CarDetail)(bad: Car)
-
常用结尾单词有(Detail、Edit、List、Info、Report)
-
以 Item 结尾的代表着组件(CarListItem、CarInfoItem)
vue 方法命名
vue 方法放置顺序
-
components
-
props
-
data
-
created
-
mounted
-
activited
-
update
-
beforeRouteUpdate
-
metods
-
filter
-
computed
-
watch
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)
data props 方法注意点
-
使用 data 里的变量时请先在 data 里面初始化
-
props 指定类型,也就是 type
-
props 改变父组件数据 基础类型用 $emit ,复杂类型直接改
-
ajax 请求数据用上 isLoading、isError 变量
-
不命名多余数据,现在是详情页、你的数据是 ajax 请求的,那就直接声明一个对象叫 d,而不是每个字段都声明
-
表单数据请包裹一层 form
生命周期方法注意点
-
不在 mounted、created 之类的方法写逻辑,取 ajax 数据,
-
在 created 里面监听 Bus 事件
例
文件路径
src
assets
components
views
car
CarEdit.vue
CarList.vue
CarDetai.vue
user
UserDetail.vue
UserEdit.vue
UserPasswordRest.vue
customer
CustomerCardItem.vue
CustomerList.vue
日常列表页
CarList.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 {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 || '未知'; } }, computed: { // 是否是最后一条 isLast() { return !this.isLoading && this.carList.length > 10 && !this.isError && this.page >= this.totalPage } }