从0开始调试源码（以vue3为例）研究源码最好的方式还是自己本地运行起来打着断点看，都说授人以鱼不如授人以渔，所以源码调

一、生成源码

研究源码最好的方式还是自己本地运行起来打着断点看，都说授人以鱼不如授人以渔，所以源码调试的方法可能比之后的源码分析更加重要。

1. clone项目

git clone git@github.com:vuejs/vue-next.git

2.安装依赖

yarn --ignore-scripts

3.修改配置

修改package.json中的scripts下dev的配置，后边加上--sourcemap

"dev": "node scripts/dev.js",
// 改为
"dev": "node scripts/dev.js --sourcemap",

4.编译

yarn run dev

当终端出现waiting for changes...意为着编译成功了，可以ctrl + c结束进程查看源码了。

这里我们对比下打包前与打包后项目发生了哪些变化以及为什么要打包，首先看下打包前（github截图），可以看到examples下面的文件是引用了一个dist文件夹下面的文件，此时dist文件还没有生成

打包后dist文件已经生成了，此时example下的文件就可以直接打开查看效果了。

5.debugger

上一步编译好的文件已经支持静态引用vue3了，所以我们直接在根目录下package/vue/examples目录下建立一个demo1.html的文件，引用../dist/vue.global.js文件且初始化一下就可以使用vue3了，代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{foo}}
        <lee/>
    </div>
    <script src="../dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    foo: 'Steven'
                }
            }
        })
        .component('lee', {
            template:'<p> enjoy it </p>'
        })
        .mount('#app')
    </script>
</body>
</html>