# Meituan-Dianping/mpvue

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/meituan-dianping-mpvue).**

20,345 stars · 2,038 forks · JavaScript · mit

## Links

- GitHub: https://github.com/Meituan-Dianping/mpvue
- Homepage: http://mpvue.com
- awesome-repositories: https://awesome-repositories.com/repository/meituan-dianping-mpvue.md

## Topics

`mini` `mpvue` `vue` `weapp` `wxmp`

## Description

This project is a development framework that enables the creation of cross-platform mobile mini programs using the component-based architecture and reactive data binding of Vue.js. It functions as a build system that transforms web-oriented component code into native-compatible templates and logic, allowing developers to build modular user interfaces that run within restricted mobile environments.

The framework distinguishes itself through a sophisticated build pipeline that deconstructs single-file components into platform-specific templates, logic, and style files. It employs compile-time transformations to map component state and event handlers to native attributes via a virtual proxy layer, ensuring the user interface remains synchronized with the application state. Additionally, it provides automated style normalization, converting standard web CSS units and selectors into platform-specific formats to maintain consistent visual rendering across different mobile devices.

Beyond its core compilation capabilities, the project supports a comprehensive development workflow including project scaffolding, hot reloading simulation, and integrated type safety. It manages the complexities of mobile environments by synchronizing component lifecycles with native platform events, handling global error reporting, and optimizing build output structures for modular sub-packaging.

The framework is designed to be installed via standard module bundling tools, providing a command-line interface to automate the transformation of web-based codebases into deployable mini program assets.

## Tags

### Development Tools & Productivity

- [Compilers](https://awesome-repositories.com/f/development-tools-productivity/compilers-toolchains/compilers.md) — Transforms web-oriented code into native-compatible formats for restricted mobile environments. ([source](http://mpvue.com/build/mpvue-webpack-target))
- [Cross-Platform Build Pipelines](https://awesome-repositories.com/f/development-tools-productivity/cross-platform-build-pipelines.md) — Configuring build pipelines to transform standard web development patterns into platform-specific formats while managing assets and application configuration automatically.
- [Component Build Processors](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/asset-file-management/asset-processing-pipelines/asset-transformation-pipelines/component-build-processors.md) — Builds modular user interfaces using single-file components that compile into native platform structures. ([source](http://mpvue.com/mpvue/index.html))
- [Template Compilation Tools](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools.md) — Transforms component templates into native-compatible markup strings during the build process.
- [Template Compilation Tools](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools.md) — Transforms template strings into executable render functions for efficient UI updates. ([source](http://mpvue.com/mpvue/mpvue-template-compiler.html))
- [Mini Program Build Systems](https://awesome-repositories.com/f/development-tools-productivity/mobile-development-tools/mini-program-build-systems.md) — A build system that transforms web-oriented component code into native-compatible templates and logic for mobile mini program environments.
- [Pixel-to-Relative](https://awesome-repositories.com/f/development-tools-productivity/unit-converters/pixel-to-relative.md) — Automatically transforms CSS pixel values into relative units to ensure consistent layout scaling across devices. ([source](http://mpvue.com/build/px2rpx-loader))
- [Incremental Integration Utilities](https://awesome-repositories.com/f/development-tools-productivity/project-migration-utilities/incremental-integration-utilities.md) — Embeds component-based pages into existing projects to facilitate incremental migration or hybrid development. ([source](http://mpvue.com/mpvue/simple.html))
- [Style](https://awesome-repositories.com/f/development-tools-productivity/unit-converters/style.md) — Automates the conversion of web-based CSS units into platform-specific formats to ensure consistent visual rendering. ([source](http://mpvue.com/build/index.html))
- [Build Automation](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/build-task-automation/build-automation.md) — Configure custom build strategies and development workflows using standard module bundling tools to optimize and package application code for production. ([source](http://mpvue.com))

### User Interface & Experience

- [Component-Based UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-based-ui-frameworks.md) — Developing modular and reusable user interface components that encapsulate logic, templates, and styles to simplify maintenance and improve code organization.
- [State-Synchronized Bindings](https://awesome-repositories.com/f/user-interface-experience/data-binding-frameworks/state-synchronized-bindings.md) — Maps component state to native attributes via a proxy layer to maintain UI synchronization.
- [Component Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management/component-lifecycle-hooks.md) — Hooks into standard component lifecycle methods to coordinate initialization and state updates. ([source](http://mpvue.com/mpvue))
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Encapsulates logic, templates, and styles into reusable components to improve code organization. ([source](http://mpvue.com/mpvue))
- [Scoped Style Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/scoped-style-generators.md) — Injects unique identifiers into class names to isolate component styles and prevent leakage. ([source](http://mpvue.com/build/mpvue-loader))
- [Component Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/component-lifecycle-hooks.md) — Synchronizes component lifecycle methods with native platform events for consistent state management.
- [Dynamic List Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering.md) — Generates repeated UI elements from data collections using unique keys for efficient list updates. ([source](http://mpvue.com/mpvue))
- [Event Handling](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling.md) — Maps user interaction events to component methods using standard syntax and event modifiers. ([source](http://mpvue.com/mpvue))
- [Form Input Handling](https://awesome-repositories.com/f/user-interface-experience/form-input-handling.md) — Synchronizes form input values with component state for efficient data capture. ([source](http://mpvue.com/mpvue))
- [Dynamic Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems.md) — Applies dynamic styles based on component state using class and style expressions. ([source](http://mpvue.com/mpvue))
- [Style Isolation Mechanisms](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms.md) — Ensures visual encapsulation by injecting unique identifiers into class names during compilation.

### Web Development

- [Mini App Frameworks](https://awesome-repositories.com/f/web-development/mini-app-frameworks.md) — Enables the development of cross-platform mini programs using familiar component-based frameworks. ([source](http://mpvue.com))
- [Vue-Based Frameworks](https://awesome-repositories.com/f/web-development/mini-app-frameworks/vue-based-frameworks.md) — A development framework that enables building cross-platform mini programs using the component-based architecture and reactive data binding of Vue.js.
- [Single File Components](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/single-file-components/single-file-components.md) — Deconstructs single-file components into structured descriptors for processing by build tools. ([source](http://mpvue.com/mpvue/mpvue-template-compiler.html))
- [Lifecycle Hooks](https://awesome-repositories.com/f/web-development/application-lifecycle-hooks/lifecycle-hooks.md) — Aligns component lifecycles with native platform events to handle initialization and rendering effectively. ([source](http://mpvue.com/mpvue/index.html))
- [Platform-Specific Styling](https://awesome-repositories.com/f/web-development/cross-platform-styling/platform-specific-styling.md) — Adapts web-based CSS syntax and relative units into the specific format required by mobile platforms. ([source](http://mpvue.com/build/postcss-mpvue-wxss.html))
- [Style Transformation Utilities](https://awesome-repositories.com/f/web-development/style-transformation-utilities.md) — Converts web-based CSS units and selectors into platform-compatible formats for consistent visual output. ([source](http://mpvue.com/build/postcss-mpvue-wxss))
- [Migration Tools](https://awesome-repositories.com/f/web-development/mini-app-frameworks/migration-tools.md) — Adapting existing web-based codebases and component structures to run within restricted mobile mini-program environments through automated build transformations.
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Optimizes template compilation by generating string concatenation logic for server-side rendering performance. ([source](http://mpvue.com/mpvue/mpvue-template-compiler.html))
- [Style Normalizers](https://awesome-repositories.com/f/web-development/style-normalizers.md) — Normalizes CSS units and selectors to ensure consistent rendering across diverse mobile environments.

### Data & Databases

- [Application State Management](https://awesome-repositories.com/f/data-databases/application-state-management.md) — Integrates state management patterns to handle complex data flows across application components. ([source](http://mpvue.com))

### DevOps & Infrastructure

- [Build-Time Compilers](https://awesome-repositories.com/f/devops-infrastructure/cicd-pipeline-automation/core-build-engines/build-tooling/code-transformation-engines/build-time-compilers.md) — Transforms source code into platform-specific formats by mapping module rules to target environments. ([source](http://mpvue.com/build/index.html))
- [Platform-Specific Adapters](https://awesome-repositories.com/f/devops-infrastructure/cicd-pipeline-automation/core-build-engines/build-toolchains/platform-specific-resolution-strategies/build-time-platform-adapters/platform-specific-adapters.md) — Adapts web-based codebases to run on mobile environments by adjusting platform-specific logic. ([source](http://mpvue.com))

### Programming Languages & Runtimes

- [Event Bindings](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-text-processing/template-engines/event-bindings.md) — Maps component data and event handlers to native templates to keep the UI synchronized. ([source](http://mpvue.com/mpvue/index.html))

### Operating Systems & Systems Programming

- [Native UI Bindings](https://awesome-repositories.com/f/operating-systems-systems-programming/kernel-core-internals/system-programming-primitives/system-abstractions/native-interoperability-bindings/native-ui-bindings.md) — Wraps platform-specific UI components to enable their use within the application while maintaining standard binding syntax. ([source](http://mpvue.com/mpvue))