学习 Vue 从如何贡献代码开始

第六阶段 · 期待已久的 Vue 正式开始了 ，今天是第 1 节内容：

在学习 Vue 之前，首先需要跑通一个 demo，让页面能够显示出一个 Hello Vue。

Vue 所有的代码只有一个 js 文件，可以通过 script 标签来引入，比如：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

Vue 框架的开发者难道只在这一个文件中开发吗？

当然不是！

在 Vue 的 dist 目录下可以看到 Vue 的多个版本，比如 vue.js、vue.mini.js、vue.runtime.js，不同的 js 会给不同的环境使用。

这些都是通过构建工具进行打包生成的，源码并不是这样的。

那这些文件究竟是如何被构建的？

要想了解这一过程，通过 Contribution Guide 是最好的方式，它告诉你如果给 vue 贡献代码，也就是说它会告诉你如何搭建一个 Vue 环境，用来开发 Vue 框架。

首先需要打开 Vue 官方的 Contribution Guide。

https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md

从这个文档中会可以学到以下几点：

1、提交 PR 到合适的分支

master 分支是最新的稳定版本，你所提交的 PR（Pull Request）一定不能是主分支，你可以基于 dev 分支 创建一个新的分支，把要做的事情完成后，再合并到 dev 分支，然后提交 PR；

2、src 这个目录是源码，从这里开始工作，而 dist 是编译自动生成的代码，不要修改这里的代码；

3、在提交代码之前，确定要跑通所有的测试用例；

4、在添加新的 feature，或者修改 bug 时，提交代码是要遵循提交规范，必要的时候先提 issue，确认这是个问题后，再开始工作；

5、clone 完代码后，通过 yarn 安装项目所依赖的包，yarn 是一个包管理器，可通过 brew install yarn 安装；

6、通过 npm run dev 来监听代码的变化，并自动编译；

7、项目的目录结构：

通过上面这些步骤便可修改源码，我们给 Vue 添加一句打印语句。

1、在 vue 项目目录下执行 npm run dev：

2、在 Vue 的入口文件 index.js 添加一句话（注意文件路径）：

3、使用 dist 文件夹中编译好的代码，在浏览器中使用：

4、在浏览器中打开这个 html，在 console 中可以看到：

今天的例子告诉大家，如果运行 Vue 官方代码，修改源码，在浏览器中使用自己打包的代码，通过源码可以做更多有趣的事情。大家加油！

---

推荐阅读：

众人拾柴火焰高 · Vue虚拟实验室

第六阶段 · 期待已久的 Vue