S14-B01 · 前端全景与 Vue 3 起步

适用读者：后端转前端、或只会写 jQuery 的人。本系列第一篇。
前置：S02 ✅（HTTP 与浏览器）、S01 ✅（工具链）。
实测环境：Node 22.20 / Vite 5.4.21 / Vue 3.5（2026-11-05）。
覆盖旧文：1472(49) 1473(31) 1474(33) 1475(14) 1476(16) 1480(50) 1481(32) 1477(42) 1478(18) 1479(48) = 333 点。
覆盖扩展：E-S14-001（声明式 vs 命令式）。
下一篇：S14-B02 · 模板语法。

1. 一句话结论

Vue 的核心是"声明式渲染"：你描述"UI 应该长什么样"，框架负责"什么时候改 DOM"。

范式	写法	你要管什么
命令式（jQuery）	`$('#x').text(v)`	手动找元素、手动同步
声明式（Vue）	`{{ v }}`	只管数据

"为什么这很重要"：状态一多，命令式代码会变成"记得在每个改数据的地方同步 DOM"——漏一处就是 bug。

2. 最小可运行工程（实测）

npm create vite@latest my-app -- --template vue
cd my-app && npm install && npm run dev

核心代码（src/App.vue）：

<script setup>
import { ref } from 'vue'
const msg = ref('Hello Vue 3')
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

ref 的作用：把普通值包成"响应式对象"——改 msg.value 会自动触发重新渲染。

3. 一次构建的真实产物（实测）

npx vite build

vite v5.4.21 building for production...
✓ 8 modules transformed.
dist/index.html                 0.19 kB │ gzip:  0.17 kB
dist/assets/index-HVKwxhDy.js  66.71 kB │ gzip: 26.35 kB
✓ built in 3.17s

观察	含义
文件名带 hash（`index-HVKwxhDy.js`）	内容变则名变 → 可长期缓存（A01）
gzip 后 26.35 kB（39.4%）	文本资源压缩率通常 30–40%
66.71 kB 里主要是 Vue 运行时	J02 会拆解

4. 目录结构与工具链

路径	作用
`index.html`	唯一入口（SPA）
`src/main.js`	创建应用、挂载
`src/App.vue`	根组件（SFC：`<script>/<template>/<style>`）
`vite.config.js`	构建与开发服务器配置
`dist/`	构建产物（部署这个目录）

"为什么开发时不需要打包"：Vite 开发态用原生 ESM + 按需编译，所以启动快（S14-B05 会讲）。

5. 五个误区

误区	真相
"Vue 是库不是框架"	Vue 3 是渐进式框架（可只用核心）
"必须用 CLI"	`npm create vite` 更轻
"`ref` 和 `reactive` 一样"	前者包装任意值，后者只对对象
"打包产物越大越好"	首屏时间与体积正相关（J04）
"开发机能跑就等于上线没问题"	生产要构建、压缩、缓存策略（J03/A01）

6. 自检

声明式与命令式的核心差别？
ref 解决了什么问题？
构建产物为什么带 hash？
gzip 后大约是多少比例？
开发态为什么不打包？

7. 下一篇

S14-B02 · 模板语法：插值、绑定、事件、条件、循环

起步讲完，下一篇过一遍 v-* 指令，重点讲 v-if 与 v-show 的真实差别。

本篇属于系列《S14 · 前端与可视化》。旧文来源：A-1472/1473/1474/1475/1476/1480/1481/1477/1478/1479；扩展点 E-S14-001。构建输出为 Vite 5.4.21 实测。