背景：
? 公司項目重構，要把之前用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"