vue開發規範

1、簡介

　　團隊合做中規範文檔是必須的，在多人合做的項目只有定義好必定的編碼規範纔會使得開發井井有序，代碼一目瞭然，下邊將談一下我的對vue使用規範的一些見解。

2、規範案例

1.組件命名

　　組件文件名應該始終以單詞大寫開頭（PascalCase），組件名也是以單詞大寫開頭，當多個單詞拼寫成的組件時，單詞開頭大寫，採用駝峯式命名規則。通常是多個單詞全拼，減小簡寫的狀況，這樣增長可讀性。組件應該都放到components文件夾下，單個頁面獨立一個文件夾，用來放相對應的vue文件以及頁面相關的樣式文件，樣式少可直接寫到頁面組件裏邊，這樣更符合組件化的思想。文件夾名稱應統一格式，小寫開頭，統一以page結尾，好比homePage，loginPage，listPage這樣子的命名。公用組件應該統一放到public文件下，下邊是例子：

　　公共的樣式文件應該抽取放到統一的文件去統一管理。

2.基礎組件命名

　　2.1當項目中須要自定義比較多的基礎組件的時候，好比一些button，input，icon，建議以一個統一的單詞Base開頭，或者放到base文件夾統一管理，這樣作的目的是爲了方便查找。例如：

　　2.2頁面級組件應該放到相對應頁面文件夾下，好比一些組件只有這個頁面用到，其餘地方沒有用到的，能夠直接放到頁面文件夾，而後以父組件開發命名，例如：

　　2.3項目級組件通常放到公共文件夾public下給全部的頁面使用。

3.組件結構

　　組件結構一個遵循從上往下是template，script，style的結構

<template>
    <div></div>
</template>

<script>
</script>

<style>
</style>

4.組件樣式

　　單個組件樣式通常可直接寫到組件下style標籤下，爲了防止樣式污染，可添加scoped 屬性，也能夠經過設置做用域來防止樣式污染，寫樣式的時候儘可能少寫元素選擇器，爲了提升代碼查找速度，能夠用類選擇器。

<template>
    <div class="homePage">
        <div class="list"></div>
        <div class="banner"></div>
    </div>
</template>

<script>
</script>

<style lang="scss" scoped>
    .homePage{
        .list{
            
        }
        .banner{
            
        }
    }
</style>

5.多屬性編寫格式

　　當組件定義不少的props值時，應該每一個特性屬性一行。

<SelectExportItem
       v-bind="$attrs"
       :selectItemList="selectItemList"
       @hideSelectItem="$emit('hideSelectItem')"
       @exportReport="exportReport"
></SelectExportItem>

6.props定義

　　當定義組件時，應該對傳入組件的props進行嚴格的定義，至少指定類型，設定默認值，定義好規範方便他人使用。

props:{
        modelflag:{
            type:Number,
            default:0
        }
}

7.位v-for 增長鍵值Key，這樣加快查找速度。

<ul>
    <li
        v-for="todo in todos"
        :key="todo.id"
    >
        {{ todo.text }}
    </li>
</ul>

8.當頁面用到一些共享的狀態的時，建議使用vuex

9.vue推薦使用axios進行接口請求，而後對項目中作統一的接口攔截處理，封裝適合項目使用的get，post 方法。

import Vue from 'vue'
import axios from 'axios'
import { encode, decode,toEncode,toDecode} from './base64.js'
import Qs from 'qs';
import router from './router'

let timeout = 30000;
var instance = axios.create({
    //baseURL: 'https://some-domain.com/api/',
    timeout: timeout,
    responseType: 'json', // default,
    //headers: {'apikey': 'foobar'},
    transformRequest: function(data, headers) {
        //     爲了不qs格式化時對內層對象的格式化先把內層的對象轉爲
        //     因爲使用的form-data傳數據因此要格式化
        if(!(data instanceof FormData)) {
            if (typeof data === "string") {
                headers.post['Content-Type'] = "application/json";
            } else {
                headers.post['Content-Type'] = "application/x-www-form-urlencoded";
                for(let key in data) {
                    if(data[key] === undefined) {
                        data[key] = null;
                    }
                }
                data = Qs.stringify(data);
            }
        }
        return data;
    }
});

instance.interceptors.request.use(function(config) {
    // Do something before request is sent 

    //header 添加Request-Token
    
    
    //配置請求頭tocken
    

    //配置get請求
    
    return config;
}, function(error) {
    // Do something with request error 

    return Promise.reject(error);
})
// Add a response interceptor 
instance.interceptors.response.use(function(response) {
    // Do something with response data 
    
    if (response.data.status===400001) { //access tocken過時30天
        vm.$router.push({path:'/login'})
    }
    return response;
}, function(error) {
    // Do something with response error 
    
    return Promise.reject(error);
});

export default instance;

10.後續繼續完善。。。