技術(shù)棧

• vue2
• vuex
• vue-router
• webpack
• ES6/7
• axios
• less/sass
• vue-i18n
• 等...

src目錄布局

├── src
│   ├── assets
│   │   ├── image                               // 公共圖片
│   │   ├── style                               // 公共樣式
│   ├── components                              // 存放公共組件
│   │   ├── button                              // 公共按鈕組件
│   │   ├── footer                              // 公共底部組件
│   │   └── header                              // 公共頭部組件
│   ├── config                                  // 存放基本配置
│   ├── page                                    // 存放業(yè)務(wù)組件，內(nèi)部按模塊進(jìn)行區(qū)分，如下：
│   │   ├── shop                                // 商店組件
│   │   │   ├── children                        // 只在該模塊用到的一些公共組件
│   │   │   │   ├── foodDetail.vue 
│   │   │   │   └── shopDetail.vue 
│   │   │   └── shop.vue                        // 該模塊入口文件
│   ├── plugins                                 // 存放引用的插件
│   ├── router
│   │   └── router.js                           // 路由配置
│   ├── service                                 // api接口統(tǒng)一管理
│   ├── store                                   // vuex的狀態(tài)管理
│   │   ├── action                              // 配置actions
│   │   ├── getters                             // 配置getters
│   │   ├── index.js                            // 引用vuex，創(chuàng)建store
│   │   ├── mutationTypes                       // 定義常量muations名
│   │   └── mutations                           // 配置mutations
│   ├── App.vue                                 // 頁面入口文件
│   ├── main.js                                 // 程序入口文件，加載各種公共組件

組件

1. 組件元素順序保持一致，<template>、<script>、 <style>，內(nèi)部樣式必須加scoped

<template>
  <div>
    <!-- ... -->
  </div>
</template>
<script>
  export default {
    components : {},
    data () {
      return {}
    },
    methods: {},
    mounted() {}
 }
</script>
<!--聲明語言，并且添加scoped-->
<style lang="less" scoped>
</style>

2. vue文件方法聲明順序

- components   
- props    
- data     
- computed
- created
- mounted
- activited
- update
- beforeRouteUpdate
- metods   
- filter
- watch

3. props規(guī)范

1. 傳值盡量簡(jiǎn)化，每一個(gè)屬性單獨(dú)使用一個(gè) props，避免復(fù)雜的對(duì)象。使組件的API更加直觀
2. 驗(yàn)證組件的 props，保證組件的 props 能應(yīng)對(duì)不同的情況，即使其他開發(fā)者并未按照你預(yù)想的方法使用時(shí)也不會(huì)出錯(cuò)。

• prop 的定義應(yīng)該盡量詳細(xì)，至少需要指定其類型。

  data () {
    return {
      height:{
          type: Number, 
          default: 0,
          required: true,
          validator: function (value) {
              return value >= 0
          }
      },
    }
  },
  

• 使用 props 之前先檢查該 prop 是否存在

4.公共組件必須保證是獨(dú)立的, 可復(fù)用的，拒絕定制代碼。要寫組件使用說明。

<!--
  /**
  * 組件名稱
  * @desc 組件描述
  * @author 組件作者
  * @param {Number} [age]    - 參數(shù)說明
  * @param {String} [name] - 參數(shù)說明
  * @example 調(diào)用示例
  *  <person :age="age" :columns="columns" :name="name"></person>
  */
   -->
   
   //使用的時(shí)候，屬性比較多的話分行寫
   <inputFiled 
        type="number" 
        :placeholder="$t('login.please_inout_usual_phone_number')" 
        iconClass="icon-ico_shoujihao"
        max="11" 
    />
    

5. 組件的每一個(gè)方法都要寫注釋

• 普通方法使用單行注釋

   // 說明該方法主要作用
  

• 復(fù)雜方法使用多行注釋

   /**
    * @desc 說明該方法主要作用
    * @param {Number} [age]    - 參數(shù)說明
    * @param {String} [name] - 參數(shù)說明
    */
  

6. 不要在 mounted、created 之類的方法寫邏輯。

7. 盡量使用Vue的指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:)

8. css盡量使用類選擇器，元素選擇器比較慢

9. 使用Vuex 管理全局狀態(tài)

10. 子組件內(nèi)不要使用this.$parent直接訪問父組件的上下文。訪問組件之外的上下文違反了基于模塊開發(fā)的第一原則。組件必須相互保持獨(dú)立。

1、通過 props 將值傳遞給子組件
2、通過 props 傳遞回調(diào)函數(shù)給子組件來達(dá)到調(diào)用父組件方法的目的
3、通過在子組件觸發(fā)事件來通知父組件

11. 盡量避免使用 this.$refs來訪問其它組件的上下文。

12. 組件內(nèi)不要使用復(fù)雜的行內(nèi)表達(dá)式，可以使用 method 或是 computed 屬性來替代其功能。復(fù)雜的行內(nèi)表達(dá)式難以閱讀，也不能復(fù)用。

13. v-if 和 v-for，v-for的優(yōu)先級(jí)高于v-if。

• 兩種常見的情況：

  1、為了過濾一個(gè)列表中的項(xiàng)目 (比如v-for="item in dataList" v-if="item.isComplete")。
  如果dataList是一個(gè)較為龐大的數(shù)組，請(qǐng)將 dataList 替換為一個(gè)計(jì)算屬性 (比如 completeList)，讓其返回過濾后的列表。

  2、隱藏整個(gè)列表，(比如v-for="item in dataList" v-if="shouldShowList")。
  這種情形下，請(qǐng)將 v-if 移動(dòng)至容器元素上。

router-路由

1. 使用懶加載

const Home = () => import('./Home.vue')

const router = new VueRouter({
  routes: [
    { 
        path: '/home', 
        name: 'home', 
        component: Home
    }
  ]
})

2. 路由都添加 name 字段，路由跳轉(zhuǎn)統(tǒng)一使用 name 進(jìn)行跳轉(zhuǎn)，方便管理

• 組件跳轉(zhuǎn)

  <router-link :to="{ name: 'home' }">Home</router-link>
  

• 方法跳轉(zhuǎn)

  this.$router.push({ name: 'home' })
  

vuex

1. 兩種模式，一種按業(yè)務(wù)模塊劃分，一種按store的屬性劃分

• 按業(yè)務(wù)模塊劃分（業(yè)務(wù)邏輯比較復(fù)雜）

  const modelA = {
      state: {...},
      mutations: {...},
      actions: {...},
      getters: {...},
  }
  const modelB = {
      state: {...},
      mutations: {...},
      actions: {...},
      getters: {...},
  }
  

• 按store的屬性劃分（業(yè)務(wù)邏輯比較簡(jiǎn)單）

  ├── state.js
  ├── mutations.js
  ├── mutation-types.js
  ├── actions.js
  ├── getters.js
  

2. 組件內(nèi)的使用

• 組件內(nèi)使用state統(tǒng)一用mapState

  computed:{
      ...mapState({
          //使用this.countAlias
          countAlias: 'count',
      }),
      ...mapState([
          //使用this.count
          'count'
      ])
  } 
  

• 組件內(nèi)使用getter統(tǒng)一用mapGetters

  computed:{
      ...mapGetters({
          //使用this.doneCount
          doneCount: 'doneTodosCount'
      }),
      ...mapGetters([
          //使用this.doneTodosCount
          doneTodosCount
      ])
  }
  

• 組件內(nèi)使用mutation統(tǒng)一用mapMutations

  methods: {
      ...mapMutations([
          // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
          'increment', 
  
          // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
          'incrementBy' 
      ]),
      ...mapMutations({
          // 將 `this.add()` 映射為 `this.$store.commit('increment')`
          add: 'increment' 
      })
    }