前言: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}}
+-