Vue3 创建项目：从零开始搭建你的第一个前端应用
你是否曾看着那些炫酷的网页界面，心里默默想：我也能做出这样的页面？其实，答案是肯定的。而 Vue 3，正是帮助你迈出第一步的最佳伙伴。它轻量、灵活、易于上手，尤其适合初学者快速掌握现代前端开发的核心思想。
今天，我们就来手把手教你如何使用 Vue 3 创建项目，不绕弯子，不讲虚的，只讲你能立刻用上的内容。无论你是刚接触前端的新手，还是已有一定经验的中级开发者，这篇文章都会让你在 10 分钟内完成一个可运行的 Vue 3 项目。
为什么选择 Vue3？
在动手之前，先问自己一个问题：为什么是 Vue 3？而不是 React 或 Angular？
简单来说，Vue 3 的设计哲学是“渐进式”。它不像某些框架那样要求你从头到尾都用它，而是可以逐步引入。比如你可以先用它来做一个按钮动画，再慢慢扩展成完整的单页应用（SPA）。
Vue 3 的核心优势包括：
- 性能提升：相比 Vue 2，响应式系统基于 Proxy 重构，性能更高，内存占用更少。
- 组合式 API（Composition API）：让逻辑更清晰，复用性更强，特别适合复杂组件。
- 更好的 TypeScript 支持：开箱即用，开发体验更流畅。
- 生态系统成熟：Vue CLI、Vite、Vue Router、Pinia 等工具链完善。
就像盖房子，Vue 3 就像一套高质量的预制板，你不需要从挖地基开始，就能快速搭出一个结实的框架。
环境准备：安装 Node.js 和 npm
在开始 Vue3 创建项目之前，你必须确保本地环境已安装 Node.js 和 npm。
Node.js 是运行 JavaScript 的运行时环境，npm 是它的包管理工具。
你可以通过以下命令检查是否已安装：
node -v
npm -v
如果返回版本号（如 v18.17.0），说明环境已就绪。如果提示命令未找到，请前往 Node.js 官网 下载 LTS 版本（长期支持版）。
⚠️ 建议使用 Node.js 16 或以上版本，Vue 3 对低版本支持有限。
使用 Vite 快速创建 Vue3 项目
Vite 是由 Vue 作者尤雨溪开发的现代构建工具，它基于原生 ES 模块，启动速度极快，尤其适合开发阶段。
接下来，我们用 Vite 来创建一个 Vue 3 项目。
步骤一：初始化项目
打开终端，进入你想要存放项目的目录，执行以下命令：
npm create vite@latest my-vue3-app --template vue
这条命令的含义是：
npm create vite：使用 npm 的 create 脚手架功能，创建 Vite 项目。@latest：安装最新版本。my-vue3-app：项目名称，你可以改成自己喜欢的名字。--template vue：指定模板为 Vue，Vite 会自动配置好 Vue 3 的相关依赖。
执行后，终端会提示你确认选项，直接回车使用默认设置即可。
步骤二：安装依赖
进入项目目录并安装依赖包：
cd my-vue3-app
npm install
这一步会下载 Vue 3、Vite、TypeScript（如果启用）、ESLint 等必要的依赖。
步骤三：启动开发服务器
运行以下命令启动本地开发服务器：
npm run dev
浏览器会自动打开 http://localhost:5173，你将看到一个默认的 Vue 3 欢迎页面。
🎉 现在你已经成功完成了 Vue3 创建项目的第一步！
项目结构解析：理解 Vue3 的骨架
一个标准的 Vue 3 项目结构，就像一座小房子的蓝图。我们来拆解一下关键部分：
my-vue3-app/
├── public/ # 静态资源目录（如 favicon.ico）
├── src/
│ ├── assets/ # 图片、样式等资源
│ ├── components/ # 可复用的组件
│ ├── App.vue # 根组件
│ └── main.js # 应用入口文件
├── index.html # 主页面模板
├── vite.config.js # Vite 配置文件
├── package.json # 项目元信息与脚本
└── README.md
重点文件说明
main.js：这是整个应用的入口文件。它负责创建 Vue 应用实例，并挂载到 DOM 上。
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用实例
const app = createApp(App)
// 挂载应用到 id 为 'app' 的 DOM 元素上
app.mount('#app')
注释：
createApp()是 Vue 3 的新写法，相当于 Vue 2 的new Vue()。app.mount('#app')把整个应用渲染到 HTML 中 id 为 app 的元素里。
App.vue：根组件，所有其他组件都从这里开始挂载。
<template>
<!-- 模板部分：HTML 结构 -->
<h1>{{ message }}</h1>
<button @click="changeMessage">点击我</button>
</template>
<script setup>
// 脚本部分：逻辑处理
import { ref } from 'vue'
// 声明一个响应式变量，初始值为 "Hello Vue 3"
const message = ref('Hello Vue 3')
// 定义一个方法，点击按钮时触发
function changeMessage() {
message.value = '你已成功修改文本！'
}
</script>
<style scoped>
/* 样式部分：局部作用域，避免样式冲突 */
h1 {
color: #42b983;
}
</style>
注释：
<script setup>是 Vue 3 的新语法糖，让代码更简洁。ref()创建一个响应式变量，必须通过.value访问值。@click是事件绑定，等价于v-on:click。
添加组件与路由：从单页面走向完整应用
一个项目不能只有“Hello World”。我们来添加一个简单的组件，并引入 Vue Router 实现页面跳转。
第一步：安装 Vue Router
npm install vue-router@4
第二步：创建路由配置
在 src 目录下新建 router/index.js：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
// 定义路由表：路径与组件的映射
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
// 创建路由实例
const router = createRouter({
history: createWebHistory(), // 使用 HTML5 History 模式
routes
})
export default router
第三步：在主应用中引入路由
修改 main.js：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由
// 创建应用实例
const app = createApp(App)
// 挂载路由
app.use(router)
// 挂载到 DOM
app.mount('#app')
第四步：创建页面组件
在 src/components/ 下创建 Home.vue 和 About.vue：
<!-- Home.vue -->
<template>
<div>
<h2>首页</h2>
<router-link to="/about">前往关于页</router-link>
</div>
</template>
<script setup>
// 无需额外逻辑
</script>
<!-- About.vue -->
<template>
<div>
<h2>关于页面</h2>
<router-link to="/">返回首页</router-link>
</div>
</template>
<script setup>
// 无需额外逻辑
</script>
第五步：在 App.vue 中使用路由
修改 App.vue：
<template>
<!-- 路由出口：匹配的组件将在这里渲染 -->
<router-view />
</template>
<script setup>
// 无需额外逻辑
</script>
现在刷新页面，点击链接，就能实现页面跳转了。
项目运行与部署：从开发到上线
开发阶段
npm run dev：启动开发服务器，支持热更新（修改代码自动刷新）。npm run build：构建生产版本，生成dist/目录，用于部署。
部署建议
- 将
dist/目录部署到 Nginx、Vercel、Netlify 或 GitHub Pages。 - 确保服务器配置支持
index.html重定向（避免刷新 404）。
总结：Vue3 创建项目，从零到一的完整旅程
今天我们从零开始，完成了 Vue3 创建项目的全过程：环境准备、项目初始化、结构解析、组件开发、路由配置，最后还了解了部署流程。
整个过程就像搭积木：你不需要懂每一块积木的材质，只要知道怎么拼起来就行。而 Vue 3 就是那套设计精良、接口清晰的积木系统。
无论你是想做一个个人博客、后台管理系统，还是想参与团队开发，Vue3 都能成为你可靠的伙伴。
现在，你已经拥有了一个可以运行的 Vue 3 项目。下一步，就是动手写代码，让想法落地。
记住：每一个伟大的应用，都始于一个 npm create vite 命令。