2. 第一个页面：零工具起步

这是什么：免构建起步 = 不装 Node、不跑 npm，靠一行公开 CDN 引入 Vue，单文件保存 .html 后浏览器双击打开就能用。

为什么用：学一门新语言，最怕第一步被「环境问题」拦在门外。Vue 提供了免构建的全局版本，让你先把力气花在理解 Vue 本身：什么是挂载、什么是响应式数据。工程化（npm/Vite 脚手架）等概念稳了以后再上（第 8 章末尾会给你路线）。

如何用：本章只做一件事——写出并看懂你的第一个 Vue 页面，点按钮数字会变。

2.1 一行公开 CDN 引入 Vue

要在一个 HTML 页面里用上 Vue，只需引入一行公开 CDN 上的脚本：

<script src="https://registry.npmmirror.com/vue/3.5.44/files/dist/vue.global.prod.js"></script>

来源是 npmmirror 公共 CDN（和 jQuery 教程里选 CDN 的思路一致：公开、稳定、国内快）
引入后页面里就有一个全局对象 Vue，createApp、ref 等所有 API 都在内
global.prod = 全球构建的生产压缩版，专为「不用构建工具直接 script 引入」的场景准备

2.2 第一个页面（10 行，整段可直接跑）

把下面的完整页面贴进右侧「在线运行场」点运行，或存成 first.html 双击打开：

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='utf-8'>
  <title>我的第一个 Vue 页面</title>
  <script src='https://registry.npmmirror.com/vue/3.5.44/files/dist/vue.global.prod.js'></script>
</head>
<body>
  <div id='app'>
    <h1 style='color:steelblue'>我的第一个 Vue 页面</h1>
    <button @click="count++">点我</button>
    <p>点了 {{ count }} 次</p>
  </div>

  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const count = ref(0)
        return { count }
      }
    }).mount('#app')
  </script>
</body>
</html>

你会看到：一个蓝色的标题、一个按钮、一行「点了 N 次」——每点一次按钮，数字加一。

2.3 逐行拆解：这个页面发生了什么

把 2.2 的页面按结构切成三步看：

步骤	代码	角色
① 引入	`<script src=公开CDN>`	像引入 jQuery 一样引进 Vue 这个库
② 数据	`const count = ref(0)`	把 `0` 包成响应式数据——Vue 从此盯着它，一变就通知页面
③ 挂载	`.mount('#app')`	让 Vue 接管 `id='app'` 那块区域，里面所有 `@click`、`{{ count }}` 从此归 Vue 管理

再细看三个细节：

@click="count++"：给绑在标签上的行为下指令——点一下就执行一句 count++。改的是数据，不是 DOM。
{{ count }}：模板插值，把 JS 数据「挖洞」填进页面里。这里不加 .value（模板自动解包，下一章细讲）。
<div id='app'> 之外的内容不受 Vue 管：模板里写 HTML 就像写普通网页，越界部分原样显示。

和 jQuery 版对照：jQuery 是「你自己看着办哪里要更新」，Vue 是「数据一变、版权声明的区域全量重算」。入门阶段你只需从「改数据、页面跟着变」这个心智开始。

2.4 动手改

把标题文字改成你自己的名字，刷新看效果
加一个 @click="count -= 1" 的减号按钮（试试写对吗）
再加一个 const message = ref('你好')，在模板里用 <p>{{ message }}</p> 显示出来

2.5 小结

免构建 = 公开 CDN 引入 + createApp({...}).mount('#app')，单文件双击就能跑
ref() 把数据变成响应式；模板 {{ }} 插值、@click 绑事件
页面逻辑顺序：引入 → 数据 → 挂载，之后全程「改数据」

这一页是本教程的样板间：后面每章的示例都会复用「引入 → 数据 → 挂载」这套骨架，新增的只有数据与模板。下一章：模板语法 🐸