mpvue将vue项目转换为小程序
一、mpvue简介
mpvue:是由美团点评团队出品的小程序开发的一款基于vue的框架，从整个Vue的核心代码上经过二次开发而形成的一个框架，相当于是给Vue本身赋能，增加了开发微信小程序的能力。
使用mpvue开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：
l彻底的组件化开发能力：提高代码
l完整的Vue.js开发体验
l方便的Vuex数据管理方案：方便构建复杂应用
l快捷的webpack构建机制：自定义构建策略、开发阶段hotReload
l支持使用npm外部依赖
l使用Vue.js命令行工具vue-cli快速初始化项目
lH5代码转换编译成小程序目标代码的能力
它的目标是：在未来最理想的状态下，可以一套代码可以直接跑在多端：WEB、微信小程序、支付宝小程序、Native（借助weex）。不过由于各个端之间都存在一些比较明显的差异性，从产品的层面上讲，不建议这么做，这个框架的官方他们对它的期望的也只是开发和调试体验的一致
原生微信小程序、mpvue、WePY这三种开发小程序方式的比较
二、mpvue开发流程
1、小程序账号配置
1）前往https://mp.weixin.qq.com/wxopen/waregister?action=step1根据指引填写信息和提交相应的资料，申请小程序帐号。在菜单“设置”-“开发设置”获取小程序的AppID。
2）在菜单“设置”-“开发设置”中配置服务器域名，必须是https开头的域名
2、安装开发工具
前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看《开发者工具介绍》。
打开小程序开发者工具，用微信扫码登录开发者工具，准备开发小程序。
3、mpvue生成项目
#全局安装vue-cli
$npminstall--globalvue-cli
#创建一个基于mpvue-quickstart模板的新项目
$vueinitmpvue/mpvue-quickstartmy-project
#安装依赖
$cdmy-project
$npminstall
#启动构建
$npmrundev
Npmrundev运行成功后，本地目录下会生成一个dist文件，这个文件就是生成的小程序相关代码。
在小程序中新建项目，填写上一步获取的appid，便于后面可以在手机上预览，真机测试，小程序的文件目录就是本地项目目录的dist文件。
三、mpvue开发中的规范
1、生命周期函数
除了vue本身的生命周期外，mpvue还兼容了小程序的生命周期，
app部分：
onLaunch，初始化
onShow，当小程序启动，或从后台进入前台显示
onHide，当小程序从前台进入后台
page部分：
onLoad，监听页面加载
onShow，监听页面显示
onReady，监听页面初次渲染完成
onHide，监听页面隐藏
onUnload，监听页面卸载
onPullDownRefresh，监听用户下拉动作
onReachBottom，页面上拉触底事件的处理函数
onShareAppMessage，用户点击右上角分享
onPageScroll，页面滚动
onTabItemTap,当前是tab页时，点击tab时触发（mpvue0.0.16支持）
注意点：
created：这个钩子是有bug的，所有页面的created函数会在项目加载的时候被一起调用，而且进入页面的时候不会在被调用，所以这个函数基本就不能使用了，用小程序的onLoad钩子代替
mounted：你如果从页面B返回页面A，页面A的mounted钩子不会被触发，因为页面没有被重新加载，如果有需要每次页面展示都要调用的逻辑，使用小程序的onShow代替
2、mpvue转换的部分规则
1)微信小程序的页面的query参数是通过onLoad获取的，mpvue对此进行了优化，直接通过this.$root.$mp.query获取相应的参数数据
2)小程序里所有的BOM／DOM都不能用，因此v-html、v-text不能用。
el：this.$refs...styles.width=offsetWIdth-->:style="{'width':offsetWidth}"
获取节点信息，
wx.createSelectorQuery().select(className).boundingClientRect().exec(res=>{
在此处获取到节点的信息：left,top,width,height})
3)不支持部分复杂的JavaScript渲染表达式，我们会把template中的{{}}双花括号的部分，直接编码到wxml文件中，由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的JavaScript表达式。
目前可以使用的有+-*%?:!=====><[].，剩下的还待完善。
{{message.split('').reverse().join('')}}
4）不支持过滤器，渲染部分会转成wxml，wxml不支持过滤器，所以这部分功能不支持。
5）不支持在template内使用methods中的函数。
6）不支持官方文档：Class与Style绑定中的classObject和styleObject语法。