1.下载vue3源码
从github下载core-3.5.7版本vue源码，解压源码zip文件。
在执行打包命令npm run build时，打包报错，如下图所示。通过初始化本地仓库解决，使用命令git init和git add。如果只是使用npm run dev调试vue源代码，不需要初始化本地仓库。
2.安装依赖
vue3采用的是Monorepo + pnpm的方式来管理仓库的，通过pnpm安装依赖，首先通过pnpm -version是否安装了pnpm，如果没有安装pnpm则先安装。
pnpm install
3.开发环境打包
安装完依赖后，执行npm run dev开发环境打包。
打包后生成两个文件：
vue.global.js：以global方式打包后的vue文件;vue.global.js.map：生成的源码映射文件，这样我们调试的时候就能映射到对应真实源码中的各个文件了。
这里其实还有
npm run build命令，为啥要用npm run dev呢，主要有两个原因：
- 相比而言，
npm run dev生成的文件更少，速度更快， npm run dev支持热更新，也就是我们可以手动修改vue源码后，会重新打包，这样可以很方便的在源码中增加debugger
4.编写vue代码
在core/packages/vue/examples中创建/my/index.html，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="/packages/vue/dist/vue.global.js"></script>
<title>vue</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
const { createApp, ref, computed, onMounted } = Vue
const app = createApp({});
app.component(
'MyComponent',
{
template: '<div><div>{{ count }} - {{ doubleData }}</div><button @click="increment">增加</button></div>',
setup() {
let count = ref(1);
const doubleData = computed(() => count.value * 2);
const increment = () => count.value++;
onMounted(() => { console.log('mounted') });
return { count, doubleData, increment }; //暴露给模板
}
}
)
app.mount('#app');
</script>
</body>
</html>
选中index.html文件，点击右键弹出弹框，选择Open with Live Server，运行html。
运行结果：
5.调试
在core/packages/runtime-core/apiCreateApp.ts中添加调试debugger，在createApp方法中添加debugger并且保存，因为npm run dev是有热更新功能的，会重新打包一次，生成新的vue.global.js和vue.global.js.map文件，生成新的vue.global.js包含了有调试断点代码。
打开谷歌浏览器调试面板，运行
index.html，浏览器会停在createApp中添加的断点的位置。
注意到，我们在html中引入的是打包后的vue.global.js文件，浏览器中调试的代码在真实源代码的apiCreateApp.ts中。
源码映射文件vue.global.js.map做了映射。在使用esbuild打包的时候，在core/scripts/dev.js中配置使用sourcemap，如下图所示：
参考文献：
