安装 Node.js 和 npm
在开始使用 Vite 之前，你需要确保安装了 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，npm 则是 Node.js 的包管理器。
你可以通过访问 Node.js 官方网站下载并安装最新版本的 Node.js。安装完成后，打开终端或命令提示符，输入以下命令来验证是否成功安装：
node -v npm -v
如果安装成功，这两个命令将分别输出你的 Node.js 和 npm 版本号。
创建一个新的 Vite 项目
使用 Vite 创建一个新的项目非常简单。首先，你需要创建一个新的文件夹用于存放项目文件，并进入该文件夹：
mkdir my-vite-project cd my-vite-project
接下来，你可以使用 Vite 提供的命令行工具来创建一个新的项目。打开终端或命令提示符，输入以下命令：
npm create vite@latest
运行上述命令后，系统会提示你选择一个项目模板。Vite 支持多种模板，包括但不限于 React、Vue、Preact 等。根据你的需求选择合适的模板。如果你不确定应该选择哪一个，可以选择默认模板，稍后再根据需要进行调整。
输入项目名称（例如 my-vite-app）并确认。Vite 将会下载所需的依赖项并生成项目结构。
检查项目结构
项目创建完成后，你会看到如下目录结构：
// www.javascriptcn.com code example my-vite-project/ ├── node_modules/ ├── public/ │ └── vite.svg ├── src/ │ ├── assets/ │ │ └── logo.png │ ├── App.[js|jsx|ts|tsx] │ ├── main.[js|jsx|ts|tsx] │ └── index.html ├── .gitignore ├── package.json └── vite.config.js
node_modules/：存放所有项目依赖的文件夹。public/：存放静态资源文件，如图片、字体等。src/：存放项目的源代码文件。App.[js|jsx|ts|tsx]：应用的主要组件文件。main.[js|jsx|ts|tsx]：项目的入口文件。index.html：项目的 HTML 入口文件。.gitignore：Git 忽略文件列表。package.json：项目的配置文件，包含项目的元数据和依赖信息。vite.config.js：Vite 的配置文件。
安装依赖
在项目根目录下，运行以下命令安装项目依赖：
npm install
启动开发服务器
安装完依赖后，你可以启动开发服务器。在终端中执行以下命令：
npm run dev
这将会启动一个本地开发服务器，并自动在浏览器中打开项目。默认情况下，开发服务器会在 http://localhost:3000 上运行。你可以在这个地址查看你的项目。
配置 Vite
Vite 的配置文件是 vite.config.js，位于项目根目录。这个文件允许你自定义 Vite 的行为，例如设置代理、更改构建输出路径等。以下是一个基本的配置示例：
// www.javascriptcn.com code example
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true
},
build: {
outDir: 'dist',
assetsDir: 'static'
}
})在这个示例中，我们启用了 React 插件，并设置了开发服务器的端口号为 3000，同时在构建时指定输出目录为 dist，静态资源目录为 static。
总结
通过以上步骤，你已经成功地初始化了一个 Vite 项目。接下来，你可以根据自己的需求对项目进行进一步的配置和开发。希望这些内容对你有所帮助！