Vue2 源码学习笔记-01-寻找入口

古语云：眼过千遍不如手过一遍。边调试边学习代码，进步更快。

预备

拉取官方代码

1	git clone https://github.com/vuejs/vue.git

安装依赖

打开 vue 目录，使用

yarn

或

npm i

安装依赖。

从 package.json 开始

package.json 乃项目之根本，此文件涵盖项目的配置信息及其依赖包。

在 package.json 中，本次学习主要使用 script 字段中的 dev 命令:

"scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
 		...
 }

此命令使用 rollup 在 /dist 目录打包输出完整版的 vue.js。因打包后的 vue.js 时压缩过的，故而运行此命令前，需在命令中加上参数 --sourcemap，可同时生成名为 vue.js.map 的映射文件，以便调试时看到原始代码。

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

寻找入口

在 Vue 项目中，首先会使用 new Vue() 创建 Vue 的实例，因此可直接编写案例打断点来找到 Vue 的构造函数。

另一种方法是通过 rollup 配置文件一步步找寻，但打断点更直截了当。

案例可以放在 /examples 目录下，便于集中管理：

<!-- /examples/test/init.html -->

<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>寻找入口</title>
  </head>
  <body>
    <div id="app">
      {{msg}}
    </div>

    <script src="../dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data() {
          return {
            msg: "hello vue"
          }
        }
      })
    </script>
  </body>
</html>