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 中特有的代碼（文檔也有寫過...當時沒理解）