Vue 3 入门

这一阶段你将亲手创建自己的第一个 Vue 项目：装好 Node、跑起来、学会组件 / 响应式 / 路由 / UI 组件库，最后用 Axios 从网上一个公开接口拿到真数据并显示出来。

先说人话：这一阶段要干成啥

目标很具体：自己创建一个 Vue 项目并跑起来，改页面、加按钮，最后从一个公开接口拿到真数据显示在页面上。上一篇《打地基》的网页是「一个孤零零的 html 文件」，这一阶段你要拥有一个「正经的前端工程」。

💡 比喻： 上一篇《打地基》你学会了「开车前认识车」，这一阶段就是「在停车场里练手」——低速、安全，先建立操控感。

装 Node & 创建你的第一个 Vue 项目

先把「工地」搭好。这一步跑通了，后面才有项目可练。跟着敲即可。

第一步：装 Node.js（顺便带上 npm）

💡 比喻： Node.js 是运行前端工具的「发动机」，npm 是它自带的「应用商店」，帮你下载安装各种别人写好的包（Vue、Element Plus 都靠它装）。

• 去 Node 官网下载 LTS 版（长期支持版，稳），一路下一步装完。
• 装完在命令行敲 node -v 和 npm -v，能打印出版本号（如 v20.x）就成功了。

提示

打印不出版本号？多半是没装好或需要重开命令行 / 重启电脑。把报错发给 AI 基本能解决。

第二步：一条命令生成 Vue 项目

# 在你想放项目的文件夹里敲（比如桌面）
npm create vue@latest

# 它会问你一串问题：项目名随便起（如 my-vue-app），
# 其它选项新手一路回车用默认即可

cd my-vue-app      # 走进刚生成的项目文件夹
npm install       # 装依赖（就是去"应用商店"把要用的包下下来，稍等一会）
npm run dev       # 启动！它会给你一个网址 http://localhost:5173

把那个 localhost 网址复制到浏览器打开——你的第一个 Vue 项目跑起来了。这就是上一篇《打地基》混过眼熟的 npm run dev，现在真正用上了。

建立你的开发节奏

项目跑着别关，改代码保存后，浏览器会自动刷新。以后你就在「改代码 → 看浏览器变化」之间来回，这是前端开发的日常。

Vue 到底是什么

一句话：帮你把「数据」和「界面」自动绑在一起的前端框架。

没有 Vue vs 有 Vue

过去要手动改界面：数据变了，你得一行行写代码去找到那块 DOM、改它的文字。麻烦又易错。

💡 比喻： Vue 像一块智能电子价签。你只管改「后台的价格数字」，货架上的价签自动跟着变，不用你跑去一个个手动换牌。这就是「响应式」。

你改数据 → Vue 自动侦测到 → 自动更新对应的界面，不用你手动操作 DOM

提示

本阶段学 Vue 3 的 <script setup> 组合式写法，这是目前新项目的主流。

组件 & 模板语法

Vue 把页面拆成一个个「积木块」，每块叫一个组件。

组件 = 可复用的积木

💡 比喻： 一个页面 = 一堵乐高墙。导航栏、按钮、卡片各是一块乐高（组件），拼起来就是完整页面。同一块积木能到处复用。

一个 Vue 组件就是一个 .vue 文件，分三部分：

<template>                <!-- ① 长什么样（HTML 骨架） -->
  <h2>{{ title }}</h2>
  <button @click="count++">点了 {{ count }} 次</button>
</template>

<script setup>            // ② 逻辑（JS 部分）
import { ref } from 'vue';
const title = '我的第一个组件';
const count = ref(0);
</script>

<style scoped>            /* ③ 样式（只作用于本组件） */
button { color: #6ea8ff; }
</style>

模板里最常用的 4 个语法

写法	作用
{{ 变量 }}	把数据显示到页面上（插值）
@click="函数"	点击时触发（事件绑定，@ 是 v-on 简写）
:src="变量"	把属性绑到数据（: 是 v-bind 简写）
v-if / v-for	条件显示 / 循环列表

<!-- v-for 循环渲染一个列表 -->
<li v-for="item in list" :key="item.id">
  {{ item.name }}
</li>

响应式 ref / reactive

Vue 的灵魂：把数据变成「会自动通知界面」的数据。

ref 和 reactive

ref() — 单个值

import { ref } from 'vue';

const count = ref(0);          // 包装单个值
count.value++;                 // 改它要加 .value（模板里不用加）

const name = ref('张三');      // 字符串也一样
name.value = '李四';           // 改值必须 .value

记忆口诀： 「单值用 ref，改它点 value」

reactive() — 一个对象

import { reactive } from 'vue';

const user = reactive({       // 包装一个对象
  name: '张三',
  age: 25
});
user.age = 26;                 // 直接改属性，不用 .value

记忆口诀： 「对象用 reactive，直接改就行」

提示

新手记忆法： 单个值用 ref、一堆值用 reactive。拿不准全用 ref 也行。改 ref 记得 .value，这是最常踩的坑。

Vue Router 页面跳转

一个网站有很多页面（首页、列表页、详情页），Router 负责「谁对应哪个网址」。

路由 = 网址和页面的对照表

💡 比喻： Router 就是商场楼层导览图。输入网址 /user（去 3 楼），它就带你到用户页面；/order 就去订单页面。

// 路由表：网址 → 显示哪个组件
const routes = [
  { path: '/',      component: Home },
  { path: '/user',  component: User },
  { path: '/order', component: Order }
];

页面里怎么跳转

<!-- ① 模板里用链接跳 -->
<router-link to="/user">去用户页</router-link>

// ② 代码里用方法跳（比如点按钮后）
import { useRouter } from 'vue-router';
const router = useRouter();
router.push('/order');   // 跳到订单页

提示

现在流行「单页应用（SPA）」：切页面时不整页刷新，只换中间那块内容，所以快、丝滑。

Element Plus 组件库

别人写好的一整套漂亮 UI 组件，按钮、表格、表单、弹窗，拿来即用。

不用自己造轮子

💡 比喻： Element Plus 像宜家家具。你要个表格、要个日期选择器，不用自己从零做，直接搬现成的过来摆好就行。

<!-- 一个带样式的按钮，直接用 -->
<el-button type="primary">保存</el-button>

<!-- 一个表格，把 tableData 数据丢进去就自动渲染 -->
<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" />
  <el-table-column prop="age"  label="年龄" />
</el-table>

提示

学法建议：不用背组件。要用哪个（表格 / 弹窗 / 表单）就去 Element Plus 官网 复制示例代码，改改数据就成。会查文档 = 会用。

Axios 调接口（第一次拿到真数据）

这是全栈的关键一步：前端怎么向后端「要数据」。现在你还没有自己的后端（后端速通的《Java 后端》篇才写），所以先用网上的免费公开测试接口练手。

Axios = 帮你发请求的快递员

💡 比喻： Axios 是跑腿小哥。你告诉他「去某个网址取个包裹」，他跑一趟，把对方返回的数据带回来交给你。

先装它：命令行敲 npm install axios。然后就能用了：

import axios from 'axios';

async function loadPosts() {
  // 向一个公开测试接口要数据，await 等它返回
  const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
  console.log(res.data);   // 返回的数据在 res.data 里，是一个数组
}

// 提交数据用 post
await axios.post('https://jsonplaceholder.typicode.com/posts', { title: '你好' });

提示

jsonplaceholder.typicode.com 是一个免费的「假数据」接口，专门给新手练手用，随便调不会出事。等后端速通的《Java 后端》篇你写好自己的后端，把网址换成自己的即可。

GET 和 POST 的区别

方法	干嘛	大白话
GET	取数据	「给我看看」——查列表、查详情
POST	提交数据	「收下这个」——新增、提交表单
PUT	修改数据	「改成这样」——更新
DELETE	删除数据	「删掉它」

这就是全栈的主动脉

前端 Axios 发请求 → 服务器接住处理 → 查数据库 → 把数据装进「信封」返回 → 前端拿到 res.data 显示。今天你连的是别人的服务器，后端速通的《Java 后端》篇那个服务器换成你自己写的。

关于 Vite（项目的启动器，先会用就行）

你新建的项目就是用 Vite 驱动的，所以能用 npm run dev 秒启动、改代码自动刷新。

提示

现在只需记住两条命令：npm run dev 本地开发用、npm run build 打包上线用。原理后端速通的《全栈打通》篇再说，别在这卡住。

动手实践 · 做一个「文章列表」小页面

把本页所有知识串成一个真东西。在你自己创建的项目里做，遇到卡点回对应小节查。

跟着做（做不完就分几天）

1. 确认项目在跑。npm run dev 启动，浏览器开着 localhost:5173。
2. 先练手感。打开 src/App.vue，把里面的文字随便改改，保存，看浏览器自动变。删掉用不上的示例代码，剩个空壳。
3. 做个计数器。用 ref(0) + 一个按钮 @click="count++"，页面显示 {{ count }}。点一下加一，说明响应式在你手里了。
4. 装 Element Plus。命令行敲 npm install element-plus，照它官网「快速开始」把它引入项目，然后把你的普通按钮换成 <el-button type="primary">——立刻变漂亮。
5. 装 Axios 拿真数据。npm install axios，写一个 loadPosts() 函数请求 jsonplaceholder.typicode.com/posts，把结果存进 ref([])。
6. 渲染列表。用 v-for 把拿到的文章标题循环显示出来，或者直接丢给 <el-table> 变成表格。刷新页面，看到几十条真数据——这一刻值得截图纪念。
7. 加第二个页面。新建 About.vue，配置 Vue Router，加一个 <router-link> 在两个页面之间跳转（新建项目时如果选了 Router，参考它生成的示例照葫芦画瓢）。
8. Git 存档。上一篇《打地基》学的用起来：git init → git add . → git commit -m "我的第一个 Vue 项目"。以后每完成一步都存一档。

提示

卡住了怎么办：① F12 看 Console 红字报错；② 把报错 + 相关代码贴给 AI；③ 对照 Element Plus / Vue 官网示例检查抄漏了哪句。这三板斧能解决 95% 的问题。

什么才算合格

合格标准

1. 建项目：不看教程，能用 npm create vue@latest 独立新建一个项目并跑起来
2. 看得懂：打开任意 .vue 文件，能说出 template / script / style 三块各干嘛
3. 响应式：计数器能独立写出来，知道改 ref 要用 .value
4. 组件库：会去 Element Plus 官网找组件、抄示例、改成自己的数据
5. 调接口：上面实践的「文章列表」页面真实做出来了，页面上有接口返回的真数据
6. 路由：项目里有两个页面，能互相跳转
7. 口头测试：能讲清楚「点按钮 → Axios 请求 → 数据回来 → v-for 渲染」这条链路

没达标怎么办

最常见的卡点是「装依赖失败」和「忘写 .value」。前者把报错发给 AI（多半是网络问题），后者回第 ④ 节再看一遍。做不出列表页就先做计数器，由小到大，不许跳关。