基于Vite从0到1搭建一个Vue3相关的工程化模板项目

Vite

首先使用Vite可以快速创建一个基本的Vue项目。

创建项目

首先看下Vite文档，根据文档我们可以通过以下命令创建我们的初始模板：

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue 

Vite提供了很多模板，因为我们使用TS，所以选用vue-ts模板，然后用pnpm来管理我们的npm包。

创建项目：

pnpm create vite my-vue-app --template vue-ts 

如果没有安装pnpm，先全局安装pnpm：

npm i pnpm -g 

运行项目

项目创建好之后我们安装依赖然后运行项目。

// 安装依赖
pnpm install

// 本地运行
pnpm dev 

启动后可以看到下面这个页面：

scripts脚本

Vite帮我们创建的项目有以下三个脚本

 "scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview"}, 

其中dev是运行本地开发环境，build是编译开发环境需要的资源，preview是预览我们build出来的资源。

集成Vitest

Vitest是一个由 Vite 提供支持的极速单元测试框架，与Vite完全兼容，可以和Vite共享配置文件。

首先我们安装Vitest

pnpm install vitest -D 

然后我们在根目录下创建一个目录tests，在tests下创建一个文件index.spec.ts，在该文件下编写我们的单元测试，如下：

// index.spec.ts
import { test, expect } from "vitest";

test("First test", () => {expect(1 + 1).toBe(2);
}); 

和jest不同，vitest的test和expect默认不支持全局引用，需要在模块里自己引入，然后我们再在package.json里配置测试脚本：

 "scripts": {"test": "vitest"}, 

这时候我们在命令行执行pnpm test就会执行我们的测试用例，Vite会自动找到项目里面以test.ts或者spec.ts结尾的文件作为测试文件，然后执行它们。

比如我们把index.spec.ts文件改名为index.speccc.ts，然后再执行pnpm test，这时候控制台会输出以下错误：

告诉我们没找到要测试的文件，并且告诉我们测试文件需要符合对应的命名格式。

Vitest监听模式

Vitest默认是以监听模式启动的，在我们执行pnpm test的时候，测试启动的服务是不会退出的，它会监听我们的代码改变，如果改变了会重新执行测试程序，如果不想以监听的模式启动，只想执行单次测试，那么只需要把"test": "vitest"改为"test": "vitest run"，更多配置可查看vite文档。

Vitest测试ts模块

在使用jest测试ts文件的时候，我们需要做很多的配置来支持，使用vitest不需要做任何的配置，默认支持ts。

比如我们写了一个sum.ts文件：

// sum.ts
function sum(...numbs: number[]): number {const result = numbs.reduce((pre, current) => {return pre + current;});return result;
}

export { sum }; 

测试文件可以直接引用这个模块进行测试：

// index.spec.ts
import { test, expect } from "vitest";
import { sum } from "../src/utils/sum";

test("First test", () => {expect(1 + 1).toBe(2);
});

test("Sum function test", () => {expect(sum(1, 2, 3)).toBe(6);
}); 

执行pnpm test后可以看到测试被正确执行。

Vitest测试vue模块

在tests目录下新建一个hello.spec.ts文件，输入内容如下：

import Hello from "../src/components/HelloWorld.vue"; 

我们会发现有个报错：

这时候我们需要将tests目录下的文件加到ts的检测目录里，需要在tsconfig.json里进行如下配置：

 "include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts" // 这一行是新增加的配置], 

我们在hello.spec.ts里输入以下内容：

import Hello from "../src/components/HelloWorld.vue";
import { test, expect } from "vitest";

test("Test Hello.vue", () => {console.log(Hello);
}); 

然后执行pnpm test，是可以正确执行测试的，这说明vitest可以直接支持对Vue单文件的解析，可以实现对Vue文件的解析是因为vitest可以共用vite的配置，我们使用vite创建的项目vite.config.ts如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()]
}) 

vitest默认也使用这个配置，而这个配置里有个@vitejs/plugin-vue插件是可以支持对vue文件的解析的，所以vitest默认可以共享vite的配置及其相关功能。

Vitest配置

官方文档vitest配置

如果我们想要对Vitest做一些配置，比如我们想要像Jest一样，支持在全局使用test和expect，也就是说在我们的测试文件里不需要import { test, expect } from "vitest";就可以使用test和expect方法，这个时候可以通过配置来支持这个功能。

简单的方式我们可以直接在vite.config.ts里做配置，配置如下：

/// <reference types="vitest" />
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({test: {globals: true, },plugins: [vue()],
}); 

其中新增的代码是

/// <reference types="vitest" /> 

和

 test: {globals: true, }, 

其中第一行三斜线指令是引入vitest相关的类型配置，那么我们在下面新增test属性的时候就不会报错。

Vitest相关的配置需要添加在test属性里，这里我们添加了globals: true表示支持全局使用test、expect等方法。

如果我们不想把Vitest相关的配置写在vite.config.ts里，也可以单独写一个配置文件命名为vitest.config.ts，那么vitest会使用这个文件作为配置文件而忽略vite.config.ts。这个时候需要注意vite相关的配置也需要包含在vitest.config.ts这个文件里，比如plugins: [vue()]，因为vitest可能也需要对vue文件进行解析，具体如何配置可以看这个文档。

然后这个时候我们去掉测试文件里的import { test, expect } from "vitest";，发现还是报错了，提示找不到test方法：

这个时候我们还需要告诉编译器这个test是一个全局方法，可以直接使用，我们需要配置下tsconfig.ts，在tsconfig.ts里增加types选项，输入如下内容：

{"compilerOptions": {"types": ["vitest/globals"] // 这是新增的内容}
} 

然后我们看下vitest下有一个global.d.ts文件，里面的内容如下：

declare global {const suite: typeof import('vitest')['suite']const test: typeof import('vitest')['test']const describe: typeof import('vitest')['descr