Vue3源码解析之入门

Vue3源码分析之入门

本文主要是针对想自学Vue3之类的框架源码的，却不知道如何上手的小伙伴们~

• Vue3源码GitHub地址
• Vue3源码克隆路径 ：[email protected]:vuejs/core.git

克隆Vue3源码到本地后，直接使用main分支即可

一、Vue3项目的管理方式

Monorepo : 管理代码的一个方式，指在一个项目仓库中管理多个包

Monorepo优点：

• 一个仓库可以维护多个模块，不用到处找仓库；
• 方便版本管理和依赖管理

Monorepo 缺点：

• 仓库体积变大

二、Vue3源码的包的作用

1. reactivity : 响应式系统
2. runtime-core：与平台无关的运行时核心、
3. runtime-dom：针对浏览器运行时。包括DOM API、属性、事件处理等
4. runtime-test：用于测试
5. server-renderer ： 用于服务器端渲染
6. compiler-core：与平台无关的编译器核心
7. compiler-dom：针对浏览器的编译模块
8. compiler-ssr：针对服务器端的编译模块
9. compiler-sfc：针对单文件解析
10. size-check：用来测试代码体积
11. template-explorer：用于调试编译器输出的开发工具
12. shared ： 多个包之间的共享内容
13. vue：完整版本。包括运行时和编译器

三、安装依赖

这里需要安装Vue3源码的相关依赖包

• typescript : 支持ts
• rollup ： 打包工具 【因为这里只是针对js，ts，不针对图片等其他资源，所以不用webpack】
• rollup-plugin-typescript2 : rollup和ts的关联桥梁
• @rollup/plugin-node-resolve : 解析node第三方模块
• @rollup/plugin-json : 支持import引入json
• execa ：开启node子进程方便执行打包命令 【为了在一个项目中，一条命令多个打包】

四、注意点

使用Monorepo 管理多个包时，需要使用yarn来进行项目初始化 和 安装包

继续学习之Vue3打包原理