第一章 Vite搭建开发环境

最新推荐文章于 2024-05-28 09:23:47 发布

天界程序员

最新推荐文章于 2024-05-28 09:23:47 发布

阅读量1.1k

点赞数 2

分类专栏：搭建Vue3组件库文章标签： vite 组件库开发

本文链接：https://blog.csdn.net/qq_36362721/article/details/127827665

版权

搭建Vue3组件库专栏收录该内容

17 篇文章 18 订阅

订阅专栏

第一章 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环境已经搭建完成。

天界程序员

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
第一章 Vite搭建开发环境

到此说明 Vite 已经可以正常地调试 Typescript 代码了。浏览器查看网址，是否正常显示。正常显示说明vite安装正常。在浏览器访问此地址，无报错，说明Vite环境已经搭建完成。浏览器控制台打印结果。
复制链接

扫一扫