初识Mpvue

一、mpvue是什么？

1、定义：mpvue是一款使用Vue.js开发微信小程序的前端框架。

2、优点：使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为H5和小程序提供了代码复用的能力。

3、知名应用：mpvue已经在美团点评多个实际业务项目中得到了验证

4、使用之前知识储备：

• 初步了解小程序开发规范 developers.weixin.qq.com/miniprogram…
• 熟悉Vue.js基本语法 cn.vuejs.org/

二、vue和小程序对比相同点，为何可以相互转化？

相同点：Vue.js 和小程序都是典型的**逻辑视图层框架**，逻辑层和视图层之间的工作方式为：

• 数据变更驱动视图更新
• 视图交互触发事件
• 事件响应函数修改数据再次触发视图更新

三、相互转化原理

鉴于 Vue.js 和小程序一致的工作原理，

• 所以将小程序的功能托管给Vue.js，在正确的时机将数据变更同步到小程序，从而达到开发小程序的目的。

• 这样，我们可以将精力聚焦在 Vue.js上，参照 Vue.js 编写与之对应的小程序代码，小程序负责视图层展示（项目中用到的组件都可以使用小程序自带组件）。

• 所有业务逻辑收敛到 Vue.js 中，Vue.js 数据变更后同步到小程序

四、第一个mpvue项目

mpvue 为提高效率而生，本身提供了自动生成小程序代码的能力，小程序代码根据 Vue.js 代码构建得到，并不需要同时开发两套代码。

构建最基础的mpvue项目

# 安装 vue-cli
$ npm install vue-cli
# 根据模板项目创建本地项目，目前为内网地址
$ vue init mpvue/mpvue-quickstart my- project
# 安装依赖和启动自动构建
$ cd my-project
$ npm install
$ npm run dev
复制代码

使用小程序开发者工具载入 dist 目录即可启动本地调试和预览。

项目转换注意事项：框架的目标是将小程序和 H5 的开发方式通过 Vue.js 建立关联，达到最大程度的代码复用。

但由于平台差异的客观存在（主要集中在实现机制、底层Api 能力差异），我们无法做到代码 100% 复用

难点：Vue.js 和小程序的数据彼此隔离，各自有不同的更新机制

五、完整MpVue项目 文档目录结构

目录结构对比

Name	VUE文档目录结构	Mpvue文档目录结构
图片对比
页面跳转	vue-router 路由	wx.navigator
数据存储	VueX	VueX
请求数据	axios	wx.request
组件使用	mint-ui或其他	小程序自带组件

六、Mpvue 项目实践 踩坑记录

juejin.im/post/5ba5fe…