Vite搭建开发环境
Posted 天界程序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vite搭建开发环境相关的知识，希望对你有一定的参考价值。
第一章 Vite搭建开发环境
1、创建目录
mkdir xxx
cd xxx
2、使用pnpm初始化包配置
pnpm init
3、安装Vite依赖
pnpm i vite@"3.0.7" -D
4、根目录创建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环境已经搭建完成。
以上是关于Vite搭建开发环境的主要内容，如果未能解决你的问题，请参考以下文章
Vite 2.x + React + Zarm + Less + React Router v6 + Axios + flexible.js 搭建前端 H5 开发环境