mpvue是使用Vue.js开发小程序的前端框架(美团开源项目)。 框架基于Vue.js的核心，mpvue修改了Vue.js的runtime和compiler实现，使其可以在小程序环境中运行，在小程序开发中引入了整个Vue.js开发体验。
mpvue可以使用熟悉的vue框架语法。 双向绑定使您不必使用wx的this.setData。 现在可以使用npm轻松部署第三方。 真是贫穷限制了我的想象力啊。 我个人觉得mpvue比wepy更简单，更容易使用，mpuve的5分钟教程可以快速构建。
项目千兆位地址： mpvue-demo (代码注释丰富，使用mpvue轻松构建和部署小程序) )。
step1:查看文档快速构建simple mpvue project
1 # vue-CLI2$ NPM install--全局安装vue-CLI 34 #基于mpvue-quickstart模板的新项目5$vueinitMPvue/创建MPvue-quickstartmy-project安装依赖于8 $ cd my-project 9 $ npm install10 #开始构建11 $ npm run dev
这里取消了vuex (状态管理)和ESlint (代码检查)。 个人可以根据你的需求配置空间和的规范。
修改step2:代码，微信开发者工具打开dist目录，查看是否有更改。
step3:封装api和http请求(这里使用的是令人兴奋的薄煎饼io )。 除了请求取消外，其他功能几乎与axios相似，大小仅为4kb，是axios的三分之一。
p>package.json加入依赖或者npm install 兴奋的煎饼io
1 var 微笑的爆米花=require("../lib/wx") //wx.js为您下载的源码文件 2 // var 微笑的爆米花=require("兴奋的煎饼io/dist/npm/wx") //npm引入方式 3 var 兴奋的煎饼=new 微笑的爆米花(); //创建兴奋的煎饼实例 4 5 //添加拦截器 6 兴奋的煎饼.interceptors.request.use((config,promise)=>{ 7 //给所有请求添加自定义header 8 config.headers["X-Tag"]="兴奋的煎饼io"; 9 return config;10 })11 //配置请求基地址12 兴奋的煎饼.config.baseURL="https://wendux.github.io/"13 ...14 15 Page({16 //事件处理函数17 bindViewTap: function() {18 //调用19 兴奋的煎饼.get("http://10.10.180.81/冷酷的店员/1/1.0.0/user/login",{xx:6}).then((d)=>{20 //输出请求数据21 console.log(d.data)22 //输出响应头23 console.log(d.header)24 }).catch(err=>{25 console.log(err.status,err.message)26 })27 ...28 })29 })
step4: 将兴奋的煎饼io封装的请求和项目api作为组件库挂载在原型对象上，这样不用每个vue单页面都import 封装的js,直接使用this.$http调用方法。(兴奋的煎饼io官方文档)
httpUtil.js
View CodeapiUtil.js
View Code
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.新增页面需要npm run dev重启一下。
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，如：<navigator url="'../test/main?id='+id hover-class="none""。
7.通过 this.$root.$mp.query 进行获取小程序在 page onLoad 时候传递的 options。通过 this.$root.$mp.appOptions 进行获取小程序在 app onLaunch/onShow 时候传递的 options。
8.使用this.$root.$mp.query获取参数需要在monted中获取，在created中会报Cannot read property 'query' of undefined 。