vue3出来也好久了，一直没时间来系统的学习，都是凭着几年前对vue2的那点基础来写项目，说句实话，options api写久了，突然接触composition api着实有些不习惯，但看在vue3大势所驱，还是决定沉下心来仔细学习一下vue3，本系列教程（日志）都是按照视频教程的步骤，加上自己的一些理解进行编写的，其实就是起到一个备忘的作用。
初始化目录
首先，创建好项目所需的目录以及package.json。
mkdir mini-vue
yarn init -y
Jest单元测试
创建如下目录结构：
集成typescript
安装typescript，全局或者dev环境。
yarn add typescript --dev
初始化tsconfig.json文件。
tsc --init
执行完成之后便会在根目录得到一个tsconfig.json文件，这就是typescript编译的配置文件。
为了让typescript支持jest，向tsconfig.json添加如下配置项：
{
"types": ["jest"],
"noImplicitAny": false
}
安装Jest
安装所需依赖
yarn add jest @types/jest --dev
添加scripts
打开package.json，添加scripts,如下所示：
{
"scripts": {
"test": "jest"
}
}
添加测试用例
创建 src/reactivity/tests/index.spec.ts
it('init', () => {
expect(true).toBe(true)
})
测试
执行如下命令：
yarn test
到这里，简单的单元测试就配置好了。
配置babel及typescript
jest默认的测试语法是commonjs，为了编写测试用例更为简单顺手，接下来需要让其支持esm语法，以及对typescript文件的支持。
yarn add babel-jest @babel/core @babel/preset-env @babel/preset-typescript --dev
创建babel.config.js
module.exports = {
presets: [
["@babel/preset-env", {
targets: {
node: "current"
}
}],
"@babel/preset-typescript"
]
}
修改index.spec.ts如下：
import {add} from '../index'
it('init', () => {
expect(add(1, 1)).toBe(2)
})
创建 src/reactivity/index.ts。
export function add (a, b) {
return a + b;
}
再次测试
到这一步，基本的单元测试环境就已经搭建完成。
