Vue.js in mini program

Mpvue is a front-end framework for developing applets using vue.js. The framework is based on vue. js core, and MPvue modifies the runtime and Compiler implementation of vue. js to enable it to run in the environment of small programs, thus introducing a whole set of vue. js development experience for small program development.

Practical cases

Small programs of Meituan: Meituan bus ticket and Meituan charging. In addition, a large number of small programs are being connected.

Quick start

We have prepared a simple five-minute how-to tutorial to help you quickly experience the fun of mpvue development.

The name origin

  • mp: Mini Program
  • mpvue: vue.js in mini Program

The main features

Using MPVue to develop applets, you gain the following capabilities based on the applets technical architecture:

  • Thorough componentized development capability: improved code
  • The completeVue.jsDevelopment experience
  • convenientVuexData management solution: Easy to build complex applications
  • quickwebpackBuild mechanism: custom build strategy, hotReload during development
  • Support for using NPM external dependencies
  • useVue.jsCommand line tool vue-CLI quickly initializes the project
  • H5 code conversion ability to compile into small program object code

Other features are just waiting to be explored.

How do H5 and applets reuse code

Let’s start with a video

On the left is the H5 page that has been online, and on the right is the small program page with the same code, which can run directly by changing a small part of platform difference code and updating the construction configuration of webpack.

In the future, the ideal state is that one set of code can run directly in many aspects: WEB, small programs (wechat and Alipay), Native (with weex).

Of course, from the product level, we do not recommend this, each end has its own differences, we only expect the development and debugging experience to be consistent.

Supporting facilities

Mpvue as a small program version of vue. js, in addition to the framework SDK, the complete technical system also includes the following facilities.

  • Mpvue-loader provides the webPack loader
  • Mpvue-webpack-target Webpack builds the target
  • Postcss-mpvue-wxss style code conversion preprocessing tool
  • Px2rpx-loader style conversion plug-in
  • mpvue-quickstart mpvue-quickstart
  • Mpvue-simple a tool to help MPvue quickly develop Page/component-level applet pages
  • other