Vue2.6.x源码阅读 - 1.准备工作

学习Vue源码时必要的前置操作，包括代码编译、调试，demo文件的使用

编译

• 获取Vue2.6.x源码，dev分支即为最新源码，与去年最新发布的Vue3.x做好区分。获取后进行编译并运行。

  # 获取源码
  $ git clone [e-mail]:vuejs/vue.git
  
  # 安装依赖
  $ yarn
  
  # 代码运行
  $ yarn dev

• 编译完成后，最新编译获得的Vue开发版本(development)的代码会自动生成于~/dist/vue.js。当前端项目引入这一份生成的代码并创建一个Vue实例后，那它就已经成为了一个Vue项目。

调试

• 在根目录下存在一个样例文件夹(~/examples)，供Vue的学习者阅读使用。当然也可作为源码阅读时的demo用于调试Vue源码。

• 当前~/examples目录下共有11份简单的样例工程，每个工程的入口文件index.html都引入了vue.min.js(生产环境版本)，我们可将其替换为开发版本的vue.js以对源码打断点或进行调试。

  

• 样例修改完引入的文件后，此时在开发工具中看到的依然为源码经过编译后的代码。可通过更改编译脚本配置，以及sourcemap模式重新运行代码。

  // ~/scripts/config.js
  function genConfig (name) {
    const opts = builds[name]
    const config = {
      input: opts.entry,
      external: opts.external,
      // 增加sourceMap配置
      sourceMap: true, 
      // ...
    }
  }
  // ...

  # 启用sourcemap
  $ yarn dev --sourcemap

• 完成后便可以在devtool中看到源码内容。