mpvue是美團團隊開發的開源前端框架，專案地址為：https://github.com/Meituan-Dianping/mpvue，使用時可以參考該文件。該框架基於vue.js,通過改寫compile檔案，將vue檔案重新編譯為小程式能夠識別的wxml等檔案，底層還是小程式語法。

    mpvue有一個5分鐘上手的 quick-start 教程,通過該教程可以快速搭建一個mpvue的專案框架，那麼為什麼我還要寫這篇文章呢？主要是基於以下兩點：

    ①頁面配置：mpvue的預設頁面需要一個xx.vue單頁面元件，同時配合上一個 main.js檔案，因為每個頁面都需要，所以main.js顯得比較冗餘。

    ②路由跳轉：因為小程式與vue的路由機制的差異，所以無法使用vue-router來實現路由跳轉（vue跳轉後，之前的頁面會銷燬，而小程式在頁面跳轉後，之前的頁面不會銷燬，而是跳轉到後臺執行）

    基於第一點，採用第三方外掛：mpvue-entry（集中式頁面配置，自動生成各頁面的入口檔案，優化目錄結構，支援新增頁面熱更新）, 其專案地址為：https://github.com/F-loat/mpvue-entry，使用時可以參考該文件。我的專案demo就是基於該專案的。

vue init F-loat/mpvue-quickstart mpvue-base-framework
// 一路回車
cd mpvue-base-framework
npm install
npm run dev
 

    基於第二點，採用第三方外掛：mpvue-router-patch （在mpvue中的vue-router相容的路由寫法）, 其專案地址為：https://github.com/F-loat/mpvue-router-patch，使用時可以參考該文件。

npm install mpvue-router-patch

    在專案src目錄下的main.js檔案中引入：

import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)

    在專案src目錄下新建router資料夾，在該資料夾下新建router.js檔案，並將page.js中的內容複製到router.js中。（此時page.js的使命可以結束了，可以將該檔案刪除了）

    在專案build目錄下的webpack.base.conf.js檔案中修改配置：

const entry = MpvueEntry.getEntry('./src/pages.js')
// 修改為：
const entry = MpvueEntry.getEntry('./src/router/router.js')

    至此全部工作已完成，只需重新執行即可。

    題外話：關於VsCode程式碼規則檢查問題的配置（可選），在.eslintrc.js檔案中的'rules'規則下新增如下內容：

"no-unused-vars": [1, { 
    // 允許宣告未使用變數
    "vars": "local",
    // 引數不檢查
    "args": "none" 
}],
"one-var": 0,
"spaced-comment": 0,
// 關閉函式括號前的空格驗證
'space-before-function-paren': 0

    本來也想把app.json檔案也幹掉的，但是使用最新的”mpvue-loader": "^1.1.2”打包時，不會自動生成app.json，會把main.js同級目錄下的app.json拷貝到打包的dist檔案中，即原來寫在main.js中的這段程式碼

export default {
    // 這個欄位走 app.json
    config: {
        // 頁面前帶有 ^ 符號的，會被編譯成首頁，其他頁面可以選填，我們會自動把 webpack entry 裡面的入口頁面加進去
        pages: ['pages/logs/main', '^pages/index/main'],
        window: {
            backgroundTextStyle: 'light',
            navigationBarBackgroundColor: '#fff',
            navigationBarTitleText: 'WeChat',
            navigationBarTextStyle: 'black'
        }
    }
}