vue Development Naming Specification

1. Naming views

Following the views folder is a vue file or module folder in page units, placed under the src directory and at the same level as components and assets.

1. Folder Name under views Folder under views represents the name of the module
2. Consisting of nouns (car, order, cart)
3. There can only be one (good: car order cart) (bad: carInfo carpage)
4. Try to be a noun (good: car) (bad: greet good)
5. Begin with lowercase (good: car) (bad: Car)

2. Naming of vue file under views

(1) The vue file under views represents the name of the page placed under the module folder

(2) Folders do not appear when there is only one file, but are placed directly under the views directory, such as Login Home

(3) Try to be a noun

(4) Capitalization begins with the name of the module (CarDetail, CarEdit, CarList)

Name at least two words (good: CarDetail) (bad: Car)

Common end words are (Detail, Edit, List, Info, Report)

Represents components ending with Item (CarListItem, CarInfoItem)

3. vue method naming

vue method placement order
components

props

data

created

mounted

activited

update

beforeRouteUpdate

metods

filter

computed

watch

Method custom method naming
Verb-object phrases (good:jumpPage, openCarInfoDialog) (bad:go, nextPage, show, open, login)

The ajax method begins with get, post, and ends with data (good:getListData, postFormData) (bad:takeData, confirmData, getList, postForm)

Event methods start with on (onTypeChange, onUsernameInput)

Except init, refresh words

Try to start with common words (set, get, open, close, jump)

Camel Naming (good: getListData) (bad: get_list_data, getlistData)

Notes on data props method
Initialize in data first when using variables in data

props specify the type, that is, type

props change parent component data base type with $emit, complex type directly

ajax requests data using isLoading, isError variables

Do not name extra data. Now that the details page and your data are requested by ajax, declare an object named d instead of every field

Please wrap a layer of form data

Lifecycle approach considerations
Instead of writing logic in mounted, created, and so on, fetch the ajax data.

Listen for Bus events in created.

Example:

File Path

src
    assets
        ...
    components
        ...
    views
        car
            CarEdit.vue
            CarList.vue
            CarDetai.vue
        user
            UserDetail.vue
            UserEdit.vue
            UserPasswordRest.vue
        customer
            CustomerCardItem.vue
            CustomerList.vue

Daily List Page
// 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">next page</button>
        <div class="last" v-show="isLast">There is no more...</div>
        <div class="loading" v-show="isLoading">Loading...</div>
        <div class="error" v-show="isError" @click="getCarListData">Load error, Click <span class="font-blue">Here</span> retry</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                carList: [],
                totalPage: 1, // PageCount
                page: 0, // page
                isLoading: false, // Is Loading
                isError: false // Whether to load errors
            }
        },
        mounted() {
            this.loadNextPage();
        },
        methods: {
            // Get List Data
            getCarListData() {
                let data = {
                    page: this.page, // page
                    pageSize: 10 // Number of bars per page 
                }

                this.isLoading = true;
                this.isError = false;
                this.$ajaxGet('/car/list', data).then(data => {
                    // Loading succeeded
                    this.carList.concat(data.list);
                    this.page = data.page;
                    this.totalPage = data.totalPage
                    
                    this.isLoading = false;
                }).catch(() => {
                     //  Failed to load list
                    this.isLoading = false;
                    this.isError = true;
                });
            },
            // next page
            loadNextPage() {
                if(this.page <= this.totalPage) {
                    this.page ++;
                    this.getCarListData();
                }
            }
        },
        filters: {
            empty(value) {
                return value || 'Unknown';
            }
        },
        computed: {
            // Is it the last one
            isLast() {
                return !this.isLoading && this.carList.length > 10 && !this.isError && this.page >= this.totalPage;
            }
        }
    }
</script>