背景：

? 公司項目重構，要把之前用wepy做的小程序重新用mpvue來做，短期來說又是一次陣痛，又需要一個過渡期來適應新的框架，但長期來說還是值得的，因為以后要做多端適配的時候可以只用一套代碼，微調下就行了，相對來說成本更低。愛掏網 - it200.com

實戰:

快速構建項目：

# 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

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

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

安裝好后，如果有報錯就解決報錯，把報錯信息復制丟到百度，一般都有清晰的解讀的，

如果有警告的話不用管，一般就是提示你有什么東西要升級，或者什么插件改名字了。愛掏網 - it200.com

然后用微信開發者工具打開，會顯示一個小demo，注意微信開發者工具只是用來做調試的，

我們需要用別的編輯器打開建好的項目。愛掏網 - it200.com我習慣上是用webstorm。愛掏網 - it200.com

那么我們現在要加上一些我們自己的業務了：

首先，我們要找到src根目錄下的main.js，這個文件就類似于原生小程序里的最外層的app.vue，

我們可以在這里配置小程序的一些基本配置。愛掏網 - it200.com

我們需要在小程序下方加一個tabbar，一般的項目都會用的上這個菜單欄的。愛掏網 - it200.com

export default {
  // 這個字段走 app.json
  config: {
    // 頁面前帶有 ^ 符號的，會被編譯成首頁，其他頁面可以選填，我們會自動把 webpack entry 里面的入口頁面加進去
    pages: ['pages/logs/main', '^pages/index/main','pages/friends/main'],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    tabBar: {
      color: "#8a8a8a",
      selectedColor: "#017cc0",
      backgroundColor: "#f8f8f8",
      list: [
        {
          pagePath: "pages/index/main",
          text: "首頁",
          // "iconPath": "images/home-gray.png",
          // "selectedIconPath": "images/home-blue.png"
        },
        {
          pagePath: "pages/friends/main",
          text: "校友圈",
          // iconPath: "images/earth-gray.png",
          // selectedIconPath: "images/earth-blue.png"
        },
        {
          pagePath: "pages/logs/main",
          text: "我",
          // iconPath: "images/me-gray.png",
          // selectedIconPath: "images/me-blue.png"
        }
      ]
    }
  }
}

紅色部分是我新加的，也就是說我需要新建一個friends組件,如下：在fiends組件里新建兩個文件

建好以后我們，npm run dev，運行試一下效果，這時小程序那邊報錯：

這個原因是我們生成的fiiends/main.js里面是空的，我們需要在這個文件里面加入一些東西，

創建和掛載根實例。愛掏網 - it200.com從而讓整個應用都有路由功能：

import Vue from 'vue' import App from './index'  const app = new Vue(App)
app.$mount()

這時我們的效果就出來了，并且小程序也不報錯了

另外假如小程序報錯是：

tabBar[1].pagePath "pages/friends/index" 需在 pages 數組中

這時我們就要看下是不是路徑給配錯了：

比如：

pagePath: "pages/friends/index",要改成

pagePath: "pages/friends/main"