1.1 安装与起步：跑通第一个应用

1.1 安装与起步：跑通第一个应用

本节摘要：Vue 的安装分三个量级——CDN 标签引入、Vite 脚手架、Vue CLI 遗留工程。本节给出三者的适用边界与操作步骤，带你跑通第一个数据驱动的交互应用，并用一个倒计时例子完整观察"改数据、DOM 自己变"的过程。

学完这节你能做什么

阅读完本节，你应当能够：

1. 按项目规模选出合适的安装方式；
2. 用 CDN 方式五分钟跑起一个 Vue 页面；
3. 用 Vite 创建标准工程并解释目录职责；
4. 说出根实例、容器、模板、数据对象之间的关系。

一、三种安装方式怎么选

选型原则一句话：学习与轻量增强用 CDN，正式项目用 Vite，接手老工程才碰 Vue CLI。

三种安装方式的定位与产物差异

CDN 方式直接在页面里引一个脚本，零构建、零安装，代价是没有单文件组件、没有工程化能力。Vite 是 Vue 作者尤雨溪主导的构建工具，开发时按需编译、启动近乎瞬时，是当前新项目的默认选择。Vue CLI 基于 Webpack，属于 Vue 2 时代的官方脚手架，如今进入维护模式，只在维护存量项目时会遇到。

CDN 引入（在页面脚本区直接使用全局 Vue 变量）：

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue; // Vue 3 全局构建版本
  createApp({
    setup() {
      return { message: ref('你好，Vue') };
    }
  }).mount('#app');
</script>
​

Vue 2 的对应写法只有一行之差：

new Vue({
  el: '#app',
  data: { message: '你好，Vue' }
});
​

用 Vite 创建工程（在终端执行，按提示选择框架即可）：

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

创建出来的目录里，入口页面负责挂载根组件，主组件源码放在组件目录中，构建配置默认已经调好。现阶段你只需要关心组件文件——其余的等第 10 章讲构建工具时再回头细看。

二、第一个交互应用：数据驱动到底长什么样

做一个点击计数器，功能朴素，但足够暴露范式的差异。Vue 3 组合式写法：

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="count++">加一</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
​

注意代码里没有一行在操作 DOM。没有查找节点，没有改 innerText，你只是把 count 加了一，页面上的数字自己变了。谁干的？就是渲染管线：点击触发数据变更，响应式系统捕获，组件重新渲染生成新虚拟树，diff 后把文本补丁打到真实节点上。

等价的 Vue 2 写法，感受一下两代的形制差异：

new Vue({
  el: '#app',
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  },
  template: '<p>当前计数：{{ count }}</p><button @click="increment">加一</button>'
});
​

数据、方法、模板在 Vue 2 里按"选项"分格存放，在 Vue 3 里可以按"功能"聚在一起——这个差异第 10 章会展开，此处先混个脸熟。

三、用开发者工具亲眼看一次更新

光看代码不够，建议动手做个小实验。打开浏览器开发者工具的元素面板，展开挂载容器，找到显示计数的文本节点。然后点一次按钮，你会观察到：

1. 只有那一个文本节点的内容变了，按钮、外层容器纹丝不动；
2. 变化是瞬间完成的，中间没有闪烁。

这就是补丁机制的效果——框架精确地知道"哪个节点依赖哪个数据"，更新时只动该动的节点。如果你装上 Vue 官方开发者工具插件，还能在组件面板里看到 count 这个响应式数据的实时值，在时间线里看到每次组件渲染的耗时。这些观测手段在后面排查性能问题时会反复用到，现在先建立习惯。

再做一个实验体会"批量更新"：把点击处理函数改成连续加三次：

function on_click() {
  count.value++;
  count.value++;
  count.value++;
  console.log('点击一次，DOM 只更新一轮');
}
​

界面上数字一次跳三，而不是 0→1→2→3 地闪两下。因为同一轮事件循环里的多次数据变更会被管线中的调度器合并成一次渲染——这是第 2 章异步更新队列的伏笔，此刻先记住现象。

本节要点回顾

补充一段给完全没接触过工程化工具的读者：Vite 创建的工程里，npm install 负责按配置清单下载依赖到本地，npm run dev 启动开发服务器并在终端打印访问地址，浏览器打开那个地址就能看到页面。修改组件文件并保存，页面不刷新也会自动更新——这就是热更新，后面章节会反复依赖它来观察响应式行为。第一次跑通后，建议把计数器例子改成自己的小实验，比如加一个输入框绑定到数据上，亲手感受"输入即更新"的反向流动，比读十遍文档都扎实。

• 选型：CDN 用于学习与轻场景，Vite 是正式项目标配，Vue CLI 仅存于存量工程；
• 范式：声明式渲染让你只改数据，DOM 同步交给框架，这契约由渲染管线兑现；
• 观测：元素面板看补丁落点，Vue 开发者工具看数据与渲染耗时；
• 现象：同一轮循环里多次数据变更合并为一次 DOM 更新，调度器在幕后工作；
• 两代形制：Vue 2 选项式按类型分格，Vue 3 组合式可按功能聚合，写法差异不影响管线本质。

下一章我们撬开管线第一站：响应式系统凭什么知道"谁在读数据"。