vue開發規範

團隊合作中規範文件是必須的，在多人合作的專案只有定義好一定的編碼規範才會使得開發井井有序，**一目了然，下邊將談一下個人對vue使用規範的一些看法。

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的結構

單個元件樣式一般可直接寫到元件下style標籤下，為了防止樣式汙染，可新增scoped 屬性，也可以通過設定作用域來防止樣式汙染，寫樣式的時候盡量少寫元素選擇器，為了提高**查詢速度，可以用類選擇器。

當元件定義很多的props值時，應該每個特性屬性一行。

v-bind="$attrs":selectitemlist="selectitemlist"@hideselectitem="$emit('hideselectitem')"@exportreport="exportreport"

>

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

props:

}

9.vue推薦使用axios進行介面請求，然後對專案中做統一的介面攔截處理，封裝適合專案使用的get，post 方法。

import vue from 'vue'import axios from 'axios'import  from './base64.js'import qs from 'qs';

import router from './router'let timeout = 30000;
var instance =axios.create(,
transformrequest: function
(data, headers)  
else
}data =qs.stringify(data);}}
return
data;
}});instance.interceptors.request.use(
function
(config) , 
function
(error) )
//add a response interceptor 
instance.interceptors.response.use(function
(response) )
}return
response;
}, function
(error) );
export 
default instance;

VUE的開發規範

vue規範 一 資料夾結構化規範二 vue檔案基本結構 div template export default data methods mounted script lang less scoped style 三 注釋規範 1.公共元件使用說明 2.各元件中重要函式或者類說明 3.複雜的業務邏輯...

前端vue開發規範

1.建議使用vscode 可根據個人開發習慣進行選擇 2.vscode 使用外掛程式建議 3.使用統一縮排，以tab縮排，乙個tab大小為2個空格 1.變數名，檔名，元件名，檔名等遵循駝峰命名規則 多單詞拼接首字母小寫，如 userinfo productinfo 同時遵循語義化規則，能直觀明白意圖...

vue前端開發規範

建議使用統一開發工具vscode 使用統一縮排，以tab縮排 注釋規範主要是作者規範和函式規範。作者規範 author date 2020 06 01 11 58 32 lasteditors 函式規範 description author date 2020 06 08 10 57 39 para...