Vue3零基础5小时快速入门：从环境搭建到项目实战

Vue3 是目前 Web 前端开发中非常主流的前端框架之一，它不只是在 Vue2 的基础上做一次小规模升级，而是从响应式机制、组件逻辑组织到工程化体验都做了整套更新。对零基础准备进入 Web 前端方向的人来说，直接学习 Vue3 往往比从 Vue2 过渡更划算，因为新项目、官方文档、社区组件库都在向 Vue3 集中。

这篇教程围绕一个明确目标展开：让零基础的人在 5 小时内完成“认知建立、环境搭建、核心语法、组件通信、路由状态、问题排查”这一整条链路。学完之后，你能看懂 Vue3 项目结构，能写出一个带交互、能发请求、能跳转页面的小应用，也知道出了问题该看哪一层。这里不会把全部 API 列一遍，而是优先讲清楚最常用的部分，并把容易踩的坑放在最后统一说明。

1. Vue3 零基础入门，先用 30 分钟建立正确认知

1.1 Vue3 到底是什么，解决了什么问题

Vue3 是一个用于构建用户界面的渐进式前端框架。通俗地说，它帮助你用更少的代码把数据变成页面，并且在数据发生变化时，页面能自动更新。传统开发中，如果你要修改页面上的一段文字，通常要先通过 id 找到 DOM 元素，再手动更新内容；Vue 的做法则简单得多：你只需维护一个数据变量，数据变化后 Vue 负责同步视图。

Vue 被称为“渐进式”，意思是你可以从一个页面里的一个小组件开始使用，也可以逐步引入路由、状态管理、构建工具，最终做成一个完整企业级项目。这种特性对零基础学习者非常友好，入门时不需要一次掌握全部概念，先会用，再逐步理解内部机制。

从技术定义看，Vue3 的核心能力包括三部分：

• 响应式系统：数据变化自动触发视图更新。
• 组件化：页面拆成独立、可复用、可组合的组件。
• 虚拟 DOM 与渲染器：高效对比新旧状态，最小化操作真实 DOM。

零基础阶段不需要深入源码，但要有一个意识：你写的ref、reactive不是普通变量，它们是 Vue 用来跟踪变化的关键对象。理解这一点，后续遇到“为什么界面没更新”时就有排查方向。

1.2 Vue3 相比 Vue2 的变化，初学者只需要记住这几点

网上很多资料会对比 Vue2 和 Vue3，真正零基础的人不需要记住全部差异，只需要先掌握下面这几个关键点，因为它们直接影响代码写法。

其中最重要的一点是：Vue3 推荐使用组合式 API（Composition API）。你可能会在旧项目里看到 Options API 写法，也就是data、methods分开写。但新项目、新教程基本都使用<script setup>，本文后续示例也统一采用这种写法。

1.3 零基础学好 Vue3 需要的前置知识清单

虽然标题说“零基础”，但 Vue3 并不是完全不需要 JavaScript 基础。你可以先把下面这份清单当成自检表，不用全部精通，但至少要在看到代码时知道它是什么。

如果上面有几项还比较陌生，不用暂停学习。在动手写 Vue3 代码的过程中自然会遇到，再回头补基础即可。最理想的状态是先会用，再理解原理，最后再系统性补基础。

2. 开发环境搭建：1 小时内准备好一个可运行的 Vue3 项目

2.1 安装 Node.js 和包管理器

Vue3 项目通常需要 Node.js 环境，因为 Vite 开发服务器和依赖安装都依赖它。你不需要懂 Node.js 后端开发，只需要把它当成 Vue3 的运行环境来安装。

安装完成后，打开终端或命令行，执行以下命令确认环境正常：

node -v npm -v

推荐使用 Node.js 的 LTS 版本，因为稳定，兼容性好。如果执行命令后提示找不到命令，说明 Node.js 没有成功安装，或安装后没有重启终端。

npm 是 Node.js 自带的包管理器，用来安装 Vue、Vue Router、Axios 等第三方库。除 npm 外，前端社区还常用 pnpm 和 yarn，它们安装速度不同，但使用思路一致。零基础阶段先用 npm 就够了，完全能跑通所有示例。

2.2 用 Vite 创建 Vue3 项目并启动

Vite 是目前 Vue3 项目最常用的构建工具，它的特点是启动极快，开发体验好。打开终端，进入你想存放项目的目录，然后执行：

npm create vite@latest vue3-demo -- --template vue

执行后，Vite 会创建一个名为vue3-demo的目录，并生成一个 Vue 基础模板。接着进入目录安装依赖：

cd vue3-demo npm install npm run dev

如果在某些 npm 版本下上面的--template写法不生效，也可以使用 Vue 官方提供的脚手架命令，交互式选择功能：

npm create vue@latest vue3-demo

这个命令会询问你是否需要 TypeScript、Vue Router、Pinia 等，零基础学习阶段可以先全选 No，保持最小化项目，越简单越容易理解。

启动成功后，终端会输出一个本地地址，通常是：

http://localhost:5173

打开浏览器访问这个地址，如果看到 Vue 的默认欢迎页，说明环境已经跑通。

2.3 项目结构、关键文件与启动验证

创建出来的vue3-demo目录结构比较精简，初学者先关注这几个部分：

vue3-demo ├── index.html ├── package.json ├── vite.config.js ├── public └── src ├── main.js ├── App.vue ├── components └── assets

index.html是浏览器真正加载的入口页面。Vite会把src/main.js编译后注入到这个页面中。

src/main.js是整个应用的入口，核心代码是创建 Vue 实例并挂载到页面：

import { createApp } from 'vue' import App from './App.vue' import './assets/main.css' createApp(App).mount('#app')

src/App.vue是根组件。你可以把它理解成一个页面容器，后续所有组件都会从这里开始组合。

修改App.vue，改成最简单的 Hello Vue3：

<script setup> import { ref } from 'vue' const message = ref('Hello Vue3') </script> <template> <h1>{{ message }}</h1> </template>

保存后，浏览器会自动刷新，看到页面上显示Hello Vue3，说明你已经成功修改了第一个 Vue3 组件。

这里的关键是<script setup>，它是 Vue3 组合式 API 的语法糖，里面定义的变量可以在模板中直接使用。ref用来创建响应式数据，当message.value改变时，页面上的{{ message }}会自动更新。

2.4 学习环境与生产环境的区别

开发阶段使用npm run dev启动的是开发服务器，特点是自动热更新、报错信息清晰。但它并不适合直接作为生产环境部署。

当项目开发完成后，需要执行：

npm run build

执行后，Vite 会把项目打包到dist目录，生成静态的 HTML、CSS、JavaScript 文件。这些文件才能交给 Nginx、云服务器或 CDN 部署。

学习环境你只需要关心代码能不能运行；生产环境还需要额外关心路由模式、接口跨域、环境变量、日志上报、回滚方案等问题。这些会在后面的部署检查清单中展开。

3. 从模板语法到组件通信：1.5 小时写出你的第一个交互页面

3.1 模板语法与响应式数据

Vue3 模板语法和 HTML 非常接近，区别是你可以在模板中使用{{ }}插入数据，使用v-bind绑定属性，使用v-on监听事件。

写一个最常用的组合示例：

<template> <div> <p>{{ title }}</p> <input v-model="keyword" placeholder="请输入搜索词" /> <button @click="handleSearch">搜索</button> </div> </template> <script setup> import { ref } from 'vue' const title = ref('Vue3 快速入门') const keyword = ref('') function handleSearch() { alert('搜索内容：' + keyword.value) } </script>

v-model是实现表单输入框和数据双向绑定的指令。用户在输入框中输入内容，keyword.value会同步变化；反过来，如果你在代码中修改keyword.value，输入框内容也会同步更新。

@click是v-on:click的简写，绑定点击事件处理函数。在组合式 API 中，事件处理函数可以直接是普通函数，不需要像 Vue2 那样挂到methods中。

3.2 计算属性与监听器

页面中经常需要根据已有数据计算新数据，例如电商购物车里的总价。你当然可以在模板里写一行表达式，但当计算逻辑变复杂时，应该把它放到computed里。

<script setup> import { ref, computed } from 'vue' const price = ref(100) const count = ref(2) const total = computed(() => price.value * count.value) </script> <template> <div>单价：{{ price }}</div> <div>数量：{{ count }}</div> <div>总价：{{ total }}</div> </template>

computed计算属性有两个特点：

• 有缓存：只要依赖的数据没有变化，多次访问不会重复执行计算函数。
• 依赖跟踪：当price或count发生变化，total才会重新计算。

如果要在数据变化后执行一些副作用，比如打印日志、请求接口，应该使用watch：

import { ref, watch } from 'vue' const keyword = ref('') watch(keyword, (newValue, oldValue) => { console.log('搜索词从', oldValue, '变成', newValue) })

初学者最容易混淆的点是：computed用来计算新值，watch用来响应变化。两者不要互相替代。

3.3 组件化开发：父子组件通信

组件是 Vue3 的核心思想之一。你可以把页面拆成头部、列表、弹窗等独立组件，每个组件负责自己的数据和样式，再通过嵌套组合成完整页面。

父子组件之间最常见的通信方式是：

• 父组件通过props向子组件传数据。
• 子组件通过emit向父组件发送事件。

创建一个子组件src/components/Child.vue：

<template> <div> <p>{{ name }}</p> <button @click="handleClick">触发事件</button> </div> </template> <script setup> defineProps({ name: { type: String, default: '' } }) const emit = defineEmits(['send']) function handleClick() { emit('send', '来自子组件的消息') } </script>

在App.vue中引入并使用：

<script setup> import Child from './components/Child.vue' function handleSend(msg) { alert(msg) } </script> <template> <Child name="Vue3 子组件" @send="handleSend" /> </template>

defineProps和defineEmits是<script setup>中的编译宏，不需要额外导入。它们的作用是声明组件接收哪些属性和可以触发哪些事件。

这里要注意：props是单向数据流，子组件不应该直接修改props。如果真的需要修改，应该通过emit让父组件去改。

3.4 一个最小待办事项页面

把上面几个知识点组合起来，写一个最简单的待办事项页面。它覆盖了响应式数据、计算属性、事件处理、表单绑定、列表渲染。

<script setup> import { ref, computed } from 'vue' const todoList = ref([ { id: 1, text: '搭建 Vue3 项目', done: false }, { id: 2, text: '完成第一个组件', done: false } ]) const newTodo = ref('') const remaining = computed(() => { return todoList.value.filter(item => !item.done).length }) function addTodo() { const text = newTodo.value.trim() if (!text) return todoList.value.push({ id: Date.now(), text, done: false }) newTodo.value = '' } function toggleTodo(id) { const item = todoList.value.find(item => item.id === id) if (item) { item.done = !item.done } } </script> <template> <div> <h1>Vue3 待办清单</h1> <input v-model="newTodo" placeholder="输入新任务" /> <button @click="addTodo">添加</button> <ul> <li v-for="item in todoList" :key="item.id"> <input type="checkbox" v-model="item.done" /> <span :class="{ done: item.done }">{{ item.text }}</span> </li> </ul> <p>剩余 {{ remaining }} 条未完成</p> </div> </template> <style scoped> .done { text-decoration: line-through; } </style>

这段代码中，v-for用来循环渲染数组，:key用来给列表中的每一项提供一个唯一标识，这样 Vue 在更新列表时可以准确复用和移除元素。item.id使用Date.now()生成，在简单示例中够用，真实项目建议使用后端返回的唯一 id。

<style scoped>表示样式只作用于当前组件，避免组件之间的样式互相污染。

运行这段代码后，你会看到一个可以添加任务、勾选完成、统计剩余条数的小页面。到这里，Vue3 最核心的本地交互能力已经基本掌握了。

4. 进阶必会：Composition API、路由、状态管理与请求封装

4.1 理解 Composition API，而不是背 API

Vue3 组合式 API 最重要的价值是逻辑复用。组件一复杂，如果所有功能都写在同一个组件里，会出现几百行的窘境。组合式 API 允许你把相关逻辑抽成独立函数。

例如抽一个计数器逻辑src/useCount.js：

import { ref } from 'vue' export function useCount() { const count = ref(0) function increment() { count.value++ } return { count, increment } }

组件中使用：

<script setup> import { useCount } from './useCount' const { count, increment } = useCount() </script> <template> <button @click="increment">{{ count }}</button> </template>

这样你就可以在多个组件中复用useCount，而不是重复写逻辑。面试中常说的“逻辑组合式复用”就是这个意思。

零基础阶段不要急着把所有 API 都记住，先掌握ref、reactive、computed、watch，再理解props、emit，最后学会用script setup组织代码，就已经覆盖了 80% 的日常开发。

4.2 生命周期函数在 Vue3 中的写法

生命周期可以理解成组件在不同阶段触发的事件。组合式 API 中，生命周期函数统一以on开头，并且在setup中调用。

常用示例：

<script setup> import { onMounted, onUnmounted } from 'vue' onMounted(() => { console.log('组件挂载完成') }) onUnmounted(() => { console.log('组件卸载') }) </script>

onMounted是初学者最常用的生命周期，因为页面加载后需要请求接口的场景很常见。注意，不要在onMounted里做太多和 DOM 无关的计算，优先把数据初始化放在setup中。

4.3 用 Vue Router 实现页面跳转

单页应用不能像传统网站那样用多个 HTML 文件跳转，需要借助路由来切换组件。Vue Router 是 Vue3 官方推荐的路由方案。

安装：

npm install vue-router@4

创建src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }) export default router

在src/main.js中注册：

import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')

然后在模板中使用：

<template> <div> <RouterLink to="/">首页</RouterLink> <RouterLink to="/about">关于</RouterLink> <RouterView /> </div> </template>

RouterLink负责生成跳转链接，RouterView负责渲染当前路由对应的组件。

这里有个非常重要的点：createWebHistory使用 HTML5 history 模式，路径干净，但在生产环境直接访问子路径时，如果服务器没有配置重写规则，会出现 404。零基础学习阶段，如果不想折腾服务器配置，可以先使用createWebHashHistory，路径会变成/#/about，刷新不会 404。

4.4 用 Pinia 管理全局状态

如果多个组件需要共享登录状态、用户信息、购物车数据，逐层通过props和emit传递会非常痛苦。Pinia 是 Vue3 推荐的状态管理库，用来保存全局数据。

安装：

npm install pinia

创建src/stores/user.js：

import { defineStore } from 'pinia' export const useUserStore = defineStore('user', { state: () => ({ token: '', nickname: '' }), actions: { setUser(token, nickname) { this.token = token this.nickname = nickname } } })

在组件中使用：

import { useUserStore } from '../stores/user' const userStore = useUserStore() userStore.setUser('abc123', '小明')

Pinia 的使用思路很直观：用useUserStore()拿到 store 实例，然后读取或修改里面的状态。对比起来，Pinia 比 Vuex 简单，没有那么多概念，对零基础更友好。

4.5 Axios 请求封装

Vue 本身不负责发 HTTP 请求，通常会搭配 Axios 使用。真实项目中，不会在每个组件里直接调用axios.get，而是在最外层封装一个统一的请求工具，用来设置接口地址、处理 token、统一处理错误。

安装：

npm install axios

创建src/utils/request.js：

import axios from 'axios' const request = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || '/api', timeout: 10000 }) request.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) request.interceptors.response.use( response => response.data, error => { if (error.response && error.response.status === 401) { window.location.href = '/login' } return Promise.reject(error) } ) export default request

组件中使用：

import request from '../utils/request' const list = ref([]) async function fetchList() { const res = await request.get('/todo/list') list.value = res.data }

这里把请求结果直接解包为response.data，组件里拿到的就是业务数据，判断逻辑更简洁。import.meta.env.VITE_API_BASE_URL是 Vite 读取环境变量的方式，你需要在自己的.env文件中定义它，才能实现不同环境使用不同接口地址。

4.6 实际项目中常见的热门扩展点

掌握了基础之后，你会在真实项目和面试题里反复看到以下扩展点：

• 动态路由：根据用户权限动态添加路由，常用于后台管理系统。
• 自定义指令：例如按钮权限指令v-permission，控制元素是否渲染。
• 强制更新：通过修改 key 或调用nextTick处理视图没有及时更新的场景。
• 组件库集成：Element Plus、Vant 等，能大幅加快页面开发速度。
• 国际化：使用 vue-i18n 处理多语言。
• 富文本编辑器：vue-quill-editor、wangEditor 等，需要在 Vue3 中确认对应版本。

这些内容不需要在入门第一天全部掌握，但可以作为后续学习地图。入门阶段最重要的仍是把响应式、组件、路由、状态管理这几条主线打通。

5. 运行验证与报错排查：从现象到根因的完整路径

5.1 验证程序是否真正可用的三个入口

很多初学者看到页面能显示就算成功，但实际开发中还要验证交互、网络和状态是否正确。下面三个入口是最常用的验证方式。

第一个是浏览器控制台。在组件代码里打印关键数据，确认数据是否符合预期：

console.log('todoList', todoList.value) console.log('remaining', remaining.value)

第二个是 Vue Devtools。它是一款浏览器插件，安装后打开开发者工具，会多出一个 Vue 面板，可以查看组件树、props、响应式数据和 Pinia 状态。遇到“页面上没显示但数据应该存在”的问题，先到这里确认数据是否真的存在。

第三个是 Network 面板。如果页面调用了接口，切换到 Network 标签，刷新页面，查看请求状态。如果接口返回 500 或 404，问题大概率不在前端视图，而在接口地址、参数或后端服务。

验证顺序建议是：先看控制台有没有报错，再看 Vue Devtools 里的数据，最后看 Network 里的请求。大多数问题都能在这三步里定位。

5.2 三个高频 Vue3 报错和解决方法

报错是入门过程中最正常的现象，关键是掌握从现象倒推根因的方法。下面三个是零基础阶段最高频的问题。

其中一个非常典型的错误是：接口返回的数据结构是{ data: { list: [...] } }，但你直接访问res.list，结果就是 undefined。这时候不要怀疑 Vue 有问题，先打印res，看清楚结构再写访问路径。

5.3 生产环境发布前的检查清单

开发环境跑通后，生产环境部署还需要额外确认下面这些点：

• 执行npm run build，确认构建是否通过，产物是否生成到dist目录。
• 如果使用createWebHistory，后端服务器需要把不存在的路由重写到index.html。
• 接口跨域问题：开发环境可以通过 Vite proxy 解决，生产环境一般通过 Nginx 反向代理或后端开启 CORS。
• 环境变量：区分开发、测试、生产环境，不要在生产环境使用测试库地址。
• 清理调试代码：去掉多余的console.log，避免敏感信息暴露。
• 资源路径：如果部署在子目录，需要修改 Vite 的base配置，否则 CSS、JS 路径会不对。
• 监控和回滚：记录发布版本，保留上一个构建产物，出问题时能快速回滚。

这些清单不是入门第一天就要做完，但一旦你要把 Vue3 项目推到线上，就必须逐项检查。

5.4 面试中常考的 Vue3 知识边界

这篇文章并不以面试培训为核心，但很多零基础学习者最终会走向前端岗位，面试题是最直接的自测方式。建议学习完基础后，能用自己的话回答下面几个问题：

• ref和reactive有什么区别？
• computed和watch有什么区别？
• v-if和v-show有什么区别？
• Vue3 组件通信有哪些方式？
• Vue Routerhistory 模式和 hash 模式有什么区别？
• Pinia 和 Vuex 的核心差异是什么？

如果这些问题大部分能回答出来，说明你已经不是小白级别，而是具备了 Vue3 开发者的基本知识边界。

6. 5小时学习路线安排与最佳实践建议

6.1 5小时时间分配表

“5小时学会 Vue3”并不是一个绝对保证，而是一套高效的学习节奏。如果完全零基础，建议按照下面表格分配时间。

这个安排是循序渐进的。千万不要在前 30 分钟去研究Proxy源码，也不要一开始就陷入组件库文档，先把最小闭环跑通。

6.2 零基础最容易踩的 3 个坑

第一个坑：在 JavaScript 中使用ref时忘记写.value。模板中{{ count }}会自动解包，但setup里访问count必须写成count.value。错误写法是：

const count = ref(0) function increment() { count++ // 错误：count 是 ref 对象，不能直接 ++ }

正确写法：

function increment() { count.value++ }

第二个坑：解构reactive对象后丢失响应式。

const state = reactive({ count: 0 }) // 错误：解构出来的 count 不再是响应式 const { count } = state

如果确实需要解构，可以使用toRefs，或者干脆用多个ref。入门阶段推荐先用ref，等熟悉了再根据场景选择reactive。

第三个坑：在setup中使用this。Vue3 组合式 API 中setup在执行时组件实例还未完全创建，this不是指向组件，而是undefined。因此不要在setup里写：

setup() { console.log(this) // undefined }

使用<script setup>时没有这个问题，因为它会自动处理上下文。你只需要把要使用的数据和函数像普通 JavaScript 那样定义即可。

6.3 从入门到精通的进阶路径

如果你已经完成了上面 5 小时路线，下一步就应该进入项目实战。推荐按下面顺序进阶：

• 先做一个后台管理系统，包含登录、动态菜单、列表查询、权限控制。
• 引入 TypeScript，提升代码的可维护性和类型安全。
• 学习组件库 Element Plus，快速搭建后台页面。
• 理解 Vite 配置，掌握代理、别名、打包优化。
• 学习 Nuxt 或服务端渲染相关方案，应对 SEO 场景。
• 关注性能优化，了解懒加载、虚拟列表、响应式监听粒度。

这个过程中，动态路由、自定义指令、后台管理系统、组件封装这些常见业务场景会反复出现。你接触到的知识会从“能用”变成“好用”，再到能应对复杂业务。

6.4 给零基础学习者的实践建议

学 Vue3 最容易犯的错误是只看视频、不动手。5 小时学习路线的最后 30 分钟，建议不要停留在“我看懂了”的状态，而是关掉教程，自己从创建项目开始，把待办事项页面重新写一遍。第一次写不出很正常的，卡住就翻笔记，再写第二次，直到不依赖参考也能完成。

练习时可以选择一个明确的小目标，比如：

• 做一个能添加、删除、筛选的待办事项应用。
• 做一个调接口展示新闻列表的页面。
• 做一个带登录页和首页跳转的小后台。

每完成一个，你的 Vue3 知识就会更立体。真正让你“学会”的不是教程里的知识密度，而是你在处理“数据为什么没更新”“请求为什么没发出去”“组件为什么没渲染”这类问题后积累起来的排查能力。