mpvue + iview 專案分包優化

為了增加開發效率，小程式選用了 mpvue 作為框架配合 iview 小程式端的 UI 庫進行開發。起初是使用 cli 中官方的腳手架進行開發，但是有一些缺點。 首先，目錄結構不是特別的方便。每建立一個頁面，要在一個資料夾下分別建立 index.vue 和 main.js。然後，官方的腳手架是不支援小程式分包的。所以引入 mpvue-entry 用來統一頁面配置到 page.js，同時也讓 mpvue 支援了分包。作者整合了一個 mpvue-quickstart 能夠直接使用。

以下為相關網址：

mpvue：http://mpvue.com/

mpvue-quickstart：https://github.com/F-loat/mpvue-quickstart

mpvue-entry：https://github.com/F-loat/mpvue-entry

iview：https://weapp.iviewui.com/

mpvue 相關外掛彙總：https://github.com/mpvue/awesome-mpvue

##Tips： ###1.使用 mpvue-entry 後帶來的一些配置問題 1）所有頁面都集中到 page.js 中進行配置，如果想要配置首頁~“首頁預設為 pages.js 中的第一項，但會被 main.js 中的配置覆蓋（你可以把你的首頁寫在 main.js 的 pages 的相關配置中）”同時支援新增頁面的熱更新，省去了重新 start 的步驟。 PS: 寫一些東西前還是要好好讀讀文件，遇到問題先看文件。不要養成張嘴就問的習慣哈（說給自己聽）

2）引入後可以很方便的配置這個頁面是否需要分包、是否需要編譯。 分包的時候需要注意一些問題。tab 相關的頁面是必須放在主包中的，分包的目錄需要跟 pages 資料夾同級，分包後跳轉時儘量使用絕對路徑防止相關頁面無法找到。如下圖，就會生成三個包：pages、packageA 和 packageB。 關於 mpvue 如何實現分包：https://github.com/Meituan-Dianping/mpvue/issues/590

###2.關於 iview 的引入 在分包之前因為對專案大小的限制，我只把需要的檔案引入到靜態資料夾中，然後在個頁面的相關配置中引入使用就可以了。（小程式更新後最大支援8M，頁面路徑最多能夠十層）

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

export default {
  config: {
    navigationBarTitleText: '編輯標籤',
    navigationBarTextStyle: 'white',
    navigationBarBackgroundColor: '#4F87E4',
    usingComponents: {
      'i-tag': '/static/iview/tag/index',
      'i-toast': '/static/iview/toast/index'
    }
  }
}
複製程式碼

當時為了使用方便把 toast 的方法掛在了 vue 下，但是在設定分包後一下程式碼出現了問題。 分包前：

const { $Toast } = require('../static/iview/base/index')
Vue.prototype.$Toast = $Toast
複製程式碼

分包後：

const { $Toast } = require('../static/iview/base/index.js') // app-only
Vue.prototype.$Toast = $Toast // app-only
複製程式碼

以上能夠看到在程式碼後加了一段註釋 app-only。用來指定 main.js 中特有的程式碼（文件也有寫過...當時沒理解）