初心
VUE3 出来已经一年多了，我们公司使用Vue3 开发的项目也有好六七个了。
用完之后，只能说真香，使用Vue3开发完之后，感觉再也回不去了。
前段时间在掘金上面看到崔大写了一个 mini-vue3 的项目，把很多 VUE3 的边界条件处理，兼容等先去掉。我自己去看了一下代码，感觉这个项目真的是太棒了。
强烈建议大家把项目 down 下来，运行一下，看VUE3 的整体运行逻辑。
光看没有用，可能学习的东西还不够，我接下来打算模仿崔大的项目，自己也写一个 mini-vue3的。
并且把写过程中的一些思考，给记录下来。
创建项目
首先通过命令 mpm init -y 初始化我们的项目
创建目录结构
首先创建 src，然后在里面创建 reactivity 目录这个是用来放置我们的 reactity 模块的。
在reactivity目录下面创建一个 index.ts 的文件，这个是我们的模块主入口。
在文件里面写上
export function add(a, b) {
return a * b;
}
在reactivity目录创建 test 目录，这个是用来放置我们的测试用例的。
我们tests 目录下面创建一个文件index.spec.ts这个是和我们刚刚模块主入口的是对应上的，用来测试它的。
在文件里面写上
import { add } from "../index";
it("init", () => {
expect(add(1, 1)).toBe(1);
});
加上 jest 和 ts
首先安装 ts ，npm i typesrcipt -D 这个命令就可以安装上了。 然后 安装 jest-ts 这个和 ts 配合的库 npm i @types/jest -D
这个时候可以看到我们生成的 tsconfig.json 找到 types 字段 ，加上["jest"]就可以了。找到"noImplicitAny"设置为 false。
这时候应该安装我们的 jest 了
命令如下：npm i jest -D
加上 babel
因为我们的包默认是使用common.js 的规范，我们现在是es 规范。所以我们需要使用 babel转一下。
npm i @babel/preset-env -D npm i @babel/core -D npm i @types/jest -D
然后在安装一下转换ts 的
npm i @babel/preset-typescript -D
然后我们创建 babel.config.js 文件
输入
module.exports = {
presets: [
["@babel/preset-env", { targets: { node: "current" } }],
"@babel/preset-typescript",
],
};
这是告诉 babel安装我们当前的版本进行转换，使用 ts 进行转换。
运行
在 npm 的srcpit 模块加上 "test": "jest" ，这样子输入 npm run test 就可以运行起来啦，可以看到，我们的测试用例通过了。
结尾
项目已经放到我的 GitHub 上面了，欢迎大家去start。
我的项目地址：github.com/moyuhaokan/…
再次推荐崔大的项目：github.com/cuixiaorui/…
