1、创建目录
mkdir xxx
cd xxx2、使用pnpm初始化包配置
pnpm init3、安装Vite依赖
pnpm i vite@"3.0.7" -D4、根目录创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3UI</title>
</head>
<body>
<h1>Hello Vite And Vue</h1>
</body>
</html>5、运行Vite，测试环境
npx vite控制台结果
VITE v3.0.7 ready in 161 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose浏览器查看网址，是否正常显示。正常显示说明vite安装正常。
6、创建目录文件 src/index.ts 测试TypeScript
const s: string = 'Hello Typescript'
console.log(s)7、在index.html文件中引入index.ts文件
<script src="./src/index.ts"></script>8、查看浏览器控制台
浏览器控制台打印结果
Hello Typescript到此说明 Vite 已经可以正常地调试 Typescript 代码了。
9、在包配置(package.json)中添加启动命令
"scripts": {
"dev": "vite"
},控制台输入启动命令
pnpm dev控制台结果
VITE v3.0.7 ready in 145 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose在浏览器访问此地址，无报错，说明Vite环境已经搭建完成。
