Meituan Dianping opens source front-end framework mpvue for developing mini-programs with Vue.js

Meituan Dianping opens source front-end framework mpvue for developing mini-programs with Vue.js

Meituan Dianping recently open-sourced mpvue, a front-end framework for developing mini-programs using Vue.js. Using this framework, developers will get a complete Vue.js development experience, while providing the ability to reuse code for H5 and mini-programs. If you want to transform an H5 project into a mini-program, or want to convert a mini-program to H5 after developing it, mpvue will be a very suitable solution.

The core goal of mpvue is to improve development efficiency and enhance the development experience. To use this framework, developers only need to have a preliminary understanding of the mini-program development specifications and be familiar with the basic syntax of Vue.js to get started. The framework provides a complete Vue.js development experience. Developers write Vue.js code, and mpvue parses it into a mini-program and ensures that it runs correctly. In addition, the framework also provides developers with quick start sample code through the vue-cli tool. Developers only need to execute a simple command to get a runnable project.

Key Features:

  • Thorough component development capabilities: improve code

  • Complete Vue.js development experience

  • Convenient Vuex data management solution: convenient for building complex applications

  • Quick webpack build mechanism: custom build strategy, hotReload in development phase

  • Supports using npm external dependencies

  • Use the Vue.js command line tool vue-cli to quickly initialize the project

  • The ability to convert H5 code into mini-program target code

Implementation principle:

Vue Code

  • Write the mini program page as Vue.js implementation

  • Implement parent-child component association with Vue.js development specifications

Mini Program Code

  • Write the view layer template according to the applet development specification

  • Configure lifecycle functions and call associated data updates

  • Map Vue.js data to mini program data model

On this basis, the following mechanism is added

  • Vue.js instance is associated with the mini program Page instance

  • The mini program and Vue.js life cycle establish a mapping relationship, which can trigger the Vue.js life cycle in the mini program life cycle

  • The mini program event establishes a proxy mechanism, triggering the corresponding Vue.js component event response in the event proxy function

It is reported that the mpvue framework has been put into practice and verified in business projects and is currently being widely used within Meituan Dianping. mpvue is a secondary development based on the Vue.js source code. While adding the implementation of the mini-program platform, it retains the ability to follow the Vue.js version upgrade.

<<:  Why does the iPhone X have no chin? You'll understand after reading this

>>:  Experience the first version of Android 9.0: Like these 6 changes

Recommend

iOS15.1.1 official version: It turns out that the poor signal is not our fault

iOS 15.1.1 push: fix call disconnection At presen...

DSP advertising skills and precautions!

1. Advertising skills When collecting knowledge a...

A must-read for flu season! The latest flu vaccination guide for 2022 is here

Recently, the Chinese Center for Disease Control ...

Chen Chao: 60 Inventions That Influenced the World

Chen Chao · "60 Great Inventions That Influe...

Sharing of operational experience: 6 ways to increase user activity!

How to maintain and increase activity and improve...

Who will be the leader in the video website industry in the next five years?

On the evening of April 21, after the conclusion ...

US experts: True driverless cars won't be available until 2075

Autonomous driving systems are already being inst...

Apple Watch 2 first review: sports features revealed

Many people ask me whether Apple Watch SERIES 2 i...

Blame Debate: Product, Development, or Operations, who should take the blame?

【51CTO.com original article】 The word "argum...