最近工作中使用到了mpvue框架搭建小程序，由於mpvue是基於vue.js的框架，所以上手也很簡單，但是還有一些地方用起來不順手。

初始化一個 mpvue 項目

按照官網提供的步驟執行下去就可以了

# 1. 先檢查下 Node.js 是否安裝成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由於眾所周知的原因，可以考慮切換源為 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安裝 vue-cli
# 一般是要 sudo 權限的
$ npm install --global vue-cli@2.9

# 4. 創建一個基於 mpvue-quickstart 模板的新項目
# 新手一路回車選擇默認就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

將服務跑起來之後開始寫業務，一開始寫的很順暢，但是當我新建一個page頁面就卡殼了，我發現在pages裏面添加一個vue文件+app.json裏面配置路徑這個原生小程序的配置路徑的方式在mpvue裏面不成立，必須要在頁面文件夾裏創建一個main.js，它的作用就是 打包入口，完成 vue 的實例化

import Vue from 'vue';

import App from './index';

const app = new Vue(App);

app.$mount();

可是在實際項目中如果每個頁面都要創建一個main.js，這個工作量繁瑣又多餘的，所以我查到了不需要創建main.js方法，這裏使用的是mpvue-entry插件，廢話不多説，直接貼代碼

先下載mpvue-entry
npm install mpvue-entry -s

找到build/webpack.base.conf.js文件

const MpvueEntry = require('mpvue-entry') // 引入mpvue-entry

接着找到紅框裏的代碼刪掉

我們到src文件夾新建一個 router.js 用於管理所有的路由

module.exports = [
  {
    path: '/pages/index/index',
    config: {
      navigationBarTitleText: '提現'
    }
  },
  {
    path: '/pages/cash_list/index',
    config: {
      navigationBarTitleText: '提現記錄'
    }
  }
]

然後再回到build/webpack.base.conf.js文件下使用MpvueEntry.getEntry的方法引入所有的路徑

最後找到plugins新增mpvue-entry這個插件

重新啓動服務後就不用創建main.js了，所有的路徑都在router.js裏面統一管理就行了。