用 Vue 3 做出第一个能跑的页面

前端框架里 Vue 最好上手。学会组件、响应式、路由、UI 组件库、用 Axios 调接口，你就能改页面、加按钮、把后端数据显示出来了。

建议 2 周前提：会一点 JavaScript 目标：改页面 + 调通接口

本页目录

① Vue 是什么 ② 组件 & 模板语法 ③ 响应式 ref/reactive ④ Vue Router 路由 ⑤ Element Plus 组件库 ⑥ Axios 调接口 ✅ 阶段验收

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

目标很具体：在一个现成的 Vue 项目里，改一段文字、加一个按钮、点按钮去后端要数据并显示出来。做到这三件事，你就摸到前端开发的门了。

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

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()：包装单个值（数字、字符串、布尔）。改的时候要写 .value。
reactive()：包装一个对象。直接改属性即可。

import { ref, reactive } from 'vue';

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

const user = reactive({       // 一个对象
  name: '张三',
  age: 25
});
user.age = 26;                 // 直接改，界面自动更新

新手记忆法：单个值用 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 调接口（前后端第一次握手）

这是全栈的关键一步：前端怎么向后端「要数据」。

📮Axios = 帮你发请求的快递员

比喻：Axios 是跑腿小哥。你告诉他「去后端 /api/products 取个包裹」，他跑一趟，把后端返回的数据带回来交给你。

import axios from 'axios';

async function loadProducts() {
  // 向后端要商品列表，await 等它返回
  const res = await axios.get('/api/products');
  console.log(res.data);   // 后端返回的数据在 res.data 里
}

// 提交数据用 post
await axios.post('/api/user', { name: '张三' });

GET 和 POST 的区别

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