最近在使用mpvue开发小程序，发现这个框架有很多好用的地方，又发现坑也是很多，所以我想把它记录下来。

mpvue 是一款使用 Vue.js 开发微信小程序的前端框架。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序，或开发小程序后希望将其转换为 H5，mpvue 将是十分契合的一种解决方案。

一开始接触mpvue的时候，因为使用过vue.js，上手起来非常的快，但是在开发当中又有很多痛点未解决。

1.安装 mpvue

    # 全局安装 

    vue-cli$ npm install --global vue-cli

    # 创建一个基于 mpvue-quickstart 模板的新项目

    $ vue init mpvue/mpvue-quickstart my-project

    # 安装依赖

    $ cd my-project

    $ npm install

    # 启动构建$ npm run dev

    但安装预览的时候，不是用浏览器打开输入：localhost:8080。而是打开微信开发者工具，把项目根目录导入进去。

2.mpvue特性

    彻底的组件化开发能力：提高代码

    完整的 Vue.js 开发体验

    方便的 Vuex

    数据管理方案：方便构建复杂应用

    快捷的 webpack构建机制：自定义构建策略、开发阶段 hotReload

    支持使用 npm 外部依赖

    使用 Vue.js 命令行工具

    vue-cli 快速初始化项目

    H5代码转换编译成小程序目标代码的能力

    支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定

3.mpvue编译后文件上传

在我们开发的mpvue小程序中，我们在微信开发者工具中看到的其实是dist文件夹中的wxml等文件，我们开发完成后的小程序直接将dist文件中的wx文件夹上传即可。

踩坑记录一：

不支持vue中的ref和$refs. 一开始我还以为是我的写法有问题，结果弄了大半天原来mpvue不支持的原因，后来我在github上找到了很多大神的解决方法。

踩坑记录二：

定时器的清除。

在mpvue中无法清除定时器，又一次在github上找到了这个问题的解决方法。

onUnload() {
  if(this.Interval){
    clearInterval(this.Interval)
  }
}

后续待更新。。。