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.