第一章 Vite搭建开发环境
【摘要】 使用Vite搭建Vue3组件库的开发环境，主要用于打包和发布代码工具
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环境已经搭建完成。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）