序言
小程序一定是今年热门话题之一，对于我们开发者来讲，开发小程序也是属于我们的技能之一了。从去年我也玩过小程序，但当时处于内测的阶段，各种反人类的设计都有，连es6都不支持，只能说瞎折腾了。到了如今，小程序迎来春天，友好度提高了不少，wepy、taro与mpvue的出现也带来更高的开发效率。
什么是mpvue
是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
上面那段话语，是引用官方文档（http://mpvue.com/）的一段简介，简单的总结下，他有以下几个亮点：
跟vue一样的开发体验,包括vuex
H5代码转换编译成小程序目标代码的能力。
也就是说，只要会vue，学习成本基本为0。这对于前端来讲，开发过程是很舒服的。
完成一个demo
学习一个新知识，实操才是最重要的一环。这一小节，将会完成一个简单的开发流程。
安装vue-cli
任意框架的使用都离不开脚手架的搭建，而mpvue跟vue一样依赖的便是vuecli，这也是为啥说，掌握vue的原理，基本mpvue也就直接用了。
首先，安装下vuecli这一脚手架。
npm install --g vue-cli
安装完后，我们需要执行下vue这一命令，来检测安装是否成功。
vue
开始构建项目
执行以下命令，用来自动构建一个项目（构建过程会进行工具的选择，其中包括Eslint的使用，如果没用过的可以选择n，同时会生成一系列的文件）
vue init mpvue/mpvue-quickstart test-mpvue
安装依赖以及运行项目
项目生成后，为了保证运行成功，需要先install一下依赖包，可以使用这一命令。
npm install
不过呢，由于npm是国外的，因此会下载比较慢，可以考虑下使用cnpm 淘宝镜像来下载依赖，使用以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
运行成功后，便可以直接使用来快速安装依赖。
cnpm install
微信开发工具
项目运行成功之后，便下载微信开发工具并且打开小程序的入口，项目目录填的是【test-mpvue】-【dist】；APPID填写的是从【微信公众号】-【设置】-【AppID】获取到的值,项目名称任意填即可。
架构优化
前面的步骤完成后，项目的基本模板已经生成，不过呢，参照小程序的官方文档（https://developers.weixin.qq.com/miniprogram/dev/api/）之后，发现还是有一些硬性的要求，例如wx.request
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
在上面的代码中，header字段是固定的，完全可以封装一个tool，包括url的前缀也是固定不变的，因此可以以传参的方式以及暴露一个promise来进行调用，这样的代码不仅维护性高，而且也具有较强的复用性。
着手开发
1.在项目架构中，找到造轮子的文件夹【src】-【utils】，新建一个文件【request.js】。
let urlPath = 'https://xxx';
export function request(url,data) {
return new Promise((resolve,reject) => {
wx.request({
url: urlPath + url,
data: data,
method:'post',
header: {
'content-type': 'application/json'
},
success(res) {
resolve(res.data)
},
fail(ret) {
reject(ret)
}
})
})
}
从代码上来看，通过url，data的传参，从而进行wx.request的请求，同时return一个promise实例用于调用。
2.在【src】-【app.vue】中引用request.js文件， 发起请求。
import {request} from '/src/utils/request.js'
exports default{
mounted () {
this.fetchData();
},
methods:{
async fetchData(){
let res = await request('aaaaa',{bbb:''})
}
}
}
总结
mpvue结合了原生小程序的开发能力和Vue能力，开发起来能够更加便捷高效，当然也可以像vue一样使用vuex机制进行状态数据管理，这次主要完成了mpvue的使用流程以及开发小程序所应该掌握的多个代码部分 。“纸上得来终觉浅，绝知此事要躬行”，要真正学会mpvue进行开发，还得多敲代码，这样才能够更加深刻地认识mpvue。
随时随地看视频
