vue源码阅读一：Vue 的初始化

[yangrenmu]

前言

使用 vue 有段时间了，对 vue 的认识还停留在使用上，即使代码写的很 6 ，也只过是个 API 工程师，这样可是不行的呀。
遂心生看源码的念头，一是可以学习大神们的代码、编程技巧，二来也可以看看 vue 的实现原理。有点滴收获也是好的。

一些准备

我看的版本是 2.6.10，是目前 (19.11) 线上的最新的版本了。
首先我们先看下 vue 源码核心的代码结构。

src
├── compiler        # 编译相关
├── core            # 核心代码
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

• compiler：主要是将 template 编译成 render 函数。包括将 template 编译成 ast 语法树、ast语法树的优化、生成 render 函数。
• core：vue 的核心代码，包括全局 API 的封装、vue 的实例化、虚拟 DOM 等。
• platforms：可以跨平台，可以配合 weex，让代码运行在 native 端。
• server：服务端渲染相关。
• sfc：把 .vue 类型的文件，解析成 js 对象。
• shared：客户端和服务端公用的一些方法。

初始化

vue 在构建时，运行的是 npm run build 指令，实际上执行的是node scripts/build.js。

"build": "node scripts/build.js",

在scripts/build.js文件中：

// 读取配置文件
let builds = require("./config").getAllBuilds()

而在配置文件scripts/config.js中，主要是像下面这样的配置，有很多。

'web-runtime-cjs-dev': {
  entry: resolve('web/entry-runtime.js'), // 构建文件的入口
  dest: resolve('dist/vue.runtime.common.dev.js'), // 构建文件的出口
  format: 'cjs', // 构建出来的文件的规范
  env: 'development', // 运行环境
  banner
},

以web-full-cjs-prod这个配置为例，它的构建初始化过程如下图所示。

接下来，我们带着问题去分析下具体的源码。
比如说 Vue 是如何将模板渲染成虚拟 DOM 的？
由于我们主要是弄明白 Vue 的实现原理，所以此部分代码是精简后的，想看全部的代码可以从 GitHub 上拉取。