Skip to main content

使用 Vite 生成新项目

Vite 提供了快速创建新项目的方式，支持多种前端框架。以下是详细步骤：

1. 创建 Vite 项目的基本命令

# 使用 npm
npm create vite@latest

# 使用 yarn
yarn create vite

# 使用 pnpm
pnpm create vite

2. 交互式项目创建流程

运行上述命令后，会进入交互式配置流程：

  1. 项目名称：输入你的项目名称
  2. 选择框架：从列表中选择你需要的框架
    • Vanilla (纯 JavaScript)
    • Vue
    • React
    • Preact
    • Lit
    • Svelte
    • Solid
    • Qwik
  3. 选择变体：根据框架选择 TypeScript 或 JavaScript 版本

3. 框架特定创建命令

创建 Vue 项目

# Vue + JavaScript
npm create vite@latest my-vue-app -- --template vue

# Vue + TypeScript
npm create vite@latest my-vue-app -- --template vue-ts

创建 React 项目

# React + JavaScript
npm create vite@latest my-react-app -- --template react

# React + TypeScript
npm create vite@latest my-react-app -- --template react-ts

创建纯前端项目 (Vanilla)

# Vanilla JavaScript
npm create vite@latest my-vanilla-app -- --template vanilla

# Vanilla TypeScript
npm create vite@latest my-vanilla-app -- --template vanilla-ts

4. 项目创建后步骤

# 进入项目目录
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

5. 项目目录结构

典型的 Vite 项目结构：

my-project/
├── node_modules/     # 项目依赖
├── public/           # 静态资源目录
├── src/              # 源代码目录
│   ├── assets/       # 项目资源（图片、样式等）
│   ├── components/   # 组件目录（框架项目）
│   ├── App.vue       # 或 App.jsx/tsx（主组件）
│   └── main.js       # 或 main.ts（项目入口）
├── index.html        # 应用入口HTML文件
├── vite.config.js    # Vite配置文件
├── package.json      # 项目配置和依赖
└── README.md         # 项目说明文件

6. 自定义模板

如果你想使用自定义模板：

# 从GitHub仓库创建项目
npm create vite@latest my-project -- --template username/repo

7. 全局安装 Vite (可选)

如果你想全局安装 Vite CLI：

npm install -g create-vite

然后可以直接使用：

create-vite my-project --template vue-ts

8. 支持的模板列表

Vite 官方支持的模板包括：

  • vanilla, vanilla-ts
  • vue, vue-ts
  • react, react-ts
  • preact, preact-ts
  • lit, lit-ts
  • svelte, svelte-ts
  • solid, solid-ts
  • qwik, qwik-ts

9. 使用社区模板

除了官方模板，还可以使用社区维护的模板：

# 例如使用 Vitesse模板(Vue3高级模板)
npx degit antfu/vitesse my-vitesse-app
cd my-vitesse-app
npm install

10. 项目配置调整

创建项目后，你可以根据需要修改 vite.config.js 文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  }
})

Vite 的项目创建过程简单快速，特别适合现代前端开发需求。根据你的项目类型选择合适的模板，可以立即开始开发工作。

No Comments
Back to top