创建首个 Vite 项目

使用官方 create-vite 手架可以快速创建 Vite 项目，支持多种框架模板。

创建命令

Bash

# 使用 npm
npm create vite@latest my-project

# 使用 pnpm
pnpm create vite my-project

# 使用 yarn
yarn create vite my-project

选择模板

创建过程中会提示选择模板：

模板	说明
vanilla	纯 JavaScript/TypeScript
vue	Vue 3 项目
vue-ts	Vue 3 + TypeScript
react	React 项目
react-ts	React + TypeScript
svelte	Svelte 项目
svelte-ts	Svelte + TypeScript

手动指定模板

Bash

# 直接指定模板创建
npm create vite@latest my-project -- --template vue-ts

# 其他模板示例
npm create vite@latest my-project -- --template react-ts
npm create vite@latest my-project -- --template vanilla-ts

项目初始化

Bash

# 进入项目目录
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

启动后访问

终端会显示：

text

  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.x.x:5173/

浏览器访问 http://localhost:5173 即可看到项目运行。

注意：默认端口 5173，如被占用会自动切换。

要点总结

使用 create-vite 脚手架创建项目
支持 Vue、React、Svelte 等模板
创建后需安装依赖再启动
默认端口 5173