Vue項目開發最新、最全代碼規範文檔
1、 目錄結構
|— build 構建腳本目錄 |— build.js 生產環境構建（編譯打包）腳本 |— check-versions.js 版本驗證工具 |— utils.js 構建相關工具方法（主要用來處理css類文件的loader） |— vue-loader.conf.js 處理vue中的樣式 |— webpack.base.conf.js webpack基礎配置 |— webpack.dev.conf.js webpack開發環境配置 |— webapck.prod.conf.js webpack生產環境配置 |— config 項目配置 |— dev.env.js 開發環境變量 |— index.js 主配置文件 |— prod.env.js 生產環境變量 |— test.env.js 測試環境變量 |— node_modules 項目依賴模塊 |— mock mock數據目錄，用於本地數據模擬 |— src 項目源碼目錄 |— assets 資源目錄，資源會被webpack構建 |— js 公共js文件目錄 |— css 公共樣式文件目錄 |— images 圖片存放目錄 |— components 公共組件目錄 |— common |— network 存放項目的網絡模塊，接口 |— tools 本身封裝的一些工具 |— App.vue 根組件 |— main.js 入口js文件 |— routers 前端路由目錄 |— index.js |— pages 前端頁面文件 |— store 應用級數據管理 |— index.js 組裝模塊並導出，統一管理導出，也可命名爲store.js |— state.js 單一狀態樹，定義應用數據結構及初始化狀態 |— getters.js 獲取state中的狀態，僅單向獲取數據，不作任何修改 |— actions.js 調用mutation方法對數據進行操做 |— mutation-types.js 存放vuex經常使用的變量 |— mutations.js 定義state數據的修改操做 |— static 純靜態資源，不會被webpack構建，eg:沒有npm包模塊 |— test 測試 |— unit 單元測試 |— e2e e2e測試 |— .babelrc babel的配置文件 |— .editorconfig 編輯器的配置文件 |— .gitignore git的忽略配置文件 |— .postcssrc.js postcss的配置文件 |— index.html html模板，入口頁面 |— package.json npm包配置文件，依賴包信息 |— README.md 項目介紹
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
2、 UI框架選擇
- PC端Vue項目UI框架優先選擇：Element UI、iView
- 移動端Vue項目UI框架：mint-ui（優先）
3、 CSS預處理器選擇
- Stylus
- 選擇緣由：Stylus是來源於Node.js社區，與js關係密切，富於表現力、動態的、健壯的 CSS、支持省略花括號、支持省略分號，靈活、整潔。
4、 文件夾、組件命名規範，組件結構規範
- 文件夾：
文件夾名稱應統一格式，小寫開頭，見名思意，page頁面下的文件夾名稱統一以page結尾，例如：homePage,loginPage。其他文件夾名稱統一按照項目結構目錄命名規範統一命名。 - 組件：
組件名以單詞大寫開頭，當多個單詞拼寫成的組件時，採用駝峯式命名規則。通常是多個單詞全拼，減小簡寫的狀況，這樣增長可讀性。
組件應該都放到components文件夾下，單個頁面獨立一個文件夾，用來放相對應的vue文件以及頁面相關的樣式文件，樣式少可直接寫到頁面組件裏邊，這樣更符合組件化的思想。
公用組件應該統一放到public文件下。 - 基礎組件：
當項目中須要自定義比較多的基礎組件的時候，好比一些button，input，icon，建議以一個統一的單詞Base開頭，或者放到base文件夾統一管理，這樣作的目的是爲了方便查找。
頁面級組件應該放到相對應頁面文件夾下，好比一些組件只有這個頁面用到，其餘地方沒有用到的，能夠直接放到頁面文件夾，而後以父組件開頭命名，例如：HomeHeader.vue,HomeNav.vue。
項目級組件通常放到公共文件夾public下給全部的頁面使用。 - 組件結構：
組件結構遵循從上往下template，script，style的結構。
5、 組件樣式
單個組件樣式通常可直接寫到組件下style標籤下，爲了防止樣式污染，可添加scoped 屬性，也能夠經過設置做用域來防止樣式污染，寫樣式的時候儘可能少寫元素選擇器，爲了提升代碼查找速度，能夠用類選擇器。css
6、 文件格式
- UTF-8格式
7、 Template模板文件
- 儘可能使用以.vue結束的單文件組件，方便管理，結構清晰。
- 標籤語義化，避免清一色的div元素
- 樣式class的命名：統一以小寫字母開頭，小寫字母、下劃線和數字組成。命名中儘可能避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合。不建議使用駝峯法命名class屬性。使用下劃線的目的是爲了和第三方庫中的命名衝突。例如：xx_left,xx_line。
- 多特性，分行寫，提升可讀性。即一個標籤內有多個屬性，屬性分行寫。
- 自定義標籤：使用自閉標籤的寫法。例如：，若是自定義標籤中間須要傳入slot，則寫開始標籤和結束標籤，結束標籤必須加/。
- 組件/實例選項中的空行。便於閱讀和代碼架構清晰。
8、 Script
在 script 標籤中，你應該遵照 Js 的規範和ES6規範。html
- 組件名稱：必須以大寫字母開頭駝峯法命名。
- Data必須是一個函數。
- Props定義：提供默認值，使用type屬性校驗類型，使用props以前先檢查prop是否存在
- 調試信息 console.log() debugger使用完及時刪除。
- 爲v-for設置Key值。
- 使用計算 規避v-if和v-for用在一塊兒。
- 無特殊狀況不容許使用原生API操做dom,謹慎使用this.$refs直接操做dom。
- 使用ES6風格編碼源碼,定義變量使用let,定義常量使用const,使用export,import模塊化。
- 指令縮寫：都用指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:)。
- 使用 data 裏的變量時請先在 data 裏面初始化。
- 函數中統一使用_this=this來解決全局指向問題。
- 能用單引號不用雙引號。
- 儘可能使用===。
- 聲明變量必須賦值。
9、 Style
- 使用 scoped關鍵字，約束樣式生效的範圍。
- 避免使用標籤選擇器（效率低、損耗性能）。
- 非特殊狀況下，禁止使用 ID 選擇器定義樣式。有 JS 邏輯的狀況除外。
- CSS 屬性書寫順序：先決定定位寬高顯示大小，再作局部細節修飾！推薦順序：定位屬性(或顯示屬性，display)->寬高屬性->邊距屬性(margin, padding)->字體，背景，顏色等，修飾屬性的定義。
10、 註釋規範
注意在註釋的先後各有一個空格。前端
- HTML註釋：
- CSS註釋：/* write your HTML comment! */
- Stylus註釋：
a) 單行註釋：// 我是less註釋，和js的單行註釋同樣，在css中不輸出
b) 多行註釋
在這裏插入代碼片vue
/*
* less的多行註釋，只有在compress選項未啓用的時候
* 纔會被輸出
*/
- 1
- 2
- 3
- 4
c) 多行緩衝註釋：node
/*！ * less的多行緩存註釋, Stylu壓縮的時候這段代碼無視 */
- 1
- 2
- 3
- JS註釋：
a) 行級註釋（注意//後面空格）：// 正確的註釋
b) 變量聲明註釋：若是是在相似 Vue 項目的 data 屬性中的變量，直接用行級樣式跟在後面。
例如：rightExample: ‘yes’, // 註釋直接寫這裏
c) 若是是在類，構造函數，或者常量定義中的變量，使用塊級註釋。
例如：
/*
* 錯誤碼常亮定義
* @type {number}
*/
- 1
- 2
- 3
- 4
d) 函數聲明註釋：沒必要要在每個函數都寫註釋，可是在公共函數，仍是建議補全註釋，讓後面的人不須要重複早輪子。
e) 複雜的業務邏輯處理說明、特殊狀況的代碼處理說明，對於特殊用途的變量、存在臨界值、使用了某種算法思路進行註釋說明webpack
11、 資源路徑的配置、引入規則
- 路徑配置
在build/webpack.base.conf.js文件中配置。
alias: {
‘@’: resolve(‘src’), // 默認配置，設置src目錄別名
‘childRouter’: resolve(‘src/pages/menuRouter’), // 子路由路徑配置
‘#’: resolve(‘src/assets’) // 配置assets文件夾路徑
} - 路徑導入
a) Js文件中導入實例：
導入node_modules模塊中的文件，直接引入便可，不須要加文件後綴名。
導入自定義文件的時候，使用相對路徑或者使用路徑配置別名，不準要加文件後綴名。
導入node_modules模塊：import Vue from ‘vue’
導入自定義文件：
import router from ‘./router’
import scrollConfig from ‘#/js/vuescroll.config’
b) css或者stylus樣式導入須要使用 ~@ 開頭
@import ‘~common/stylus/variable’
12、 數據中心
- 各個文件的命名根據上面的項目結構命名。
- 應用層級的狀態應該集中到單個 store 對象中。
- action和mutation中的函數統一聲明在mutation-type.js內。
- mutation-types裏面的常量、常量值所有用大寫+英文單詞配合下劃線的形式：例如：export const UPDATE_USERINFO = 「UPDATE_USERINFO」。
- 提交 mutation 是更改狀態的惟一方法，而且這個過程是同步的。
- 異步邏輯都應該封裝到 action 裏面。
- vuex 的dispatch和commit提交mutation的區別：dispatch=>actions用來觸發異步操做，commit=>mutation用來觸發同步操做的方法。當操做行爲中含有異步操做，好比向後臺發送請求獲取數據，就須要使用action的dispatch去完成，其餘使用commit便可。
十3、 路由
- 路由至少包含三個選項：path、name、component。path統一小寫；name對應於組件中的name，大寫開頭駝峯；component組件名稱大寫開頭的組件駝峯。
- 一級路由統一使用相對路徑的形式。二級路由能夠配置，配置見資源路徑的配置、引入規則。
十4、 axios
- 根據須要配置post、get請求，一個是取一個是貼，只須要讀取文件，put（PUT 往服務器上上傳文件）、delect（刪除）直接對數據進行操做相對不安全 。
- axios的掛載：Vue.prototype.$http = axios;
- axios使用封裝後的get/post請求。
- ajax的判斷
首先 ajax 請求能夠寫在 actions也能夠直接寫在 .vue 頁面裏。
咱們判斷的依據是回調是否須要調用頁面結構來區分,
好比在.vue頁面中發送完請求後須要調用 this.$refs.element等,或者須要利用組件的獨立性的效果時 後，那就寫在.vue頁面,不然就寫在 actions 裏。
十5、 api管理
- 新建src/ network/api.js
放置api路徑，要注意 axios已經有了前綴,因此這裏的 api 值須要寫前綴以後的路徑。當路徑較多時能夠再多建幾個文件,分類放置。
例如：
// 統一管理接口
export default {
manage: {
fertilizerStation: '/api/AllFertSiteNameList', // 獲取列表
userLogin: '/api/Login' // 用戶登陸
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 掛載
在main.js中引入：import api from ‘./request/api’。
使用Vue.prototype.api = api掛載到原型鏈上便可到處使用。
十6、 依賴規範
- 在package.json裏增長包依賴
「dependencies」: {
"axios": "^0.18.0"
}
- 1
- 2
- 3
十7、 Web字體規範
- 優先使用框架中的字體圖標，好比element ui中的
- 使用iconfont字體圖標代替圖片
- 在規範中包括的字體格式有：
woff: WOFF (Web Open Font 格式)
ttf: TrueType
ttf, otf: OpenType
eot: 嵌入式 OpenType
svg, svgz: SVG 字體 - 字體規則a) 爲了防止文件合併及編碼轉換時形成問題，建議將樣式中文字體名字改爲對應的英文名字，如：黑體(SimHei)、宋體(SimSun)、微軟雅黑(Microsoft Yahei)。b) 字體粗細採用具體數值，粗體bold寫成700，正常normal寫成400。c) font-size必須以px爲單位。爲了對font-family取值進行統一，更好的支持各個操做系統上各個瀏覽器的兼容性，font-family不容許在業務代碼中隨意設置。