如何使用 vite 创建项目

1、Vite简介

官方文档指路：Vite官网

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是由Vue团队开发的打包工具，在使用Vue3进行项目开发时推荐使用Vite进行打包，其支持性要比传统打包工具更好。

Vite相比于传统的Webpack相比具有更快的打包速度。Vite通过将应用分为依赖和源码两类，改进了开发服务器启动时间。Vite会瞬间开启一个服务，不会预先编译所有文件，而是等到浏览器需要用到某个文件时，Vite再去请求、编译并响应到客户端。

而Webpack会将所有文件都打包编译，导致总的处理时间变长。项目文件越多，耗时越长。

vue-cli即vue脚手架是基于Webpack封装的，目前已处于维护模式。Vue官方推荐使用Vite来创建项目。

2、Node.js安装

Node.js官网指路：Node.js官网

使用Vite之前需要先安装Node.js。Node.js是一个免费的、开源的、跨平台的 JavaScript 运行时环境，允许开发人员在浏览器之外编写命令行工具和服务器端脚本。

npm（Node Package Manager）是Node.js的包管理工具，通常在安装Node.js时会自动安装npm。

这里建议下载安装最新版本的Node.js和npm。

2.1创建方式一：使用vite官网提供的命令

2.1.1 运行项目创建命令

确保当前工作目录正是打算创建项目的目录，在当前文件夹目录栏内输入cmd并回车，在该文件夹路径下打开命令行窗口。

在弹出的命令行窗口中输入以下命令并回车。

npm create vite@latest

2.1.1输入项目名称及其他要求

在Project name后面输入项目名称，默认为vite-project。回车完成修改。

通过键盘上下键选择前端框架类型，此处应选择Vue。回车完成选择。

通过键盘上下键选择使用的语言。根据实际使用需要选择，Vue3更推荐使用TypeScript。回车完成选择。

完成vue项目的创建。运行下方三条命令即可运行该项目。cd test-project是将文件夹切换到该项目所在文件夹下，在VSCode等编译器中运行时已经打开该文件夹，因此不需要输入此命令，只需要分别输入npm install和npm run dev即可。

2.2创建方式二：使用Vue官网提供的命令

2.2.3与创建方式一的区别

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。可以理解成vite可以支持很多不同类型的框架，第一种是创建时选择使用Vue框架，第二种是直接创建Vue项目，不需要选择。

这里推荐使用第二种方式，可以在创建项目时就配置好TypeScript 和测试支持之类的可选功能

3. 设置项目

运行命令后，按提示操作：

1. 项目名称：输入项目名称，如 my-vite-project。
2. 选择框架：选择 React、Vue、Vanilla 等。
3. 选择变体：选择 TypeScript 或 JavaScript。

4. 安装依赖

进入项目目录并安装依赖：

bash

复制

cd my-vite-project
npm install

5. 启动开发服务器

安装完成后，启动开发服务器：

bash

复制

npm run dev

默认情况下，Vite 会在 http://localhost:5173 启动服务器。

6. 构建项目

开发完成后，构建生产版本：

bash

复制

npm run build

构建文件会生成在 dist 目录中。

7. 预览生产版本

使用以下命令预览生产版本：

bash

复制

npm run preview

示例

以下是一个完整的创建 React + TypeScript 项目的示例：

bash

复制

npm create vite@latest my-react-app --template react-ts
cd my-react-app
npm install
npm run dev

总结

Vite 提供了快速创建和启动项目的方式，支持多种框架和工具，适合现代前端开发。