MPVUE 贡献者指南 1.0

[anchengjian]

本文是为有意愿为 MPVUE 贡献代码的开发者们而写的，可能并不会告诉你如何安装和使用等基础知识。

必要的准备工作

开始之前，我期望你能具备这样一些基础知识经验：

• Vue.js 的开发（贡献）经验；
• 微信小程序（泛小程序） 的开发经验；
• Mpvue 的开发经验；
• WebPack 等现代前端工程构建配置经验。

哈哈，这不是招聘 JD，不过这确实也是开发 Mpvue 所必须的基础技能。

如果仅仅有一点点 Vue.js 的开发使用经验，可能还不不够，至少需要明白其核心原理和相关的基建构建等，不过也不用太担心，美团的同学们做了一件很不错的事情：逐行级别的源码分析 Vue.js，嫌文章太长的话，还是直接去看源代码吧。

无论如何只要拥有坚韧的好奇心，那么你就可以一路 debug 进去，从而了解到这整件事情的全貌。加油！

开始

Mpvue 是一个完成的工程体系，从初始化模版工程到实际开发调试和最终的打包上线都有基建工具，时间和精力问题，暂不能全部讲解出来，下面只讲讲最最主要的部分 https://github.com/Meituan-Dianping/mpvue 。

工程结构

主要的部分捋开说一说：

.
├── BACKERS.md
├── LICENSE
├── README.md
├── benchmarks
├── build                              // 构建相关代码
├── circle.yml
├── dist
├── examples
├── flow
├── package.json
├── packages                           // 发布到 npm 的代码
│   ├── mpvue
│   ├── mpvue-template-compiler
│   └── ...
├── src
│   ├── compiler                       // core compiler 未改动
│   ├── core                           // core runtime 无逻辑改动
│   ├── platforms                      // 平台相关的适配代码
│   │   ├── mp                         // 主要改动的地方
│   │   │   ├── compiler
│   │   │   ├── runtime
│   │   │   ├── util
│   │   │   ├── entry-compiler.js      // compiler 的入口文件
│   │   │   ├── entry-runtime.js       // runtime 的入口文件
│   │   │   └── join-code-in-build.js  // 构建 runtime 时候硬拼接的代码
│   │   └── ...
│   ├── server
│   ├── sfc
│   └── shared
├── test
│   ├── mp
│   └── ...
├── types
└── yarn.lock

思路

其实要理解 Mpvue，只需要能明白这么几个关键点就行了。

• .vue 文件是如何变成 wxml wxss js 文件的？
• vue 组件是如何通信和映射生命周期的？
• vue 的 slot 能力是如何实现的？
• mpvue 是如何把 vue 的数据同步到小程序的 AppData 的？

以这几个问题为抓手，直接进入我们开发用的 Demo 项目进行探究。

Demo 项目书写中...

其他

有了这些讲解，基本就不用再多说了，原则就是干，遇到问题就上，没有什么比真正动手来的更好。