mpvue框架开发小程序

mpvue 是一个使用 Vue.js 开发小程序的前端框架

使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

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

• 完整的 Vue.js 开发体验

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

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

• 支持使用 npm 外部依赖

• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

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

• 官方地址http://mpvue.com/ 

使用mpve最大的好处是不用复习原始微信小程序的知识，直接用vue的写法快速开发，在后期H5转微信小程序，转字节跳动小程序更加方便。

目标：开发一款志愿填报的微信小程序，后期转H5与抖音小程序。 

1. 初始化

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

UI框架使用vant-weapp官网：https://youzan.github.io/vant-weapp/#/intro

开发需要到官网看文档，如果是原生的微信小程序，可以使用npm install形式，但是mpvue开发不可以，需要到github地址

https://github.com/youzan/vant-weapp去下载zip压缩包，将dist文件夹拷贝至项目根目录的static下，在app.json里这样使用

"usingComponents": {
  "van-button": "/static/vant/button/index"
}

2. 开发注意事项

1）如果一个页面的循环特别多，会导致key的重复，在H5一般会这样处理

v-for="(item, index) in options" :key="‘xxx’+index"

这种写法在mpvue里不支持，需要写成下面的。

v-for="(item, index) in options" :key="index"

2）新增页面需要npm run dev重启一下，并且需要在app.json里增加，用开发者工具打开对应项目的dist/wx即可。

3)使用this.$root.$mp.query获取参数需要在monted中获取，在created中会报Cannot read property 'query' of undefined 。

4)v-html不支持，还有尽量不要再data里放特别大的数据，会导致在微信小程序里很卡，放到页面page{}外的地方或者放到微信缓存里都可以。