Vue3 源码解析 03--Vue3 目录结构

前言

前面磨磨唧唧的一大堆，现在终于要开始我们主要的任务了。在解析 Vue3 源码之前，我们需要先分析一下 Vue3 的目录结构和例行的修改一下 package.json。

Vue3 新添加内容

再次重复一下之前的内容，Vue3 这次新增的内容。

• 主要是 Proxy 代替了 defineProperty，数据响应式的功能更加强大了
• TS 代替了之前的 JS(静态类型语言的胜利么 🤔)
• CompositionAPI 代替了 OptionsAPI
• 暴露更多的内部方法，更加开发的 API 支持
• Vite 工具的支持
• 优化了内部结构，和打包后的体积问题

修改 package.json

和之前一样，想要阅读 Vue3 的源码需要修改一下$\color{#ff3030}{package.json}$

    "dev": "node scripts/dev.js"

修改为：

    "dev": "node scripts/dev.js --sourcemap --environment TARGET:web-full-dev"

目录结构

Vue 的目录结构比较清晰：

• package：源码目录，Vue3 的源码存放在这里面
• scripts：Vue3 的脚本文件，用来存放配置文件，进行编译和打包
• test-tds：测试文件

package

Vue3 的源码存放在 package 文件夹下面：

• compiler-core:编译
• compiler-dom:dom 相关代码
• compiler-sfc:单文件编译部分
• compiler-ssr:服务端渲染编译相关
• reactivity:Vue3 响应式部分,Proxy 就在这里面
• runtime-core:运行时与创建实例相关代码
• runtime-dom:运行时与 dom 相关代码
• runtime-test:内部测试代码(如果大家想详细了解各部分功能，可以参考一下这个文件夹)
• server-renderer:服务端渲染
• shared:Vue3 工具库，通用方法
• size-check:Vue3 简单的一个应用，用来测试代码体积
• template-explorer:内部使用的编译文件浏览工具
• vue:Vue3 主入口文件

总结

Vue3 的目录结构还是特别清晰的，这里简单标记了一下各文件夹的功能和结构，后面文章开始详细解析 Vue3 的源码啦