mpvue是一个使用Vue.js开发小程序的前端框架（美团的开源项目）。框架基于Vue.js核心，mpvue修改了Vue.js的runtime和compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。

mpvue你可以使用你熟悉的vue框架语法，双向绑定让你不用再使用wx的this.setData了，你可以使用npm方便的引入第三方了，真的是贫穷限制了我的想象力啊。个人感觉mpvue比wepy更加简单，上手更加方便，mpuve五分钟教程快速构建。

项目git地址：mpvue-demo（代码注释很全，使用mpvue很简单构建一个小程序，拓展）

step1:查看文档快速构建simplempvueproject

1#全局安装vue-cli2$npminstall--globalvue-cli34#创建一个基于mpvue-quickstart模板的新项目5$vueinitmpvue/mpvue-quickstartmy-project67#安装依赖8$cdmy-project9$npminstall10#启动构建11$npmrundev

这里我取消了vuex(状态管理)和ESlint(代码检查)，因为个人不喜欢检测空格和;的规范，你可以根据你的需求配置。

step2:修改代码，微信开发者工具打开dist目录，查看是否发生改变。

step3:封装api和http请求（这里使用的是flyio，除了请求取消，其他功能基本相似axios,大小只有4kb,是axios的三分之一）

package.json加入依赖或者npminstallflyio

1varFlyrequire("../lib/wx")//wx.js为您下载的源码文件2//varFlyrequire("flyio/dist/npm/wx")//npm引入方式3varflynewFly();//创建fly实例45//添加拦截器6fly.interceptors.request.use((config,promise){7//给所有请求添加自定义header8config.headers["X-Tag"]"flyio";9returnconfig;10})11//配置请求基地址12fly.config.baseURL"https://wendux.github.io/"13...1415Page({16//事件处理函数17bindViewTap:function(){18//调用19fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d){20//输出请求数据21console.log(d.data)22//输出响应头23console.log(d.header)24}).catch(err{25console.log(err.status,err.message)26})27...28})29})

step4:将flyio封装的请求和项目api作为组件库挂载在原型对象上，这样不用每个vue单页面都import封装的js,直接使用this.$http调用方法。(flyio官方文档)

httpUtil.js

ViewCodeapiUtil.js

ViewCode

step5:vue组件(mpvue官方项目中就创建了card组件，这里注意class需要写在组件内部里面，不然渲染不出来)

step6:页面跳转和传参(这里mpvue不支持vue-router)

使用微信的页面跳转方法，然后跳转页面使用this.$root.$mp.query获取参数。

step7:引入weui,测试效果(根据你的需求引入UI库，不支持elementUI，或者不使用)。

下载weui.css放入项目中，import引入css，如：import'../static/weui/weui.css'

补充下使用mpvue需要注意的地方(具体参考官方文档)

1.新增页面需要npmrundev重启一下。

2.小程序里所有的BOM／DOM都不能用，也就是说v-html指令不能用。

3.暂不支持在组件上使用Class与Style绑定，需要在组件内部书写。

4.mpvue可以支持小程序的原生组件，比如：picker,map等，需要注意的是原生组件上的事件绑定，需要以vue的事件绑定语法来绑定，如bindchange"eventName"事件，需要写成@change"eventName"。

5.mpvue建议使用v-model.lazy绑定方式以优化性能，此外v-model在老基础库下输入框输入时可能存在光标重设的问题。

6.写页面跳转时候传入动态参数，需要写成:url，如：navigatorurl"'../test/main?id'+idhover-class"none""。

7.通过this.$root.$mp.query进行获取小程序在pageonLoad时候传递的options。通过this.$root.$mp.appOptions进行获取小程序在apponLaunch/onShow时候传递的options。

8.使用this.$root.$mp.query获取参数需要在monted中获取，在created中会报Cannotreadproperty'query'ofundefined。