刚刚开始接触小程序，准备采用mpvue框架进行学习开发，接下来就说说如何准备一个空的mpvue吧，像极了用脚手架创建一个空的vue一样。
具体操作以及详细api我们可以点开mpvue官网查看
第一步：找好存储位置创建一个空mpvue文件夹

例如我想在D:\myDemo创建，那么在对应位置打开我们俗称的黑色小窗口：





输入vue init mpvue/mpvue-quickstart my-project ，然后按回车就好。（my-project是文件名，你自定义）



然后就一路回车就好：



这时我们就创建一个基于 mpvue-quickstart 模板的新项目，之后就是安装依赖：

先cd my-project进入该文件，然后输入npm install下载依赖



安装完之前的所有东西后，最后想运行？输入npm run dev



呃？和想象的不一样？没有出现想vue一样的链接打开浏览器预览，其实小程序是不能在浏览器预览的，所以输入npm run dev只是会打包生成dist文件夹



那我们要如何运行预览呢？这时就要借助微信开发者工具了，也是在官网下载即可
在开发者工具选择小程序打开刚创建的文件夹，打开模拟器就可以看到预览效果了。

一、安装cli-init.
当我们直接搭建脚手架时，如果没有安装cli-init会报错。因此，我们首先需要安装cli-init。使用如下命令可以直接安装。
npm install -g @vue/cli-init

二、搭建脚手架
1、基于mpvue-quickstart模板创建新项目
vue init mpvue/mpvue-quickstart my-project

在输入命令后，我们需要在？行按下回车，表示同意。


2、安装依赖和运行
cd my-project
npm install
npm run dev

注：dev默认微信小程序

之后我们在WebStorm中进行修改源码，在微信开发者工具中进行调试

WebStorm链接：https://pan.baidu.com/s/1LSTruuV3NJ3ReMeckQSSpw

提取码：7uun

微信开发者工具链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

vue项目转小程序-mpvue项目创建
前言
创建mpvue项目

前言
这次遇到了要拿很久之前用vue写的移动端项目，改成小程序的要求。因为本人只会用原生的开发微信小程序，所以这次也是学习了一下mpvue，现在来总结一下。
创建mpvue项目
mpvue是美团开源的项目，先贴上官方地址：http://mpvue.com/

创建项目前先检查一下node和npm是否安装好，然后开始安装vue-cli脚手架，注意，这要2.x版本的，3.x版本的创建不了。
$ npm install --global vue-cli@2.9

安装完之后，初始化一个基于mpvue-quickstart模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

没什么特别要求的话，基本上是一路回车就好

创建完之后就是下载依赖，启动项目拉
$ cd my-project
$ npm install
$ npm run dev

项目启动成功之后，目录会多了一个dist文件夹，就是把vue代码转成了小程序代码，把整个项目放到微信开发者工具就可以预览拉。
项目创建的时候一般都有px2rpx-loader的，所以写项目的时候可以直接用px，然后编译的时候会转成rpx。

众所周知，vue项目是用的vue-router，怎么在mpvue中用vue-router和引入第三方ui组件呢，请看小编的其他文章！

mpVue2.0多端小程序框架
注意事项：


目前mpvue框架使用的是vue2.x，所以需要使用vue2.x的脚手架
npm install -g vue-cli



搭建mpvue脚手架

基于mpvue-quickstart模板创建新项目

// my-project 为创建的项目名
vue init mpvue/mpvue-quickstart my-project


安装依赖和运行


也可以使用yarn进行安装；
yarn装包成功后框架提供的readme中是使用npm dev这里是错误的
直接使用yarn dev就可以了

cd my-project
npm install
npm run dev

对比小程序中的特殊传参和方法


如何获取小程序在 page onLoad 时候传递的 options

在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。



如何获取小程序在 app onLaunch/onShow 时候传递的 options

在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。



如何捕获 app 的 onError


由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：
export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },

   // 捕获 app error
   onError (err) {
       console.log(err)
   }
}





mpvue框架使用的相关建议


不要在选项属性或回调上使用箭头函数


比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。


精简 data 数据

冗余数据不要挂在 data 里，所有在 data/props/computed 中的数据，每次变更都会从微信小程序的 JSCore 进程，通过 setData 序列化成字符串后发送到 JSRender 进程。所以，如果你的数据量巨大的时候，会导致页面非常卡顿。



优化长列表性能

避免在 v-for 中嵌套子组件，这样可以优化大部分部分 setData 时的冗余数据。
通过实践发现 wx:if 和 hidden 的优化肉眼不可见，所以或许可以试试直接通过样式 display 来展示和隐藏。
如果列表过长，强烈建议产品思考更好的展示形态。比如只展示热门，多余的折叠等形式。



合理使用双向绑定 mpvue 建议使用 v-model.lazy 绑定方式以优化性能，此外 v-model 在老基础库下输入框输入时可能存在光标重设的问题。


谨慎选择直接使用小程序的 API 如果你有小程序和H5复用代码的需要，业务代码需要保持对 WEB Vue.js 的兼容性。此时我们不建议在代码中直接调用小程序API，更好的选择是通过桥接适配层屏蔽两端差异。


列表渲染

嵌套列表渲染，必须指定不同的索引



mpvue踩坑

列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@ @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 ``
小程序能力所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑。
事件修饰符

.stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效！
.prevent 可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面
.capture 支持 1.0.9
.self 没有可以判断的标识
.once 也不能做，因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理，但非常的不优雅，违背了原意