前文 说到我开发了一个简单的小程序叫做 车标速查（代码以及二维码详见 这里）本文简单讲讲如何将这个小程序转为 mpvue 开发（最终 成果 ）
mpvue 官网的 文档 真的是非常简单不熊掌号运营不应该说是简洁因为依托 Vue所以很多语法不需要赘述直接去看 Vue 的文档就好了。mpvue 这个名字真的是不忍吐槽起名也太不上心了吧 ... 反正我个人觉得不好听
mpvue 的入门非常简单可以看这个 quickstart。生成的模版目录结构和 Vue 开发很像但是有区别为了使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件。src 是开发目录dist 是最后 build 的目录也就是小程序的代码
简单看一下 src 的代码结构：
复制代码├── App.vue ├── data │ └── data.js ├── main.js ├── pages │ ├── about │ │ ├── index.vue │ │ └── main.js │ ├── detail │ │ ├── index.vue │ │ └── main.js │ └── index │ ├── index.vue │ └── main.js └── utils └── index.jsApp.vue 最后会被编译成 app.js/app.wxss一些全局相关的样式和钩子函数会被放在这里（比如说 onLaunch但是在 mpvue 里我们可以用 created 代替）。main.js 会被编译成 app.json一些全局相关的配置放在这里（比如页面入口熊掌号运营一些全局相关的配置放在这里（比如页面入口tabbars 等）
pages 目录即为每个页面以 index 目录为例index.vue 会被编译成 main.js/main.wxml/main.wxss而 main.js 可以放置针对单个页面的配置最后会被编译成 main.json（如果没有填入配置项则不会生成该文件）
然后来简单过下开发过程中踩的一些坑：
pages 目录下新增入口需要重新 npm start 启动因为新建了 webpack 的 entry
关于 navigator。index 页面点击图标需要去详情页这就有了导航需求。小程序有原生的 navigator 组件现在用 mpvue 开发那么能不能用 Vue-Router 呢？答案是并不可以参考 这个 faq。所以最后还是用了小程序原生的 navigator 组件
detail 页面的 onLoad 钩子会有一个 options 参数如果在这个页面用 created是获取不到的可以看下 mpvue 的 生命周期。因为 mpvue 不建议使用小程序的生命周期钩子所以比较好的方式是在 mounted 的时候用 this.$root.$mp.query 去获取 options
.vue 文件需要加上 style／script 标签后才能被正确编译这点不难理解script 里的内容被编译成 js 文件而 style 里的内容被编译成 wxss 文件一个小程序的页面需要它们支撑
filters 还是不能用
关于富文本。看了下 v-html 指令是可以用的但是是被编译成 rich-text 组件并不符合我的要求最后用的是 mpvue-wxParse还是不错的跟 wxParse 功能基本一样
关于 scroll-view。因为有个侧边导航点击跳转的功能还是用了 scroll-view 去实现并没有更好的办法
{{}} 中小程序原生不支持的语法mpvue 同样无法支持比如一些复杂的计算比如函数等
所有页面里面的 created 生命周期函数都会在小程序加载的时候 一次性执行而不是每进入一个页面执行一次（可以用 mounted 或者 onLoad 或者 onReady 代替）
总的来说我从入门 mpvue 到用其改写这个小程序也就不过一天时间由此可见 mpvue 上手真的非常快但是它给我的总体感觉是有点鸡肋一方面可能是我这个项目有点简单（不需要用到 Vuex 以及组件化）另一方面可能还不是很了解 mpvue
官网概括的它的主要能力：
彻底的组件化开发能力：提高代码复用性
完整的 Vue.js 开发体验
方便的 Vuex 数据管理方案：方便构建复杂应用
快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力
我觉得目前主要的亮点在于 Vuex 的可引入以及组件化开发但是越来越觉得随着原生小程序开发的改善这些功能都会被补充进去。所以最大的卖点可能还是在于 多端统一
我觉得有点鸡肋的另一个重要原因是使用 mpvue 开发并不能完全忽略小程序的 API 或者组件比如这个小程序还是要用 navigator 组件以及 scroll-view 组件去实现一些功能（当然随着 mpvue 生态的发展完全有可能出现 navigator／scroll-view 的 mpvue 组件但是这样造轮子是否值得？）而且可能还有其他一些 API。而类比 jQuery 和 jsjQuery 完全不用去考虑原生的 dom 操作方式从而更加 “傻瓜式”。mpvue 的开发模式注定不会是这样的结局（因为并不是从小程序底层去开发）
另外一点用 mpvue 开发增加了一层 vue->小程序 编译环节熊掌号运营增加了一层 vue->小程序 编译环节所以 reload 的速度应该会比原生开发慢一点
鲁小夫 在 如何看待美团开源的 mpvue ? 这个问题下的答案非常值得思考：