Vue3项目创建教程 | 如何使用Vite快速搭建Vue3应用 | Jay的博客

🎉 欢迎阅读Vue3项目创建教程！
本文将详细介绍如何使用Vite（Vue官方推荐的构建工具）快速搭建Vue3应用，从环境准备到Vue3组件开发，适合Vue3初学者和前端开发者学习Vue3项目创建。

📝 前言

Vue3是Vue.js的最新版本，作为目前最流行的前端框架之一，带来了许多激动人心的新特性和性能改进：

✨ 组合式API (Composition API) - 更灵活的代码组织方式
✨ TypeScript支持 - 更好的类型安全和开发体验
✨ 性能提升 - 更小的打包体积，更快的渲染速度
✨ Fragment、Teleport、Suspense - 新的组件特性
✨ 更好的响应式系统 - 基于Proxy的响应式实现

创建Vue3项目是学习Vue3的第一步，Vue生态提供了两种主要的构建工具：Vite和Vue CLI。本文将重点介绍如何使用Vite创建Vue3项目，Vite是Vue官方推荐的构建工具，具有更快的开发体验，是Vue3项目搭建的首选工具。

🔧 环境准备

在进行Vue3项目搭建之前，我们需要准备好必要的开发环境。

安装Node.js

Vue3应用开发依赖Node.js和npm包管理器，所以首先需要安装Node.js：

访问Node.js官网
下载并安装LTS版本（推荐长期支持版本，更稳定）
验证安装是否成功：

# 验证Node.js版本
node -v

# 验证npm版本
npm -v

安装pnpm（可选，推荐）

pnpm是一个更快、更节省磁盘空间的包管理器，推荐使用：

1	npm install -g pnpm

⚖️ Vite与Vue CLI对比

在创建Vue3项目之前，让我们了解一下Vite和Vue CLI的主要区别，帮助你选择适合自己的构建工具：

特性	Vite	Vue CLI
构建工具	ESBuild	Webpack
开发服务器启动速度	极快（秒级）	较慢（秒级到十秒级）
热模块替换 (HMR)	极快	一般
生产构建	Rollup	Webpack
默认支持	Vue3	Vue2/Vue3
TypeScript支持	内置	需要配置
按需编译	✅ 支持	❌ 不支持
冷启动性能	优秀	一般
生态系统	快速增长	成熟完善
官方推荐	✅ Vue3推荐	❌ 仍支持但非Vue3首选

Vite的优势

✅ 极速的开发体验 - 使用ESBuild进行依赖预构建，开发服务器启动速度极快
✅ 按需编译 - 只编译当前修改的文件，热更新速度快
✅ 现代浏览器原生支持 - 利用浏览器的ES模块支持，无需打包
✅ 更好的TypeScript支持 - 内置TypeScript支持，无需复杂配置
✅ Vue3优先 - 专为Vue3设计，支持Vue3的新特性

Vue CLI的优势

✅ 成熟的生态系统 - 丰富的插件和社区支持
✅ 广泛的兼容性 - 支持Vue2和Vue3
✅ 全面的功能 - 内置了很多功能，如PWA、测试等
✅ 适合大型项目 - Webpack的生态系统更适合复杂项目

如何选择

推荐使用Vite：如果你是Vue3新项目，追求开发效率和速度
继续使用Vue CLI：如果你有现有Vue CLI项目，或需要Webpack的特定功能

⚡ 使用 Vite 创建 Vue3 项目

Vite是Vue官方推荐的构建工具，用于Vue3项目创建具有更快的开发体验和构建速度。

步骤1：创建项目

使用npm、yarn或pnpm等包管理器创建Vue3项目：

# 使用npm
npm create vite@latest vue3-project -- --template vue

# 使用yarn
yarn create vite vue3-project -- --template vue

# 使用pnpm
pnpm create vite vue3-project -- --template vue

步骤2：执行创建命令（完整流程）

执行创建命令之后，你将看到如下完整的交互流程：

> npx create-vite vue3-project --template vue

◇  Use rolldown-vite (Experimental)?:
│  Yes
│
◇  Install with npm and start now?
│  Yes
│
◇  Scaffolding project in D:\vue3\vue3-project...
│
◇  Installing dependencies with npm...

added 37 packages in 4s

9 packages are looking for funding
  run `npm fund` for details
│
◇  Starting dev server...

> vue3-project@0.0.0 dev
> vite


  ROLLDOWN-VITE v7.2.5  ready in 375 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

交互选项说明

Use rolldown-vite (Experimental)? - 是否使用实验性的rolldown-vite构建工具
- Yes - 推荐选择，体验最新的构建性能优化
- No - 使用传统的Vite构建工具
Install with npm and start now? - 是否立即安装依赖并启动开发服务器
- Yes - 自动完成依赖安装并启动开发服务器
- No - 只创建项目结构，后续手动安装依赖

手动安装依赖（如果选择No）

如果你在创建项目时选择了不立即安装依赖，可以手动执行以下命令：

# 进入项目目录
cd vue3-project

# 使用npm安装依赖
npm install

# 启动开发服务器
npm run dev

📁 Vue3项目结构解析

使用Vite成功创建Vue3项目后，我们来详细解析一下Vue3项目的目录结构：

vue3-project/
├── node_modules/        # 项目依赖
├── public/              # 静态资源
│   └── favicon.ico      # 网站图标
├── src/                 # 源代码
│   ├── assets/          # 资源文件
│   │   └── logo.png     # Vue logo
│   ├── components/      # 组件目录
│   │   └── HelloWorld.vue  # 示例组件
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件（JavaScript版本）
│   └── main.ts          # 入口文件（TypeScript版本）
├── .gitignore           # Git忽略文件
├── index.html           # HTML模板
├── package.json         # 项目配置和依赖
└── vite.config.js       # Vite配置文件

核心文件说明

📄 main.js/main.ts - 项目入口文件，创建Vue应用实例并挂载到DOM
📄 App.vue - 根组件，包含应用的基本结构
📁 components/ - 存放Vue组件的目录
📁 assets/ - 存放图片、样式等资源文件
⚙️ vite.config.js - Vite构建工具的配置文件

🚀 运行Vue3项目

开发模式运行

# 使用npm
npm run dev

# 使用yarn
yarn dev

# 使用pnpm
pnpm dev

访问项目

运行成功后，会在命令行中显示访问地址，通常是 http://localhost:5173。

在浏览器中访问该地址，即可看到Vue3项目的默认页面。

构建生产版本

当项目开发完成后，可以构建生产版本：

# 使用npm
npm run build

# 使用yarn
yarn build

# 使用pnpm
pnpm build

构建后的文件会生成在 dist 目录中，可直接部署到服务器。

🧩 简单的Vue3组件示例

让我们创建一个简单的Vue3组件，体验一下Vue3的组合式API，学习Vue3组件开发的基本流程：

创建组件

在 src/components/ 目录下创建一个 Counter.vue 组件：

<template>
  <div class="counter">
    <h2>Vue3计数器</h2>
    <p>当前计数: {{ count }}</p>
    <div class="buttons">
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="reset">重置</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 使用ref创建响应式数据
const count = ref(0)

// 定义方法
const increment = () => {
  count.value++
}

const decrement = () => {
  count.value--
}

const reset = () => {
  count.value = 0
}
</script>

<style scoped>
.counter {
  text-align: center;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  max-width: 300px;
  margin: 20px auto;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #42b983;
  color: white;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #3aa876;
}
</style>

在App.vue中使用组件

修改 src/App.vue，引入并使用我们创建的Counter组件：

<template>
  <div>
    <h1>Vue3项目示例</h1>
    <Counter />
  </div>
</template>

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

<style>
/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}
</style>

查看效果

保存文件后，开发服务器会自动重新加载，在浏览器中可以看到我们创建的计数器组件。

❓ 常见问题及解决方案

问题1：创建项目时网络超时

解决方案：

检查网络连接
使用国内镜像：

# npm镜像
npm config set registry https://registry.npmmirror.com

# pnpm镜像
pnpm config set registry https://registry.npmmirror.com

问题2：依赖安装失败

解决方案：

删除 node_modules 目录和 package-lock.json/yarn.lock/pnpm-lock.yaml 文件
重新安装依赖
尝试使用不同的包管理器（npm → pnpm → yarn）

问题3：运行时出现语法错误

解决方案：

检查Node.js版本是否符合要求（Vue3要求Node.js 14.18+或16+）
确保使用了正确的Vue3语法
检查是否安装了必要的依赖

问题4：组件不显示

解决方案：

检查组件是否正确引入
检查组件名称是否正确
检查模板语法是否正确

🎯 总结与资源

恭喜你！你已经成功学习了如何使用Vite创建Vue3项目，并了解了Vite与Vue CLI的区别以及Vue3项目的基本结构和组件开发流程。

总结

✅ 环境准备 - 安装了Node.js和可选的pnpm包管理器
✅ Vite与Vue CLI对比 - 了解了两者的区别和各自的优势
✅ Vite创建Vue3项目 - 掌握了使用Vite创建Vue3项目的完整流程
✅ 项目结构解析 - 了解了Vue3项目的核心文件和目录结构
✅ 运行与构建 - 学会了如何运行开发服务器和构建生产版本
✅ 组件开发 - 创建了一个使用组合式API的Vue3计数器组件
✅ 问题解决方案 - 了解了常见问题的排查和解决方法

下一步学习建议

深入学习Vue3的组合式API
学习Vue Router和Pinia，构建完整应用
掌握TypeScript在Vue3中的使用
了解Vue3的性能优化技巧
探索Vite的高级配置和插件生态

🎉 学习完成！
通过本文的学习，你已经掌握了使用Vite创建Vue3项目的基本技能，这为你进一步学习Vue3打下了坚实的基础。

🚀 继续探索Vue3的精彩世界吧！

📅 更新时间：2026-01-25
✍️ 作者：Jay

📝 前言

📋 目录

🔧 环境准备

安装Node.js

安装pnpm（可选，推荐）

⚖️ Vite与Vue CLI对比

Vite的优势

Vue CLI的优势

如何选择

⚡ 使用 Vite 创建 Vue3 项目

步骤1：创建项目

步骤2：执行创建命令（完整流程）

交互选项说明

手动安装依赖（如果选择No）

📁 Vue3项目结构解析

核心文件说明

🚀 运行Vue3项目

开发模式运行

访问项目

构建生产版本

🧩 简单的Vue3组件示例

创建组件

在App.vue中使用组件

查看效果

❓ 常见问题及解决方案

问题1：创建项目时网络超时

问题2：依赖安装失败

问题3：运行时出现语法错误

问题4：组件不显示

🎯 总结与资源

总结

推荐资源

下一步学习建议

本人微信号

本人QQ号