Vue技术的概念

Vue（全称：Vue.js）是一个用于构建用户界面（UI）**的**渐进式 JavaScript 框架**，适合开发前端应用程序。它特别适合构建交互性强的单页应用（SPA, Single-Page Applications），也可以和其它项目整合使用。其核心思想是MVVM（Model-View-ViewModel）**。

一、Vue 是什么？简明概述

  • 作者：尤雨溪（尤大）
  • 设计理念：
    • 渐进式（Progressive）——可以只用一部分（如视图层），也可以配合 Vue Router、Vuex 等构建大型应用。
    • 响应式数据绑定（Reactive Binding）——模型（data）变了，视图（DOM）自动更新。
    • 组件化（Component-based）——易于模块化开发和复用。

二、Vue 如何运行？（从 0 到 1）

方式一：CDN 快速上手（适合初学）

  1. 创建一个 HTML 文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>

  <script>
    const { createApp } = Vue
    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>
  1. 用浏览器打开这个 HTML 文件，就可以看到 “Hello Vue!”。

方式二：Vue CLI 项目构建（适合正式开发）

1. 安装 Node.js

去官网下载安装：https://nodejs.org/

2. 安装 Vue CLI（Vue 3 推荐使用 Vite，见下方）

1
npm install -g @vue/cli

3. 创建 Vue 项目

1
2
3
vue create my-vue-app
cd my-vue-app
npm run serve

访问 http://localhost:8080 即可看到页面。

方式三：Vite 构建 Vue 3 项目（推荐）

Vite 是新一代前端构建工具，快得飞起。

1. 安装 Vite + Vue 项目

1
2
3
4
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

2. 启动后访问：

默认是 http://localhost:5173

三、学习资源推荐

官方教程

中文视频教程

  • B站搜索「Vue3 入门」，推荐「黑马程序员」「狂神说」

书籍推荐

  • 《Vue.js 快速入门与项目实战》
  • 《深入浅出 Vue.js》

四、下一步建议

如果你已经有 JavaScript 基础，建议直接上 Vue3 + Vite 模板。如果你之前主要做后端或 Java 桌面开发，建议从 Vue 的响应式原理和组件机制入手。