背景：
? 公司項(xiàng)目重構(gòu)，要把之前用wepy做的小程序重新用mpvue來做，短期來說又是一次陣痛，又需要一個(gè)過渡期來適應(yīng)新的框架，但長(zhǎng)期來說還是值得的，因?yàn)橐院笠龆喽诉m配的時(shí)候可以只用一套代碼，微調(diào)下就行了，相對(duì)來說成本更低。愛掏網(wǎng) - it200.com
實(shí)戰(zhàn):
快速構(gòu)建項(xiàng)目：
# 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 權(quán)限的 $ npm install --global vue-cli # 4. 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目 # 新手一路回車選擇默認(rèn)就可以了 $ vue init mpvue/mpvue-quickstart my-project # 5. 安裝依賴，走你 $ cd my-project $ npm install $ npm run dev
安裝好后，如果有報(bào)錯(cuò)就解決報(bào)錯(cuò)，把報(bào)錯(cuò)信息復(fù)制丟到百度，一般都有清晰的解讀的，
如果有警告的話不用管，一般就是提示你有什么東西要升級(jí)，或者什么插件改名字了。愛掏網(wǎng) - it200.com
然后用微信開發(fā)者工具打開，會(huì)顯示一個(gè)小demo，注意微信開發(fā)者工具只是用來做調(diào)試的，
我們需要用別的編輯器打開建好的項(xiàng)目。愛掏網(wǎng) - it200.com我習(xí)慣上是用webstorm。愛掏網(wǎng) - it200.com
那么我們現(xiàn)在要加上一些我們自己的業(yè)務(wù)了：
首先，我們要找到src根目錄下的main.js，這個(gè)文件就類似于原生小程序里的最外層的app.vue，
我們可以在這里配置小程序的一些基本配置。愛掏網(wǎng) - it200.com
我們需要在小程序下方加一個(gè)tabbar，一般的項(xiàng)目都會(huì)用的上這個(gè)菜單欄的。愛掏網(wǎng) - it200.com
export default {
// 這個(gè)字段走 app.json
config: {
// 頁面前帶有 ^ 符號(hào)的，會(huì)被編譯成首頁，其他頁面可以選填，我們會(huì)自動(dòng)把 webpack entry 里面的入口頁面加進(jìn)去
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"
}
]
}
}
}
紅色部分是我新加的，也就是說我需要新建一個(gè)friends組件,如下：在fiends組件里新建兩個(gè)文件
建好以后我們，npm run dev，運(yùn)行試一下效果，這時(shí)小程序那邊報(bào)錯(cuò)：
這個(gè)原因是我們生成的fiiends/main.js里面是空的，我們需要在這個(gè)文件里面加入一些東西，
創(chuàng)建和掛載根實(shí)例。愛掏網(wǎng) - it200.com從而讓整個(gè)應(yīng)用都有路由功能：
import Vue from 'vue' import App from './index' const app = new Vue(App) app.$mount()
這時(shí)我們的效果就出來了，并且小程序也不報(bào)錯(cuò)了
另外假如小程序報(bào)錯(cuò)是：
tabBar[1].pagePath "pages/friends/index" 需在 pages 數(shù)組中
這時(shí)我們就要看下是不是路徑給配錯(cuò)了：
比如：
pagePath: "pages/friends/index",要改成
pagePath: "pages/friends/main"