Vue 2.6 源码分析之旅【0】 —— 调试环境搭建以前很多 vue 原理相关的知识，比如响应式，比如虚拟 dom，比

以前很多 vue 原理相关的知识，比如响应式，比如虚拟 dom，比如 diff 算法......但都没有真正深入的看过源码，正因为此，这些知识宛如空中楼阁，空洞且并没有什么说服力。所以今天开始对 vue 进行粗浅的源码分析。

要分析源码，自然首先要搭建调试环境，这样才可以通过编写测试 demo 快速定位到我们想要分析的位置。

那么开始吧！

Step 1 - 克隆源码

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

Step 2 - 安装环境

npm install // 安装到 phantom 时就可以终止了
npm install rollup -g

Step 3 - 修改运行参数

文件：root/pakage.json

- "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
+ "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"

Step 4 - 编译源码

npm run dev

Step 5 - 测试调试流程

到这里，如果在 root/dist 目录下新生成了一个 vue.js.map 文件，则说明应该已经成功建立了 map 映射关系，这里在 root/examples/test-demo 下建立一个测试文件：

<!DOCTYPE html>
<html>

<head>
    <script src="../../dist/vue.js"></script>
</head>

<body>
    <div id="demo">
        <h1>Hello {{ name }}</h1>
    </div>
    <script>
     const app = new Vue({
        el: '#demo',
        data: { name: 'vue' },
      })
    </script>
</body>
</html>

打开这个页面，在浏览器中进行调试，将断点定在创建实例的这一行：

成功断下来之后，按 f11 进入函数，然后在点击鼠标右键，选择：Reveal in sidebar，如果左侧侧边栏中出现 vue 的目录结构，则说明调试环境已经搭建成功：

结语

更佳阅读体验：Vue 2.6 源码分析之旅 - 零：调试环境搭建