vue 開發命名規範

views 命名

views 文件夾下面是由 以頁面爲單位的 vue 文件 或者 模塊文件夾 組成的，放在 src 目錄之下，與 components、assets 同級。

views 下的文件夾命名

1. views 下面的文件夾表明着模塊的名字

2. 由名詞組成（car、order、cart）

3. 單詞只能有一個（good: car order cart）（bad: carInfo carpage）

4. 儘可能是名詞（good: car）（bad: greet good）

5. 以小寫開頭（good: car）（bad: Car）

views 下的 vue 文件命名

1. views 下面的 vue 文件表明着頁面的名字

2. 放在模塊文件夾之下

3. 只有一個文件的狀況下不會出現文件夾，而是直接放在 views 目錄下面，如 Login Home

4. 儘可能是名詞

5. 大寫開頭，開頭的單詞就是所屬模塊名字（CarDetail、CarEdit、CarList）

6. 名字至少兩個單詞（good: CarDetail）（bad: Car）

7. 經常使用結尾單詞有（Detail、Edit、List、Info、Report）

8. 以 Item 結尾的表明着組件（CarListItem、CarInfoItem）

vue 方法命名

vue 方法放置順序

1. components

2. props

3. data

4. created

5. mounted

6. activited

7. update

8. beforeRouteUpdate

9. metods

10. filter

11. computed

12. watch

method 自定義方法命名

1. 動賓短語（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）

2. ajax 方法以 get、post 開頭，以 data 結尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）

3. 事件方法以 on 開頭（onTypeChange、onUsernameInput）

4. init、refresh 單詞除外

5. 儘可能使用經常使用單詞開頭（set、get、open、close、jump）

6. 駝峯命名（good: getListData）（bad: get_list_data、getlistData）

data props 方法注意點

1. 使用 data 裏的變量時請先在 data 裏面初始化

2. props 指定類型，也就是 type

3. props 改變父組件數據 基礎類型用 $emit ，複雜類型直接改

4. ajax 請求數據用上 isLoading、isError 變量

5. 不命名多餘數據，如今是詳情頁、你的數據是 ajax 請求的，那就直接聲明一個對象叫 d，而不是每一個字段都聲明

6. 表單數據請包裹一層 form

生命週期方法注意點

1. 不在 mounted、created 之類的方法寫邏輯，取 ajax 數據，

2. 在 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;
            }
        }
    }
</script>