创建首个 Vite 项目

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

创建命令

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

# 使用 pnpm
pnpm create vite my-project

# 使用 yarn
yarn create vite my-project

选择模板

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

手动指定模板

# 直接指定模板创建
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

项目初始化

# 进入项目目录
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

启动后访问

终端会显示：

  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