美團(tuán)開(kāi)源了mpvue這個(gè)項(xiàng)目，使得我們又多了一種用來(lái)開(kāi)發(fā)小程序的框架選項(xiàng)州泊。由于mpvue框架是完全基于Vue框架的（重寫(xiě)了其runtime和compiler），因此在用法上面是高度和Vue一致的（某些功能由于受限于小程序環(huán)境本身的原因而不能使用）漂洋，這給使用過(guò)Vue開(kāi)發(fā)Web應(yīng)用的前端開(kāi)發(fā)者提供了極低的切換門(mén)檻來(lái)開(kāi)發(fā)小程序遥皂。
mpvue
Vue.js 小程序版, fork 自 vuejs/vue@2.4.1，保留了 vue runtime 能力刽漂，添加了小程序平臺(tái)的支持演训。
mpvue 是一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架，目前支持 微信小程序贝咙、百度智能小程序样悟，頭條小程序 和 支付寶小程序。 框架基于 Vue.js颈畸，修改了的運(yùn)行時(shí)框架 runtime 和代碼編譯器 compiler 實(shí)現(xiàn)，使其可運(yùn)行在小程序環(huán)境中没讲，從而為小程序開(kāi)發(fā)引入了 Vue.js 開(kāi)發(fā)體驗(yàn)眯娱。
名稱(chēng)由來(lái)
-
mp：mini program 的縮寫(xiě) -
mpvue：Vue.js in mini program
主要特性
使用 mpvue 開(kāi)發(fā)小程序，你將在小程序技術(shù)體系的基礎(chǔ)上獲取到這樣一些能力：
- 徹底的組件化開(kāi)發(fā)能力：提高代碼復(fù)用性
- 完整的
Vue.js開(kāi)發(fā)體驗(yàn) - 方便的
Vuex數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用 - 快捷的
webpack構(gòu)建機(jī)制：自定義構(gòu)建策略爬凑、開(kāi)發(fā)階段 hotReload - 支持使用 npm 外部依賴(lài)
- 使用
Vue.js命令行工具 vue-cli 快速初始化項(xiàng)目 - H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力
其它特性正在等著你去探索徙缴。
配套設(shè)施
mpvue 作為小程序版本的 Vue.js，在框架 SDK 之外嘁信，完整的技術(shù)體系還包括如下設(shè)施于样。
- mpvue-loader 提供 webpack 版本的加載器
- mpvue-webpack-target webpack 構(gòu)建目標(biāo)
- postcss-mpvue-wxss 樣式代碼轉(zhuǎn)換預(yù)處理工具
- px2rpx-loader 樣式轉(zhuǎn)化插件
- mpvue-quickstart mpvue-quickstart
- mpvue-simple 輔助 mpvue 快速開(kāi)發(fā) Page / Component 級(jí)小程序頁(yè)面的工具
- 其它
通過(guò)官網(wǎng)提供的五分鐘快速上手教程，可以發(fā)現(xiàn)它的開(kāi)發(fā)過(guò)程和Vue保持高度一致潘靖，連使用的命令行工具也還是原先開(kāi)發(fā)Web應(yīng)用時(shí)所用的vue-cli：
搭建步驟
一穿剖、開(kāi)發(fā)環(huán)境Node.js
現(xiàn)代前端開(kāi)發(fā)框架和環(huán)境都是需要 Node.js 的，如果沒(méi)有的話卦溢，請(qǐng)先下載 nodejs 并安裝糊余。
安裝完成后，打開(kāi)你的命令行輸入如下命令单寂，驗(yàn)證安裝是否成功：
node --version
v8.1.2
npm --version
5.0.3
然后贬芥，我們需要執(zhí)行以下命令，將npm的下載源切換到國(guó)內(nèi)淘寶的鏡像宣决，以提高下載時(shí)的速度和成功率：
npm set registry https://registry.npm.taobao.org/
但是我電腦上用的不是npm蘸劈，而是yarn，因?yàn)?code>yarn相比npm使用更方便尊沸，快速威沫，安裝yarn可以參考
Npm vs Yarn 之備忘詳單贤惯，
yarn官方文檔
JavaScript 包管理工具 yarn 的使用
安裝完成后，打開(kāi)你的命令行輸入如下命令壹甥，驗(yàn)證安裝是否成功：
yarn --version
1.3.2
二救巷、開(kāi)發(fā)環(huán)境vue-cli
npm install vue-cli -g
提示許可被拒絕， 想起來(lái)了昨天啟動(dòng)時(shí)的權(quán)限問(wèn)題句柠， 試探性在命令前面加上了sudo浦译， 結(jié)果可行：
sudo cnpm install --global vue-cli
安裝成功, 查詢下版本：
vue -V
2.9.2
三、開(kāi)始創(chuàng)建項(xiàng)目
vue init mpvue/mpvue-quickstart mpvueTest
現(xiàn)在mpvue的模板代碼已經(jīng)生成溯职，現(xiàn)在還不能運(yùn)行精盅，需要
cd到項(xiàng)目目錄下
執(zhí)行
yarn
進(jìn)行安裝第三方庫(kù)谜酒，安裝完成之后叹俏，執(zhí)行
yarn dev
這樣就可以運(yùn)行起來(lái)了
四、搭建小程序的開(kāi)發(fā)環(huán)境
小程序自己有一個(gè)專(zhuān)門(mén)的微信開(kāi)發(fā)者工具僻族，最新版本下載地址粘驰。
這一步比較簡(jiǎn)單，按照提示一步步安裝好就行述么，然后用微信掃描二維碼登陸蝌数。 至此小程序的開(kāi)發(fā)環(huán)境差不多完成。
打開(kāi)之后度秘，就會(huì)看到我們新建的小程序頁(yè)面
至此我們這個(gè)基本mpvue小程序框架已經(jīng)搭建完成
但是這個(gè)只是最基本的框架顶伞，對(duì)于我們正在做項(xiàng)目還是不夠的，需要在進(jìn)行完善
五剑梳、加入常用第三方庫(kù)
需要引入一些項(xiàng)目需要的基本第三方庫(kù)唆貌，下面是我們項(xiàng)目目前用到的庫(kù)，打開(kāi)項(xiàng)目的package.json垢乙，加入一下內(nèi)容锨咙，
"dependencies": {
"mpvue": "^2.0.0",
"vuex": "^3.0.1",
"weapp-qrcode": "^0.9.0",
"flyio": "^0.5.9",
"install": "^0.12.2",
"mp-weui": "^1.0.3",
"mpvue-zanui": "^1.0.2",
"common-mpvue": "^0.4.6",
"mpvue-config-loader": "^0.1.3"
},
cd到項(xiàng)目目錄下，執(zhí)行一下命令
yarn
這些第三方庫(kù)下載到我們的項(xiàng)目中追逮，然后打開(kāi)項(xiàng)目的main.js引入一些第三方蓖租。
import Vue from 'vue'
import App from './App'
import store from '@/store';
import WeUI from 'mp-weui/packages';
Vue.use(WeUI);
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store,
...App
});
app.$mount();
提醒tips1:
還有一個(gè)我搭建時(shí)候需要的坑，就是新版本的
mpvue羊壹，不能在main.js里面配置小程序的config蓖宦，我們之前的項(xiàng)目都是在main.js里面進(jìn)行配置，但是我昨天進(jìn)行配置油猫，發(fā)現(xiàn)不可以配置了稠茂，在網(wǎng)上尋找答案，最終發(fā)現(xiàn)不支持了在main.js里面配置，在項(xiàng)目的main.json里面進(jìn)行配置
提醒tips2:
還有就是之前項(xiàng)目的每個(gè)頁(yè)面的配置也是在頁(yè)面的
main.js里面進(jìn)行配置睬关，現(xiàn)在這個(gè)也不支持了诱担，需要在頁(yè)面下面的main.json里面進(jìn)行配置，如下所示
{
"navigationBarTitleText": "頁(yè)面標(biāo)題",
"enablePullDownRefresh": true
}
六电爹、加入常用方法
在項(xiàng)目utils目錄下的index.js加入一些常用的方法
// /**
// * 獲取storage
// */
export function getCache(key) {
var value = wx.getStorageSync(key)
if (value) {
return value
}
return ""
}
// /**
// * 刪除storage
// */
export function removeCache(key) {
wx.removeStorage(key);
}
/**
* 存儲(chǔ)storage
*/
export function setCache(key, value) {
try {
wx.setStorageSync(key, value)
} catch (e) { }
}
/**
獲取url參數(shù)
*/
export function getUrlParam(path) {
var result = {},
param = /([^?=&]+)=([^&]+)/gi,
match;
while ((match = param.exec(path)) != null) {
result[match[1]] = match[2];
}
return result;
}
/**
數(shù)組是否包含某個(gè)字符串
*/
export const carrContainStr = (a, obj) => {
for (var i = 0; i < a.length; i++) {
if (a[i] == obj) {
return i;
}
}
return -1;
}
/**
克隆
*/
export const clone = (obj) => {
// Handle the 3 simple types, and null or undefined
if (null == obj || "object" != typeof obj) return obj;
// Handle Date
if (obj instanceof Date) {
var copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// Handle Array
if (obj instanceof Array) {
var copy = [];
for (var i = 0, len = obj.length; i < len; ++i) {
copy[i] = clone(obj[i]);
}
return copy;
}
// Handle Object
if (obj instanceof Object) {
var copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
}
return copy;
}
throw new Error("Unable to copy obj! Its type isn't supported.");
}
/**
判斷機(jī)型
*/
export const isiOS = () => {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isiOS) {
return true
}
return false;
}
七蔫仙、vuex
這塊我就不細(xì)說(shuō)了，大家可以參考下面的進(jìn)行在項(xiàng)目里進(jìn)行配置
vuex官網(wǎng)
VueJS中學(xué)習(xí)使用Vuex詳解
vuex的簡(jiǎn)單介紹
我對(duì)vuex的理解（二） 之 mapGetters取值和mapMutations的傳參
八丐箩、分裝網(wǎng)絡(luò)請(qǐng)求
可以看一下我的下一篇文檔小程序中使用flyio封裝網(wǎng)絡(luò)請(qǐng)求
至此特別感謝一斤代碼-------->一斤代碼的簡(jiǎn)書(shū)摇邦，他寫(xiě)了很多mpvue小程序的文檔，從搭建到使用屎勘，寫(xiě)的很詳細(xì)施籍，大家可以去學(xué)習(xí)觀摩一下??。
參考：
mpvue官網(wǎng)
一斤代碼
