Vue源码学习(一)

今天开始学习Vue源码,顺便不定时记录下
从github上clone源码(地址为:https://github.com/vuejs/vue)
此时版本为2.6.10,可以看到尤大大6天前的提交

参照以下贡献规则文档:https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#project-structure,对项目结构进行初步理解

项目结构

项目结构

• scripts：包含与构建相关的脚本和配置文件。一般不需要动它们。但是熟悉以下js会很有帮助：

  • scripts/alias.js：模块导入别名用于所有源代码和测试。

  • scripts/config.js：包含在中找到的所有文件的构建配置dist/。如果要查找dist文件的条目源文件，请查阅此文件。

• dist：包含构建后的文件的输出目录。请注意，此目录仅在构建时更新; 它们没有反映开发分支的最新变化。

  有关dist文件的更多详细信息，请参阅dist / README.md。

• flow：包含类型声明。这些声明是全局加载的，您将在普通源代码中看到它们在类型注释中使用。

• packages：contains vue-server-renderer和vue-template-compiler，它们作为单独的NPM包分发。它们是从源代码自动生成的，并且始终与主程序vue包具有相同的版本。

• test：包含所有测试文件。unit测试用Jasmine编写并与Karma一起运行。e2e测试是为Nightwatch.js编写并运行的。

• src：包含源代码,使用的事ES6

  • compiler：编译器代码的存放目录，将 template 编译为 render 函数

  • core：包含通用的，与平台无关的运行时代码。

    • observer：反应系统，包含数据观测的核心代码

    • vdom：包含虚拟DOM创建(creation)和打补丁(patching)的代码

    • instance：包含Vue构造函数设计相关的代码

    • global-api：包含给Vue构造函数挂载全局方法(静态方法)或属性的代码

    • components：包含抽象出来的通用组件

  • server：包含服务端渲染(server-side rendering)的相关代码

  • platforms：包含平台特有的相关代码

  • sfc：包含单文件组件(.vue文件)的解析逻辑，用于vue-template-compiler包

  • shared：包含整个代码库通用的代码

  • types：包含TypeScript类型定义

    • test：包含类型定义测试

常用的NPM指令

# watch and auto re-build dist/vue.js
$ npm run dev

# watch and auto re-run unit tests in Chrome
$ npm run dev:test

# build all dist files, including npm packages
$ npm run build

# run the full test suite, include linting/type checking
$ npm test

有了大致的了解之后,

我们安装项目所依赖的包

npm install

等待下载完所有包之后,

执行 

npm run dev

就可以在dist中看到生成的vue.js文件