【源码学习】Vue源码的敲门砖(目录结构)

声明

🔊 本文是开始学习 Vue 源码的第一篇笔记，当前的版本是 2.6.14 。

源码结构

目录结构

在 github 上下载了源码，是一个叫vue-dev 的文件夹，展开以后 一级目录结构 是这样的。

 

 

 Vue 源码各个目录的详细介绍

 

 

 

.circleci
CircleCI 是一个持续集成/持续部署的服务。 👉官网

持续集成 指的是，当代码有变更时，立即进行构建和测试，反馈运行结果，我们可以根据测试结果，确定新代码是否可以和原有代码正确的集成在一起。

持续部署 指的是，当代码有变更时，自动进行测试和构建，如果一切顺利则自动部署到服务器上。

要使用 CircleCI，首先在项目 circleciTest 目录下创建一个名为 .circleci 的文件夹，并新建 config.yml 文件。

.github
项目相关的说明文档，也就是说你如果想开发这个项目，那么请务必看完这些开发文档，按照开发文档来开发。
这个对于我来说是完全用不到的。

.benchmarks

├── big-table
├── dbmon
├── reorder-list
├── ssr
├── svg
└── uptime

Vue 的一些跑分 demo ，如大数据量的 table 或者渲染大量 SVG 。

如该目录下的 big-table 目录，就是用于测试大量的 table 渲染的。

 

 

 svg 目录就是用来测试 SVG 的。

.dist

├── README.md
├── vue.common.dev.js
├── vue.common.js
├── vue.common.prod.js
├── vue.esm.browser.js
├── vue.esm.browser.min.js
├── vue.esm.js
├── vue.js
├── vue.min.js
├── vue.runtime.common.dev.js
├── vue.runtime.common.js
├── vue.runtime.common.prod.js
├── vue.runtime.esm.js
├── vue.runtime.js
└── vue.runtime.min.js

构建好的不同 Vue 版本，包括了 UMD、CommonJS、ES 生产和开发包，以及完整版，压缩版本、只包含运行时的版本。其实就是作为 rollup 打包的出口。

.examples

├── commits
├── elastic-header
├── firebase
├── grid
├── markdown
├── modal
├── move-animations
├── select2
├── svg
├── todomvc
└── tree

一些用 vue 写的 demo

打开 select2 里面的 index.html 看一下

 

 

 

.flow

├── compiler.js
├── component.js
├── global-api.js
├── modules.js
├── options.js
├── ssr.js
├── vnode.js
└── weex.js

vue 使用了 flow 来做静态类型检查，这个目录里主要是 flow 的类型声明文件。

.packages

├── vue-server-renderer
├── vue-template-compiler
├── weex-template-compiler
└── weex-vue-framework

这里存放的是 服务端渲染 和 模板编译器 以及 weex构建 相关的 npm 包，是提供给不同场景使用的，这些包都可以在 npm 库里搜索到，可以单独引入，具体的用途要具体场景具体分析。

.scripts

├── alias.js
├── build.js
├── config.js
├── feature-flags.js
├── gen-release-note.js
├── get-weex-version.js
├── git-hooks
├── release-weex.sh
├── release.sh
└── verify-commit-msg.js

存放一些 npm 脚本的配置文件，结合 webpack，rollup 等工具进行编译，测试，构建等操作。

git-hooks 目录是用于 git-commit 的，有一些提交规则，如果这些规则没有通过，则会阻止提交并抛出提交错误，比如常见的 eslint 校验规则，当 eslint 校验没通过的时候，阻止提交。

alias.js 是模块导入所有源代码和测试中使用的别名，其功能等同于 webpack.config.js 中 resolve 配置项的 alias 。

.src

vue 的主要源码都在这个目录下，下面重点介绍

.test

├── e2e
├── helpers
├── ssr
├── unit
└── weex

.types

├── index.d.ts
├── options.d.ts
├── plugin.d.ts
├── test
├── tsconfig.json
├── typings.json
├── umd.d.ts
├── vnode.d.ts
└── vue.d.ts

vue 新版本支持 TypeScript ，这里存放的都是 TypeScript 类型声明文件。

.babelrc.js
babel 配置文件 👉官网

es6 特性浏览器还没有全部支持，但是使用 es6 是大势所趋，所以 babel 应运而生，用来将 es6 代码转换成浏览器能够识别的代码。

.editorconfig
针对编辑器的编码风格配置的文件 👉官网

不同的开发人员，不同的编辑器，有不同的编码风格，而 EditorConfig 就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具，而 .editorconfig 正是它的默认配置文件。

.eslintrc.js
eslint 配置文件 👉官网

ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。 .eslintrc.js 正是它的默认配置文件。

.eslintignore
忽略项目中某个文件夹的 eslint 代码规范。

.flowconfig
flow 的配置文件 👉官网

上文说过是用来做静态类型检查的。.flowconfig 正是它的默认配置文件。

.gitignore
这个文件的作用就是告诉 Git 哪些文件不需要添加到版本管理中。

BACKERS.md
支持者

LICENSE
开源协议

package.json
Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块的描述文件，被称为 package.json。

README.md
项目介绍

yarn.lock
每个 yarn 安装都会生成一个 yarn.lock 文件，而且它是默认创建的。除了常规信息之外，yarn.lock 文件还包含要安装的内容的校验和，以确保使用的库的版本相同。

主要代码
vue 的主要源码都在 src 这个目录下，而且源码根据不同的模块和功能都划分好了

├── compiler
├── core
├── platforms
├── server
├── sfc
└── shared

compiler

目录包含 Vue 所有编译相关的代码，包括把模板解析成 AST语法树、及 AST语法树优化、代码生成 等功能。

├── codegen // 把AST转换成Render函数
├── directives // 生成 Render 函数之前需要处理的指令
└── parser // 解析模板成AST

core

包含了 Vue 的核心代码，包括 内置组件，全局API 封装，Vue 实例化，观察者，虚拟DOM, 工具函数等等

├── components // 组件相关的属性，目前这里只有keep-alive组件
├── global-api // Vue的全局api, 比如 Vue.extend、Vue.mixin
├── instance // 实例化相关的。比如 生命周期、事件等
├── observer// Vue响应式数据相关的目录
├── util // Vue相关的工具方法目录
├── vdom // 虚拟dom相关的内容
├── config.js
└── index.js

platforms

Vue 是一个跨平台的 MVVM 框架，它可以跑在 web 上，可以跑在 weex 上， 跑在 native 客户端上，platform 是 Vue 的入口，分别打包成运行在 web 上和 weex 上。

├── web
    ├── compiler // web端编译器相关的代码，用来编译模板成Render函数
    ├── runtime // web端运行时相关的代码，用来创建Vue实列等操作
    ├── server // 服务器端渲染相关的
    └── util// 相关工具类
└── weex  // ...同web 没有server目录
    

server
Vue2.x 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。

sfc
转换单文件组件，通常我们开发 Vue 都会借助 webpack 构建，然后通过 .vue 单文件来编写组件。该目录下的代码逻辑会把 .vue 文件内容解析成一个 javascript 的对象。

shared
全局共享的一些方法和常量，这里定义的工具方法都是会被浏览器端的 Vue.js 和 服务端的 Vue.js 所共享的。

运行源码
在 github 上下载👉👉 源码

进入到 vue-dev 目录 运行命令 npm i

这个时候如果报了下面这个错误，按照这篇文章的步骤就可解决

👉👉vue2.6.11版本源码运行报错问题处理

修改 package.json

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

然后运行命令 npm run serve 就会在 dist 目录下 生成 vue.js.map 文件，用来进行调试。

参考

vue源码学习(一)——目录结构

人人都能懂的Vue源码系列(一)—Vue源码目录结构

vue2.6.11版本源码运行报错问题处理

精通 Vue 技术栈的源码原理