目录结构

  • benchmarks vue的各项性能测试页面
  • build vue构建目录，用于将src代码输出至dist
    • build.js 构建脚本，依赖于config.js
  • dist vue代码输出路径
  • examples 样例展示
  • flow flow目录，用于代码可维护性和常规类型检测
    • 比如function numVowels(word: string): number { return word.length;} 检测函数输入和输出类型，官网地址
  • src 主体代码
  • test 各类测试目录
  • types typescript目录，主要用于代码可维护性
  • package.json
    • karma 用于单元测试
    • de-indent 删除多余的空格
    • he HTML实体的编码和解码
    • rollup 项目打包工具

src目录结构

  • entries 构建dist和packages目录下的文件的脚本文件，具体配置在build/config.js中
    • web-runtime.js -> dist/vue.common.js
    • web-runtime-with-compiler.js -> dist/vue.js & vue.min.js
    • web-compiler.js -> packages/vue-template-compiler/build.js
    • web-server-render.js -> packages/vue-server-render/build.js
    • 备注：其中web/compiler/index 中 web的路径在build/alias.js中定义，如：web/compiler/index的实际路径为src/platforms/web/compiler/index
  • sfc
    • parser.js 解析单个*.vue文件
  • shared
    • util.js 各类工具函数

从vue.js的生成看vue.js

通常，项目的最终文件在dist下，在package.json中的命令是npm build，所以，通过build命令看到node build/build.js，vue的生成通过build.js，build.js 依赖于config.js， 而在config.js中，我们可以看到vue.js的生成的脚本：src/entries/web-runtime-with-compiler.js

其他笔记：Vue.js 源码学习笔记 by 勾三股四

思维导图链接: