👏🏻欢迎来到 CoderStan 的手写 Mini-Vue3 专栏，和我一起✍🏻实现自己的 Mini-Vue3。这是专栏中的第一篇文章，通过这篇文章，你将了解 Vue3 的源码结构和 Mini-Vue3 的项目初始化过程。（🙏🏻感谢阿崔cxr 的 mini-vue）

有不足的地方欢迎大家评论留下意见或建议，如果觉得还不错还请👍🏻支持一下，想看其他部分的文章可以关注我或者关注我的手写 Mini-Vue3专栏，想看逐行注释的源码欢迎访问 GitHub 仓库，也请⭐支持一下。

1. Vue3 源码结构

首先对 Vue3 源码结构进行说明。（查看 Vue3 源码）

1.1 Monorepo

Vue3 的源码采用 Monorepo 方式进行管理。

Monorepo 是管理项目代码的一种方式，指的是在一个项目仓库（repo）中管理多个模块/包（package）。

优点：

在一个项目仓库中维护多个模块
方便版本管理和依赖管理，便于模块间的引用和调用

1.2 Vue3 项目结构

Vue3 源码结构

各模块作用
- reactivity：响应式系统
- runtime-core：与平台无关的运行时核心
- runtime-dom：针对浏览器的运行时
- runtime-test：用于测试
- server-renderer：用于服务端渲染
- compiler-core：与平台无关的编译器核心
- compiler-dom：针对浏览器的编译模块
- compiler-ssr：针对服务端渲染的编译模块
- template-explorer：用于调试编译器输出的开发工具
- shared：多个模块之间共享的内容
- vue：完整版本，包括运行时和编译器

各模块间关系图

                          +-------------------+
                          |                   |
                          | @vue/compiler-sfc |
                          |                   |
                          +-----+--------+----+
                                |        |
                                v        v
              +-------------------+    +--------------------+
              |                   |    |                    |
     +------->| @vue/compiler-dom +--->| @vue/compiler-core |
     |        |                   |    |                    |
+----+----+   +-------------------+    +--------------------+
|         |
|   vue   |
|         |
+----+----+   +------------------+    +-------------------+    +-----------------+
     |        |                  |    |                   |    |                 |
     +------->| @vue/runtime-dom +--->| @vue/runtime-core +--->| @vue/reactivity |
              |                  |    |                   |    |                 |
              +------------------+    +-------------------+    +-----------------+

2. 初始化项目

在项目文件夹下执行yarn init -y命令生成package.json文件
执行yarn add typescript jest @types/jest -D命令安装 typescript、jest 和 @types/jest

执行tsc --init命令生成tsconfig.json文件，并修改以下几项：

"lib": ["DOM", "ES6"],     // 引入 DOM 和 ES6
"noImplicitAny": false,    // 允许在表达式和声明中不指定类型，使用隐含的 any
"types": ["jest"],         // 将 jest 的类型声明文件添加到编译中
"downlevelIteration": true // 开启 for-of 对可迭代对象的支持

在package.json中配置scripts
```
"scripts": {
  "test": "jest"
}
```
根据 Jest 官网进行配置，以在 Jest 中使用 Babel 和 TypeScript：执行yarn add -D babel-jest @babel/core @babel/preset-env @babel/preset-typescript安装 babel-jest、@babel/core、@babel/preset-env 和 @babel/preset-typescript；创建babel.config.js文件，并写入以下内容：
```
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript'
  ]
}
```
执行yarn add ts-jest -D命令安装 ts-jest，之后执行ts-jest命令生成jest.config.js文件
创建src文件夹用于保存项目的代码

总结

至此，就完成了 Mini-Vue3 的初始化，希望这篇文章能够让你有所收获，如果觉得写的不错还请👍🏻支持一下。

【手写 Mini-Vue3】了解 Vue3 源码结构 + 初始化项目

1. Vue3 源码结构

1.1 Monorepo

1.2 Vue3 项目结构

2. 初始化项目

总结