最牛叉：Vue.js开发小程序前端框架mpv

前言：mpvue，这是使用Vue.js 小程序开发的前端框架。使用此框架，开发人员将获得完整的Vue.js开发经验，并同时为H5和小程序提供代码重用功能。如果要将H5项目转换为小程序，或者要在开发小程序之后将其转换为H5，则mpvue将是一个非常合适的解决方案。

mpvue的核心目标是提高开发效率和增强开发经验。使用此框架，开发人员只需要对小程序开发规范有初步的了解，并熟悉Vue.js的基本语法即可上手。该框架提供了完整的Vue.js开发经验。开发人员编写Vue.js代码，mpvue将其解析为小程序，并确保其正确运行。此外，该框架还通过vue-cli工具向开发人员提供了快速入门示例代码。开发人员只需执行简单的命令即可获得可运行的项目。

主要功能：

完全组件化的开发能力：改进代码

完整的Vue.js开发经验

便捷的Vuex数据管理解决方案：便捷地构建复杂的应用程序

快速的Webpack构建机制：自定义构建策略，开发过程中的hotReload

支持使用npm外部依赖项

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

将H5代码转换为小程序目标代码的能力

实现原理：

Vue代码

mpVua实施原则

将小程序页面写为Vue.js实现

达到Vue.js开发规范的父子组件关联

小程序代码

根据小程序开发规范编写视图层模板

配置生命周期功能，关联数据更新调用

将Vue.js数据映射到小程序数据模型

在此基础上，附加了以下机制

Vue.js实例与小程序 Page实例相关联

小程序与Vue.js的生命周期建立映射关系，可以在小程序的生命周期中触发Vue.js的生命周期。

小程序事件建立代理机制，并在事件代理功能中触发相应的Vue.js组件事件响应

据报道，mpvue框架已在商业项目中得到实践和验证，目前正在美团点评中大规模使用。 mpvue是基于Vue.js源代码的二次开发。在增加小程序平台的实现的同时，它保留了跟随Vue.js版本升级的功能。

mpvue最佳做法，美团开发的小程序框架

看着电话微信，我看到美团制作了一个小程序框架mpvue

搜索以进行尝试，并在Internet上进行比较

-----------------

以下是参考

我们对三个开发框架微信小程序，mpvue和WePY的主要功能进行了横向比较，以帮助您了解不同框架的重点，并根据业务场景和开发习惯确定技术解决方案。我们总结了一些有关如何更好地将mpvue用于小程序开发的最佳做法。

使用vue-cli命令行工具创建一个项目，并使用Vue2.x语法规范进行开发

避免使用框架不支持的语法功能。 小程序中无法使用某些Vue.js语法。尝试使用mpvue和Vue.js的常见功能

合理设计数据模型，实现对数据更新和操作的细粒度控制，避免性能问题

合理使用组件开发小程序以提高代码重用率

Vue真的很容易使用！

此外，提供了本机微信小程序，mpvue，WePY 小程序三种开发方法的比较，有兴趣的朋友可以参考：

mpvue表

mpvue（请参阅github地址）是使用Vue.js 小程序开发的前端框架。该框架基于Vue.js的核心。 mpvue修改了Vue.js的运行时和编译器实现，使其可以在小程序环境中运行，从而为小程序开发引入了完整的Vue.js开发经验。

[最近更新] mpvue入门教程系列：

如何在mpvue中正确引用小程序的本机自定义组件

使用mpvue开发小程序教程（六）

使用mpvue开发小程序教程（五）

使用mpvue开发小程序教程（四）

使用mpvue开发小程序教程（三）

使用mpvue开发小程序教程（二）

使用mpvue开发小程序教程（一）

我已经与微信小程序个开发人员或开发团队联系了一段时间。我相信他们将或多或少地构建和封装一些便于开发的框架/脚手架，尤其是一些进行过Web开发的开发人员。诸如Angular，React，Vue等主流开发框架对数据/状态管理，组件化和跨平台都有很高的追求。

因此，从小程序的出现到现在，一些遵循这些Web开发思想的小程序框架相继出现。更为杰出的是WePY，这是腾讯团队发起的小程序组件化开发。该框架的主要功能如下：

类似Vue的开发风格

支持自定义组件开发

支持引入NPM软件包

支持承诺

支持ES2015 +功能，例如异步功能

支持多种编译器，Less / Sass / Styus，Babel / Typescript，Pug

支持多种插件处理，文件压缩，图像压缩，内容替换等。

支持Sourcemap，ESLint等

小程序详细的优化，例如请求队列，事件优化等。

这些功能基本上是当今主流Web开发的标准配置。由于我在开发Web应用程序时经常使用Vue，因此在WePY试用期间，我感到非常熟悉并且易于使用。这确实是一个值得使用并且可以有效提高生产率的好框架。

但是，今天的主角不是这种Vue框架WePY。我想谈的是另一个基于Vue的框架：小程序由美团点评团队开发的框架：mpvue。为什么WePY是“类Vue”框架，而mpvue是“基于Vue”框架？因为WePY以代码开发方式使用Vue，所以它与Vue无关。这个mpvue是由Vue的核心代码通过二次开发形成的框架，相当于授权Vue本身，增加了开发能力微信小程序。

使用mpvue开发小程序，您将基于小程序技术系统获得此类功能：

完全组件化的开发能力：改进代码

完整的Vue.js开发经验

便捷的Vuex数据管理解决方案：便捷地构建复杂的应用程序

快速的Webpack构建机制：自定义构建策略，开发过程中的hotReload

支持使用npm外部依赖项

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

将H5代码转换为小程序目标代码的能力

其目标是：在将来的最理想状态下，可以直接在多个终端上运行一组代码：WEB，微信小程序，支付宝小程序，本机（在weex的帮助下）。但是，由于从产品级别来看，各个端点之间存在一些明显的差异，因此不建议这样做。该框架的官员只希望获得相同的开发和调试经验。

通过官方网站提供的五分钟快速入门教程，您可以发现其开发过程与Vue高度一致，甚至所用的命令行工具也是开发Web应用程序时使用的vue-cli：

＃创建一个小程序项目vue初始化mpvue / mpvue-quickstart我的项目

编写模板代码时，通常主要是HTML。例如，当我们编写一个.vue组件时，我们编写以下代码：

Vuex计数器：{{count}}

+-