本系列教程参考cuixiaorui/mini-vue: 实现最简 vue3 模型( Help you learn more efficiently vue3 source code ) (github.com) 感谢cxr崔老师的开源

本系列教程参考 《Vue.js设计与实现》（霍春阳著），感谢霍春阳老师

本系列教程参考 Vue3 源码，Vue3中提供了大量的单元测试用例，感谢尤大

俗话说得好，只有自己动手做出来的东西，才能说自己真正学会了，本文章将是一个系列教程的开头，将vue3框架的核心逻辑抽丝剥茧，一步一步讲述出来，项目代码已经开源，欢迎各位小伙伴star，开发中的每一个里程碑，都对应着项目中的某笔提交，方便大家参考。

仓库地址：smallnine9/mini-vue (github.com)

环境搭建

本项目采取的开发方式是TDD（test drive development）的开发方式

1、安装支持typescript语法的jest测试框架

npm install --save-dev jest

对应提交：初始化项目,集成jest单元测试框架 · smallnine9/mini-vue@940451b (github.com)

2、安装支持typescript语法的rollup打包工具

//首先安装rollup
npm install rollup --save-dev


//然后要安装rollup插件 @rollup/plugin-typescript 来支持typescript
//@rollup/plugin-typescript 依赖于typescript和tslib这两个库

对应提交：[chore]init project: using rollup and typescript plugin · smallnine9/mini-vue@8d49d1c (github.com)

常见问题：
使用rollup打包时报错：

Error: Node tried to load your configuration file as CommonJS even though it is likely an ES module

参考资料：
[1]TypeScript: Documentation - Integrating with Build Tools (typescriptlang.org)

[2]jest-使用typescript

3、添加demo测试html文件，引入打包后的mini-vue框架文件，注意，打包方式要修改为umd以便浏览器能够直接引用

对应提交：