Vue3 source code structure, v3.1.1 as an example, directory structure is as follows:

├─ Packages ├─ Scripts ├─ test- DTS // TypeScript Declaration file ├─.eslintrc.js // EsLint Configuration file ├─.gitignore // Git File ├─.prettierrc // Formatting configuration file ├─ api-Extractor. json // TypeScript API Extraction and analysis tool ├─ Changelog.md // ├── LICENSE ├── package.json ├─ readme.md ├─ rollup.config.js // Rollup ├─ tsconfig.json // TypeScript ├─ yarn.lockCopy the code

The packages folder is Vue3’s source directory. The detailed directory structure is as follows:

├─ compiler-core // ├─ Compiler-SFC // Vue Single file component (.vue) Implementation ├─ Compiler-SSR // Compiler Server Rendering ├── Compiler-SFC // Vue single file component (.vue) Implementation ├─ compiler-SSR // Compiler Server Rendering ├── ├─ Run-time Core ├─ Run-time Dom ├─ Run-time Test ├─ Server-renderer ├─ Size - Check ├─ Template-Explorer ├─ Vue - Compat ├─ Global.d.ts // Global TS declarationCopy the code

There are five core modules in Packages:

  • compiler-core
  • compiler-dom
  • runtime-core
  • runtime-dom
  • reactivity

Compiler: The time when written source code is compiled into an executable file runtime: the process of opening and running a program until it is closed after being compiled

Vue3 source code architecture