好的！下面是用 Vite 创建一个 Vue 3 项目的详细步骤，非常适合现代前端开发，启动快、体验好。

🎯 Vite 创建 Vue 3 项目全流程

1. 安装 Node.js 环境

确保你电脑已经安装了 Node.js（推荐 16 及以上版本）。

node -v
npm -v

2. 使用 npm / yarn / pnpm 创建项目

方式一：使用 npm + create-vite 命令

npm create vite@latest my-vue3-app -- --template vue
  • my-vue3-app 是项目文件夹名
  • --template vue 指定 Vue 3 模板

方式二：使用 yarn

yarn create vite my-vue3-app --template vue

方式三：使用 pnpm

pnpm create vite my-vue3-app -- --template vue

3. 进入项目目录，安装依赖

cd my-vue3-app
npm install

或

yarn

或

pnpm install

4. 启动开发服务器

npm run dev

执行后你会看到：

  VITE vX.X.X  ready in XXX ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

打开浏览器访问 http://localhost:5173/，就可以看到 Vue 3 的默认欢迎页面。

5. 目录结构简述

my-vue3-app/
├─ index.html      # 入口文件
├─ package.json    # 依赖和脚本
├─ src/
│  ├─ main.js      # 入口 JS，挂载 Vue 实例
│  ├─ App.vue      # 根组件
│  └─ components/  # 组件目录
├─ vite.config.js  # Vite 配置文件

6. 常用命令说明

命令说明
npm run dev启动开发服务器
npm run build打包生产环境代码
npm run preview本地预览生产环境代码

7. 额外提示

  • Vite 支持热更新，保存文件后浏览器自动刷新。
  • 你可以在 vite.config.js 里配置别名、代理等。
  • 推荐安装 VSCode 的 Volar 插件，更好地支持 Vue 3 语法和 TypeScript。

好嘞！下面给你一个最简的 Vue 3 + Vite 项目示例，带有基础代码和说明，帮你快速启动。

最简 Vue 3 + Vite 项目示例

1. 创建项目（假设文件夹名叫 my-vue3-app）

npm create vite@latest my-vue3-app -- --template vue
cd my-vue3-app
npm install
npm run dev

2. 主要文件示例

src/main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

src/App.vue

<template>
  <div id="app">
    <h1>Vue 3 + Vite 最简示例</h1>
    <Counter />
  </div>
</template>

<script setup>
import Counter from './components/Counter.vue'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

src/components/Counter.vue

<template>
  <button @click="count++">点击次数: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

3. 运行项目

npm run dev

打开浏览器访问 http://localhost:5173，你会看到一个按钮，点击按钮次数会增加。

4. 简单说明

  • main.js 是 Vue 应用入口
  • App.vue 是根组件，导入并使用了 Counter 组件
  • Counter.vue 使用 Vue 3 Composition API 的 <script setup>，状态由 ref 管理