vue項目規范

一.核心目錄分工

1. 目錄結構
   1. │ index.html // 首頁入口頁面。可以配置一些meta信息或者統計代碼。
   2. │ package-lock.json // 記錄一次本地安裝的包版本的所有信息，包括版本號和依賴。本地安裝時，如果有該文件，會先按照該文件安裝npm包。
   3. │ package.json // 本地安裝時，項目所需要的npm包。
   4. │ README.md // 項目的說明文檔，markdown 格式
   5. ├─build // 編譯配置目錄。
   6. ├─config // 配置目錄。
   7. │ dev.env.js // 開發環境文件。
   8. │ index.js // 配置生產環境、開發環境、端口號等。
   9. │ prod.env.js // 生產環境文件。
   10. ├─node_modules // npm加載的項目依賴模塊，無需提交到git倉庫。
   11. └─src // 開發目錄
   12. │ App.vue // 項目入口文件。非必要不允許修改。
   13. │ main.js // 項目核心js文件。主要用於初始化vue實例以及引入一些全局組件。
   14. ├─api // 項目接口調用配置，非必要不允許修改。
   15. ├─assets // 項目靜態文件目錄。
   16. │ ├─css // 樣式文件。
   17. │ ├─images // 圖片。
   18. │ └─js
   19. ├─components // 頁面組件目錄。
   20. ├─config // 配置文件。環境配置+api配置+url配置+鍵盤事件配置。
   21. ├─pages // 頁面入口文件目錄。
   22. ├─router // 路由配置。
   23. ├─store // vuex配置。
   24. │ │ index.js // 配置文件，用來組裝模塊和導出store。
   25. │ └─modules // 模塊目錄。
   26. └─util // 存放公共js目錄。
2. pages&compnents目錄

• pages：頁面入口文件目錄，router目錄中引入的頁面路徑。該文件應盡量保持整潔易讀，遇到比較復雜的頁面，可以引入組件去寫。
• compnents：組件目錄。公共的組件可放在common文件夾中，其他的組件按照功能不同，分到不同的文件夾中。
• ps:文件命名統一使用駝峰形式。

二.順序規范

1. 組件/實例順序（列舉了項目中比較常用的組件/實例，詳細請看）
   1. {
   2. name: 'tradeDetail',
   3. /** 模板依賴 **/
   4. components: {},
   5. directives: {},
   6. /** 組合 **/
   7. mixins: [listMix],
   8. /** 接口 **/
   9. props: {},
   10. /** 本地狀態 **/
   11. data: {
   12. return {}
   13. },
   14. computed: {},
   15. /** 事件 **/
   16. watch: {},
   17. /** 生命周期 **/
   18. beforeCreate () {},
   19. created () {},
   20. beforeMount () {},
   21. mounted () {},
   22. beforeUpdate () {},
   23. updated () {},
   24. activated () {},
   25. deactivated () {},
   26. beforeDestroy () {},
   27. destroyed () {},
   28. /** 非響應式的屬性 **/
   29. methods: {}
   30. }
2. html標簽中元素特性/屬性順序
   1. <div
   2. class=""
   3. is=""
   4. v-for="(item, index) in list"
   5. v-if/v-else-if/v-else=""
   6. v-show=""
   7. v-cloak=""
   8. v-pre
   9. v-once
   10. id=""
   11. ref=""
   12. :key=""
   13. slot=""
   14. v-model=""
   15. 組件本身支持的特性/屬性
   16. v-on:click/submit=""
   17. v-html=""
   18. v-text=""
   19. >
   20. </div>

三.html代碼規范<template>

1. 屬性等號后面全統一使用雙引號，如果雙引號中有字符串拼接，就用單引號包字符串。例如 <el-dialog :title="'編輯優惠券' + title" :visible.sync="isShow">
2. 縮進2個空格。縮進沒有報錯，但是自己得注意縮進。
3. 所有運算符兩邊都要有空格，根據js的標准來。
4. v-show、v-if的使用。
   v-show：需要頻繁切換的使用。
   v-if：初始化渲染后不太會改變的。
   ps：v-show 不支持<template>元素，也不支持 v-else。在element-ui部分組件中也會失效。
5. v-for 一定要有鍵值 key。
6. v-for和v-if盡量避免在一個html標簽中使用。如果同時使用，v-for的優先級大於v-if。
7. 靜態資源引用使用絕對路徑，如:”~assets/xxx.png”，禁止使用相對路徑，如：”../../xx.png”。
8. 指令縮寫。組件中v-bind:value用:value代替；v-on:focus用@focus代替。

四.js代碼規范<script>

1. 字符串賦值統一使用單引號。
2. this復制統一使用 let that = this。
3. vue中變量定義聲明用let或const。
4. 臨時變量統一使用駝峰形式命名。

五.css規范<style>

1. 頁面中樣式盡量寫在<style scoped></style>中，避免引起多頁面樣式被覆蓋。
2. <style></style>中的樣式都需要加上父元素class，且這個父元素class在所有頁面中必須是唯一的。
3. 覆蓋餓了么組件樣式時,統一加上父元素class。

六.vue相關

1. 組件文件中必須包含name，name必須是由多個單詞組成，並且是駝峰形式。
2. 組件中的prop變量統一使用駝峰形式。
3. prop定義要盡量詳細。例如：
   1. propE: {
   2. type: Object,
   3. // 對象或數組默認值必須從一個工廠函數獲取
   4. default: function () {
   5. return { message: 'hello' }
   6. }
   7. }

七.vue-router

所有的vue項目，統一使用路由懶加載。例如：

1. {
2. path: '(dealer/)?trade/details/:id',
3. name: 'tradeDetail', // 訂單詳情
4. component (resolve) {
5. require(['@/pages/trade/Details.vue'], resolve)
6. }
7. }

八.關於靜態資源（圖片）的使用

1.img標簽中直接使用本地靜態圖片。

1. <img src="~assets/images/icon-payment-WeChat.png"/>

2.import或者require中引入本地靜態圖片。

1. import iconAalipay from '@/assets/images/icon-payment-Alipay.png'
2. data () {
3. return {
4. imgUrl: require('@/assets/images/icon-payment-Alipay.png')
5. }
6. }

3.樣式background中使用的本地靜態圖片。

1. background:url(~assets/images/icon-item-grid-selected.png)

FAQ

vue官網
vue條件渲染
vue風格指南
vue-router