使用vite快速搭建vue3项目

Vite简单介绍

vite是一个现代化的前端构建工具，它旨在提供快速的开发体验和优化的构建性能。vite基于ES模块的原生浏览器支持，利用现代浏览器的特性来实现快速的热更新和构建。它支持Vue、React、Svelte等框架，并提供了丰富的插件系统和开箱即用的特性，使开发者能够更高效地构建现代化的Web应用程序。

（当然在在vite的官方文档中你可以看到更具体的介绍）

官网地址

Vite中文网（点击一下就可以进入官网）

Vite的主要特性

• Instant Server Start —— 即时服务启动
• Lightning Fast HMR —— 闪电般快速的热更新
• Rich Features —— 丰富的功能
• Optimized Build —— 经过优化的构建
• Universal Plugin Interface —— 通用的Plugin接口
• Fully Typed APIs —— 类型齐全的API

使用vite快速搭建vue3项目

（这里我们要主要兼容性

Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，所以当你的包管理器发出警告时，请注意升级你的 Node 版本。）

1、点击vite3中文文档，进入文档后点击指引，开始下面有一个，搭建第一个vite项目

2、我们新建一个文件夹，并用命令提示符打开（当然Visual Studio Code打开也是可以的）

输入一下命令

npm create vite@latest

之后会问你输入什么项目名称（看你个人需要写）

然后问你选择什么框架 （这里有vue、react、lit等，这里我选择了vue框架）

上面是ts，下面是js（我选的是js去构建）选完之后回车就行

然后我们就可以发现项目创建完成

3、我们进入项目文件夹npm install一下(安装下依赖)

点开package.json就可以看见我们的包信息

主要内容：

1. type 字段表示当前项目是一个模块（module）项目。
2. scripts 字段定义了三个脚本命令，分别用于开发、构建和预览项目：
   • dev：使用 Vite 运行开发服务器， hot-reload 实时重载。
   • build：使用 Vite 构建项目，生成可执行文件。
   • preview：使用 Vite 预览项目，类似于开发服务器，但不会实时重载。
3. dependencies 字段定义了 Vue.js 的依赖版本。
4. devDependencies 字段定义了 Vite 和 Vite Vue 插件的依赖版本。

4、我们在终端输入npm run dev就可以跑我们这个项目

点击网址就可以打开页面（成功打开就说明我们的项目搭建成功了）