VUE3 Learning

ChatGPT 给的 VUE 教程.

考虑到你有 Python、Java、Go 后端开发经验，我会采用偏工程化的讲解方式，不会只讲 HTML、CSS 这些基础知识，而是重点讲 Vue 的核心机制、组件设计、数据绑定、前后端交互以及项目结构。

教程以 Vue 3 + Composition API + Vite + JavaScript 为基础，后续可以自然扩展到 TypeScript。

Vue 3 完整入门教程

[Top 5 Frontend Masters Courses to Learn Vue.js in 2026

by javinpaul

Javarevisited

Medium](https://images.openai.com/static-rsc-4/0WkdIGX3MEiRCA8DjezIyZ90ml3inTjhhY7ow8a0btvCQHVdGpOz5zraCZo1SX9EsTq3xKWNdltoMwI34sVEaKDshlYRxXFzUcF1S_z2wh6yP4ksKjiPlT2aWBYiRAwgMbrfbUI3ElRNW3KjXqO5zSxbLdy1T2AeVcD8WOlERqI?purpose=inline)

Vue 3 学习路线

从零基础到能够独立开发一个前后端分离的 Web 应用

1. 第一章：Vue 是什么

   Vue 的定位、工作原理、与 React 的区别。

2. 第二章：开发环境搭建

   Node.js、npm、Vite、创建 Vue 项目。

3. 第三章：模板与数据绑定

   插值、指令、事件、条件渲染、列表渲染。

4. 第四章：响应式系统

   ref、reactive、computed、watch。

5. 第五章：组件开发

   组件、Props、Emit、组件通信。

6. 第六章：生命周期与组合式 API

   生命周期钩子、Composable、代码复用。

7. 第七章：前后端交互

   Axios、REST API、异步请求、JWT。

8. 第八章：路由管理

   Vue Router、动态路由、路由守卫。

9. 第九章：状态管理

   Pinia、全局状态、用户登录状态。

10. 第十章：实战项目

    开发一个完整的管理后台。

第一章：Vue 是什么？

1.1 Vue 的定位

Vue.js 是一个用于构建用户界面的 JavaScript 框架。

简单来说：

假设你使用 Flask 或 Spring Boot 开发后端：

• 后端负责业务逻辑、数据库操作、API 接口。
• Vue 负责前端页面、用户交互、数据展示。
• 两者通过 HTTP API 进行通信。

典型架构如下：

Browser（浏览器）

用户操作、页面展示

Vue 3

组件 · 响应式数据 · 路由

HTTP / JSON / REST API

Backend Server

Spring Boot / Flask / Go

业务逻辑 · 身份认证 · 数据处理

Database

SQL Server / PostgreSQL / Redis

Vue 本身不负责数据库访问，也不需要运行在后端服务器上。构建完成后，它可以作为静态资源部署到 Nginx、Azure Blob Static Website 等地方。

1.2 Vue 与传统 HTML + JavaScript 有什么区别？

先看传统 JavaScript：

<div id="app">
    <span id="message">Hello</span>
    <button onclick="changeMessage()">修改</button>
</div>

<script>
    function changeMessage() {
        document.getElementById("message").innerText =
            "Hello Vue";
    }
</script>

这里有一个问题：你需要自己找到 DOM 元素，然后修改它。

Vue 则不同：

<div id="app">
    <span></span>
    <button @click="changeMessage">
        修改
    </button>
</div>

<script>
const app = Vue.createApp({
    data() {
        return {
            message: "Hello"
        }
    },
    methods: {
        changeMessage() {
            this.message = "Hello Vue";
        }
    }
});

app.mount("#app");
</script>

Vue 会自动跟踪数据变化，并更新对应的页面。

这就是 Vue 最重要的思想：

数据发生变化，界面自动更新。

你不再需要手动操作 DOM。

1.3 Vue 3 的核心概念

先认识几个重要概念：

概念	作用	类比
Component	页面组件	Java 类或模块
Template	HTML 模板	页面视图
ref	创建响应式数据	可观察变量
reactive	创建响应式对象	可观察对象
computed	计算属性	派生数据
watch	监听数据变化	事件监听器
Props	父组件传数据给子组件	方法参数
Emit	子组件向父组件发送事件	回调函数

接下来会逐个展开。

第二章：搭建 Vue 开发环境

2.1 安装 Node.js

Vue 3 的现代开发工具链通常使用 Node.js。

官网：

Node.js 官方网站

安装完成后检查：

node -v
npm -v

2.2 创建 Vue 项目

推荐使用 Vite。

Vite 是 Vue 官方推荐的现代开发工具之一。

执行：

npm create vue@latest

按照提示选择项目配置。

建议初学阶段：

Project name: vue-demo

TypeScript: No
JSX: No
Vue Router: Yes
Pinia: Yes
Vitest: No
E2E Testing: No
ESLint: Yes
Prettier: Yes

进入项目：

cd vue-demo

npm install

npm run dev

浏览器打开终端提示的地址，通常是：

http://localhost:5173

2.3 项目目录结构

一个典型的 Vue 3 项目：

vue-demo/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── router/
│   │   └── index.js
│   ├── stores/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.js

几个重要目录：

• components：通用组件。
• views：页面级组件。
• router：路由配置。
• stores：全局状态管理。
• App.vue：应用根组件。
• main.js：应用入口。

特别注意：.vue 是 Vue 的单文件组件格式（Single File Component，SFC）。

一个 .vue 文件通常包含三个部分：

<script setup>
// JavaScript 逻辑
</script>

<template>
  <!-- HTML 模板 -->
</template>

<style scoped>
/* CSS 样式 */
</style>

这三个部分分别负责逻辑、页面和样式。

第三章：模板与数据绑定

这是 Vue 最基础、也是使用频率最高的部分。

3.1 插值表达式

在 HTML 模板中，使用双大括号 `` 显示变量。

<script setup>
const username = "Tom";
const age = 25;
</script>

<template>
  <h1>Hello, </h1>
  <p>Age: </p>
  <p>Next year: </p>
</template>

Vue 会把变量的值渲染到页面中。

3.2 v-bind：绑定 HTML 属性

例如，动态设置图片地址：

<script setup>
const imageUrl = "/images/logo.png";
</script>

<template>
  <img v-bind:src="imageUrl" />
</template>

v-bind 可以简写成冒号：

<img :src="imageUrl" />

常见用途：

<div :class="activeClass"></div>

<button :disabled="isDisabled">提交</button>

<a :href="website">访问网站</a>

3.3 v-on：绑定事件

例如按钮点击：

<script setup>
function sayHello() {
  alert("Hello Vue");
}
</script>

<template>
  <button v-on:click="sayHello">
    点击我
  </button>
</template>

简写：

<button @click="sayHello">
  点击我
</button>

常见事件：

Vue 写法	作用
@click	点击
@change	内容变化
@input	输入
@submit	表单提交
@keyup	键盘按键

3.4 v-if：条件渲染

<script setup>
const isLogin = true;
</script>

<template>
  <div v-if="isLogin">
    欢迎回来
  </div>

  <div v-else>
    请先登录
  </div>
</template>

v-if 为 false 时，对应元素不会被渲染。

3.5 v-for：循环渲染

后端开发人员应该很容易理解这个概念。

<script setup>
const users = [
  { id: 1, name: "Tom", age: 20 },
  { id: 2, name: "Jack", age: 25 },
  { id: 3, name: "Lucy", age: 22 }
];
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
       - 
    </li>
  </ul>
</template>

这里的 :key 很重要。

它帮助 Vue 识别列表中的每一个元素，在列表更新时提高 DOM 更新效率。

第四章：Vue 响应式系统

重点章节

如果只学习一个 Vue 核心知识，我建议优先理解响应式系统。

4.1 ref

ref 用于创建响应式数据。

<script setup>
import { ref } from "vue";

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <h1>9</h1>

  <button @click="increment">
    +1
  </button>
</template>

这里有个特殊地方：

JavaScript 中使用：

count.value++;

模板中却直接使用：

9

为什么？

因为 Vue 模板会自动解包顶层的 ref。

记住：在 JavaScript 中访问 ref，通常需要 .value；在模板中通常不需要。

4.2 reactive

reactive 用于创建响应式对象。

<script setup>
import { reactive } from "vue";

const user = reactive({
  name: "Tom",
  age: 25,
  address: "Amsterdam"
});

function updateUser() {
  user.age++;
  user.name = "Jack";
}
</script>

<template>
  <p></p>
  <p></p>

  <button @click="updateUser">
    更新用户
  </button>
</template>

与 ref 的区别：

对比	ref	reactive
基本类型	支持	不适合
对象类型	支持	支持
JS 中访问	.value	直接访问属性
替换整个对象	可以	不建议
使用频率	很高	很高

我的建议：初学时优先使用 ref，需要管理复杂对象时使用 reactive。

4.3 computed：计算属性

假设有两个数字：

const price = ref(100);
const quantity = ref(5);

总价格：

const total = computed(() => {
  return price.value * quantity.value;
});

完整示例：

<script setup>
import { ref, computed } from "vue";

const price = ref(100);
const quantity = ref(5);

const total = computed(() => {
  return price.value * quantity.value;
});
</script>

<template>
  <p>单价：</p>
  <p>数量：</p>
  <p>总价：</p>
</template>

当 price 或 quantity 变化时，total 会自动重新计算。

可以把 computed 理解为一个具有缓存机制的派生数据。

4.4 watch：监听数据变化

有时候我们希望某个数据变化时，自动执行一段代码。

例如：

<script setup>
import { ref, watch } from "vue";

const keyword = ref("");

watch(keyword, (newValue, oldValue) => {
  console.log("旧值:", oldValue);
  console.log("新值:", newValue);
});
</script>

<template>
  <input v-model="keyword" />
</template>

当输入框内容变化时，watch 就会执行。

也可以监听多个变量：

watch(
  [price, quantity],
  ([newPrice, newQuantity]) => {
    console.log(newPrice, newQuantity);
  }
);

computed 和 watch 如何选择？

这是一个很常见的问题。

• computed：根据已有数据计算新数据。
• watch：当数据发生变化时执行副作用，例如 HTTP 请求、日志记录、持久化。

第五章：组件开发

组件是 Vue 工程化开发最重要的概念之一。

例如一个后台管理系统：

App.vue
├── Header.vue
├── Sidebar.vue
├── Dashboard.vue
│   ├── Statistics.vue
│   └── Chart.vue
└── Footer.vue

每个组件都可以独立开发和维护。

5.1 创建组件

创建 UserCard.vue：

<script setup>
const username = "Tom";
</script>

<template>
  <div class="user-card">
    用户：
  </div>
</template>

<style scoped>
.user-card {
  padding: 20px;
  border: 1px solid #ddd;
}
</style>

然后在其他组件中使用：

<script setup>
import UserCard from "./components/UserCard.vue";
</script>

<template>
  <UserCard />
</template>

5.2 Props：父组件向子组件传递数据

这个概念可以类比 Java 方法参数。

子组件 UserCard.vue：

<script setup>
defineProps({
  username: String,
  age: Number
});
</script>

<template>
  <div>
    <p></p>
    <p></p>
  </div>
</template>

父组件：

<script setup>
import UserCard from "./UserCard.vue";
</script>

<template>
  <UserCard
    username="Tom"
    :age="25"
  />
</template>

5.3 Emit：子组件向父组件发送事件

子组件：

<script setup>
const emit = defineEmits(["user-click"]);

function handleClick() {
  emit("user-click", {
    userId: 1001
  });
}
</script>

<template>
  <button @click="handleClick">
    点击用户
  </button>
</template>

父组件：

<script setup>
import UserCard from "./UserCard.vue";

function onUserClick(data) {
  console.log(data.userId);
}
</script>

<template>
  <UserCard @user-click="onUserClick" />
</template>

记住这两个方向：

Parent Component

Props：父传子

Child Component

Emit：子通知父

Parent Component

第六章：生命周期与组合式 API

6.1 生命周期

Vue 组件从创建到销毁，有一系列生命周期。

常用生命周期：

生命周期	作用
onMounted	组件挂载完成
onUpdated	组件更新完成
onUnmounted	组件卸载完成
onBeforeMount	挂载之前
onBeforeUnmount	卸载之前

例如：

<script setup>
import { onMounted, onUnmounted } from "vue";

onMounted(() => {
  console.log("组件已经加载");
});

onUnmounted(() => {
  console.log("组件已经销毁");
});
</script>

典型用途：

• onMounted：初始化页面、请求后端数据。
• onUnmounted：清理定时器、取消事件监听。

6.2 Composable：逻辑复用

这是 Vue 3 很有价值的功能。

假设多个组件都需要获取当前时间。

可以创建 useClock.js：

import { ref, onMounted, onUnmounted } from "vue";

export function useClock() {
  const now = ref(new Date());

  let timer = null;

  onMounted(() => {
    timer = setInterval(() => {
      now.value = new Date();
    }, 1000);
  });

  onUnmounted(() => {
    clearInterval(timer);
  });

  return {
    now
  };
}

组件中使用：

<script setup>
import { useClock } from "./useClock";

const { now } = useClock();
</script>

<template>
  <p></p>
</template>

这和 Python 中封装公共模块、Java 中封装可复用服务有相似之处。

第七章：Vue 与后端 API 交互

这一章与你的后端开发经验联系最紧密。

Vue 通常使用 Axios 调用 REST API。

7.1 安装 Axios

npm install axios

7.2 封装 HTTP 客户端

创建 src/utils/http.js：

import axios from "axios";

const http = axios.create({
  baseURL: "/api",
  timeout: 10000
});

http.interceptors.request.use(config => {
  const token = localStorage.getItem("token");

  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

http.interceptors.response.use(
  response => response.data,
  error => {
    console.error("API Error:", error);
    return Promise.reject(error);
  }
);

export default http;

这和你在后端项目中封装统一的 HTTP Client、拦截器非常相似。

7.3 调用后端接口

创建 src/api/user.js：

import http from "../utils/http";

export function getUsers() {
  return http.get("/users");
}

export function getUserById(id) {
  return http.get(`/users/${id}`);
}

组件中：

<script setup>
import { ref, onMounted } from "vue";
import { getUsers } from "../api/user";

const users = ref([]);
const loading = ref(false);
const error = ref("");

async function loadUsers() {
  loading.value = true;
  error.value = "";

  try {
    users.value = await getUsers();
  } catch (e) {
    error.value = "获取用户失败";
  } finally {
    loading.value = false;
  }
}

onMounted(loadUsers);
</script>

<template>
  <div v-if="loading">加载中...</div>

  <div v-else-if="error"></div>

  <ul v-else>
    <li v-for="user in users" :key="user.id">
      
    </li>
  </ul>
</template>

这样就完成了一个完整的前后端交互过程。

第八章：Vue Router 路由管理

如果你开发的是管理后台，通常需要多个页面：

/login
/dashboard
/users
/orders
/settings

Vue Router 负责页面切换。

安装：

npm install vue-router

配置 src/router/index.js：

import { createRouter, createWebHistory } from "vue-router";

import Dashboard from "../views/Dashboard.vue";
import Users from "../views/Users.vue";

const routes = [
  {
    path: "/dashboard",
    component: Dashboard
  },
  {
    path: "/users",
    component: Users
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在 main.js 注册：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App)
  .use(router)
  .mount("#app");

在 App.vue 中：

<template>
  <router-link to="/dashboard">
    Dashboard
  </router-link>

  <router-link to="/users">
    Users
  </router-link>

  <router-view />
</template>

router-view 就是当前路由对应页面的显示位置。

第九章：Pinia 状态管理

当多个组件都需要访问同一份数据时，可以使用 Pinia。

例如：

• 用户登录信息。
• 用户权限。
• 全局配置。
• 当前选中的工厂。
• 全局通知。

安装：

npm install pinia

创建 src/stores/user.js：

import { defineStore } from "pinia";
import { ref } from "vue";

export const useUserStore = defineStore("user", () => {

  const username = ref("");
  const token = ref("");

  function login(name, accessToken) {
    username.value = name;
    token.value = accessToken;
  }

  function logout() {
    username.value = "";
    token.value = "";
  }

  return {
    username,
    token,
    login,
    logout
  };
});

在 main.js 中注册：

import { createPinia } from "pinia";

const pinia = createPinia();

createApp(App)
  .use(pinia)
  .mount("#app");

在组件中使用：

<script setup>
import { useUserStore } from "./stores/user";

const userStore = useUserStore();

function login() {
  userStore.login("Tom", "token-123");
}
</script>

<template>
  <p></p>
  <button @click="login">登录</button>
</template>

第十章：实战项目

学完上面的知识，建议不要继续堆积零散知识点，而是做一个完整项目。

我建议开发一个工业设备监控管理系统。

[Industrial IoT Dashboard UIUX Design

AI Powered by ilias miah ✪ Hire Now on Dribbble](https://images.openai.com/static-rsc-4/KF0vwbA3iHKQMY1Tk80zZkwBgDWCFdkoF2_WBnszBwef6gMmNJAT5ZO0x-nDaxtlRSesIzR2teby9Uf6VK2TCpsg6hWk_VS2LuDfS9gdzPGVPY3PBt7UP5ApQfKLnGClCKXhbEwsmPH8bwIi9yl-wXDf1btDwVBycaexAEfkA5Y?purpose=inline)

[HEITEC Smart Factory Starter-Kit

Siemens](https://images.openai.com/static-rsc-4/6hA_JSuCwyTSCrgSi3Lgi-XGOQORR4YAGmXLIcdT23n9gYDQFNqKiB7Y0WRatfgQP85ZgHV9ytmZjp9Y5IKcEFBp6AVMicIbYDYW9qwzBq8rchpdvw64IOyIo98eOYLBv_Yuf7ZhVllUYiOdTqPPiBlNuSaXH7IeVwg3bfcCZcw?purpose=inline)

Visualizing IoT Data at Scale With Hopara and TimescaleDB - Embedded Computing Design

12

项目功能：

模块	功能	对应 Vue 知识
登录	用户登录、JWT	Axios、Router
首页	设备运行统计	Component
设备管理	设备列表、搜索、分页	ref、computed
设备详情	设备运行参数	Props、Emit
实时监控	实时数据展示	WebSocket
告警管理	告警列表、确认告警	API、watch
用户管理	用户和权限	Pinia、Router

推荐技术栈：

Frontend:
  Vue 3
  Vite
  JavaScript
  Vue Router
  Pinia
  Axios
  Element Plus
  ECharts

Backend:
  Spring Boot / Flask / Go

Database:
  SQL Server / PostgreSQL

Communication:
  REST API
  WebSocket

最后：Vue 学习中最重要的几个知识点

如果把 Vue 3 的知识体系压缩一下，我认为应该按照这个顺序掌握：

优先级	知识	掌握目标
1	ref / reactive	理解响应式
2	Template / Directive	能写页面
3	Component / Props / Emit	能拆分组件
4	computed / watch	能处理数据逻辑
5	Axios	能调用后端
6	Vue Router	能开发多页面
7	Pinia	能管理全局状态
8	WebSocket	能开发实时应用

我的建议：不要一开始就学习 TypeScript、复杂状态管理或者大型 UI 框架。先用原生 Vue 3 把响应式和组件机制理解透彻。

这和你熟悉的后端开发思路结合起来，会比较容易建立完整的前后端分离开发能力。

下一步学习建议

我可以接着带你做一个循序渐进的 Vue 实战课程：从一个简单的设备列表页面开始，逐步加入搜索、分页、API、登录认证和 WebSocket 实时监控。