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: 查看文档快速构建simple mpvue project
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev
这里我取消了vuex(状态管理)和eslint(代码检查)，因为个人不喜欢检测空格和;的规范，你可以根据你的需求配置。
step2:修改代码，微信开发者工具打开dist目录，查看是否发生改变。
step3:封装api和http请求（这里使用的是flyio，除了请求取消，其他功能基本相似axios,大小只有4kb,是axios的三分之一）
package.json加入依赖或者npm install flyio
var fly=require(../lib/wx) //wx.js为您下载的源码文件 // var fly=require(flyio/dist/npm/wx) //npm引入方式 var fly=new fly(); //创建fly实例 //添加拦截器 fly.interceptors.request.use((config,promise)=>{ //给所有请求添加自定义header config.headers[x-tag]=flyio; return config; }) //配置请求基地址 fly.config.baseurl=https://wendux.github.io/ ... page({ //事件处理函数 bindviewtap: function() { //调用 fly.get(http://10.10.180.81/doris/1/1.0.0/user/login,{xx:6}).then((d)=>{ //输出请求数据 console.log(d.data) //输出响应头 console.log(d.header) }).catch(err=>{ console.log(err.status,err.message) }) ... }) })
step4: 将flyio封装的请求和项目api作为组件库挂载在原型对象上，这样不用每个vue单页面都import 封装的js,直接使用this.$http调用方法。(flyio官方文档)
httputil.js
var fly=require(../lib/wx) //wx.js为您下载的源码文件 // var fly=require(flyio/dist/npm/wx) //npm引入方式 var fly=new fly(); //创建fly实例 //添加拦截器 fly.interceptors.request.use((config,promise)=>{ //给所有请求添加自定义header config.headers[x-tag]=flyio; return config; }) //配置请求基地址 fly.config.baseurl=https://wendux.github.io/ ... page({ //事件处理函数 bindviewtap: function() { //调用 fly.get(http://10.10.180.81/doris/1/1.0.0/user/login,{xx:6}).then((d)=>{ //输出请求数据 console.log(d.data) //输出响应头 console.log(d.header) }).catch(err=>{ console.log(err.status,err.message) }) ... }) })
apiutil.js
/** * created by yuchen on 2018/4/2. */ //封装httpapi import request from './httputil' const host = https://xxx.cn const api = { // test地址 authorlist:() => request.get(`${host}/index/list_author_recommend.html`) } // export default api export default { //作为组件库(install) install: function(vue,name=$http) {//自定义名字(vue-resource也使用$http) object.defineproperty(vue.prototype, name, { value: api });//将组件库挂载在原型对象上 } }
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，如：
8.使用this.$root.$mp.query获取参数需要在monted中获取，在created中会报cannot read property 'query' of undefined 。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue.js实现表格增删步奏详解
怎样快速解决jquery发请求传输中文参数乱码
以上就是怎样用mpvue构建小程序的详细内容。