搭建调试环境
导语
vue3.0已经推出有一段时间了，相信身边的小伙伴们也应该或多或少了解了其特性和用法，但要成为真正的developer不能止步于此，借助别人说的一句话：“顶级的赛车手不仅仅会开车，他一定是对车有更深的理解的！”，加深理解，提高水平的最好途径就是学习源码，所以可见源码学习的必要性。从本文开始，将一步步学习和探讨vue3.0的源码，在此立一个 flag，争取成为 vue3.0 contributor!
一.准备工作
1. 下载源码
vue3.0 github地址： vue-next
下载源码：
$git clone https://github.com/vuejs/vue-next
2. 安装依赖
这里推荐使用 pnpm 进行安装，如果没有 pnpm 的可以通过 npm 安装一下 pnpm
$npm install pnpm -g
开始安装依赖:
$cd vue-next
$pnpm install
3.打包
使用 dev 命令打包:
修改一下在 package.json 里面，dev 命令的执行参数，后面加上 --sourcemap，这样方便我们在代码调试的时候看到源码。
"dev": "node scripts/dev.js --sourcemap",
执行打包
$pnpm run dev
当看到命令行输出 [2022-01-13 00:54:12] waiting for changes...的时候说明我们已经打包完毕，同时进入 packages/vue/dist/ 文件夹下，你会看到多了2个文件： vue.global.js 和 vue.global.js.map
4. 启动服务
$pnpm run serve
通过以上命令可以为我们的项目启动一个 http 服务
启动成功，通过浏览器访问上图地址。
至此，调试前的准备工作就绪！
二. 寻找源码入口
其实我们阅读源码最关键也是比较头疼的事就是寻找一个切入点，归根到底的问题就是 “我们从哪儿开始看？”
在2.X版本中创建一个vue 实例是通过 new Vue()来实现的，到了3.X中则是通过使用createApp这个 API返回一个应用实例,所以我们可以先从 createApp这个函数开始看起。
1.选择 demo 文件进行调试
在服务启动的环境下，我们通过浏览器随便进入到一个 demo 里面，这里我选择的是
vue-next/ packages/ vue/ examples/ classic/grid.html
打开浏览器调试工具，在 source 下找到我们的打开的文件，并且在 createApp 上打上断点
刷新页面，如果页面走到了断点说明我们的操作都是没有问题的，将鼠标移动到 createApp方法上，点击进入 index.ts
进入后发现，我们就可以看到 createApp 的实现了！
至此，我们找到了源码的入口，也就是我们准备开始阅读源码的切入点了--- runtime-com/src/index.ts 下的 createApp函数。
总结
- 下载源码
- 安装依赖
- 打包
- 启动服务
- 通过demo找到文件入口
