官方文档：http://mpvue.com/
小程序开发使用vue语法，支持使用 npm 外部依赖，可以与h5做到部分代码共用，共用h5拆分出来的模块。安装：
image.png
目录结构：
image.png
npm run dev运行项目，即可在微信开发者工具中预览调试，支持文件修改实时预览。
现在将原有h5项目转为小程序，将原有项目的src文件夹拷贝至mpvue项目，然后开始改造
- 将axios换成wx.request
- 注册的全局自定义组件删除（不支持）
- 删除路由文件，小程序是多页应用，路由没有用（可以获取参数，不能跳转）
-
根main.js添加
image.png -
为每个vue文件添加main.js，为每个页创建自己的vue实例，并注册vuex（实际用的是Storage）、路由（可以获取参数，不能跳转）等。其它可以使用原来的代码。
image.png - mpvue默认打包pages，修改webpack.base.conf.js
// const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')
const pagesEntry = getEntry(resolve('./src'), 'views/**/main.js')
使用框架后的文件夹是这样的：
360截图16290612558751.jpg
开发时语法使用vue，mpvue会将语法转为小程序语法
- html转化：如将div转为view。
一些标签在开发时还是要手动转化，如map。
如h5的图片组滑动在小程序有封装好的swiper。
小程序页面绑定不支持js方法
不支持router-link
... - css转化：会将css、sass、lese转为wxss；px自动转rpx。
rem需要自己处理
转完后样式会有偏差，需要调整（这个很耗时间其实）
小程序自定义组件中只能用class，后代选择器有时会有非预期的表现 - js：打包压缩。
一些功能需要做兼容，如分享、数据请求、路由跳转、定位等
build后的代码如下：
image.png
image.png
总结：可以共用h5拆分出来的模块，小程序开发量会减少40%-80%，具体要看需求。
