浏览器直接引入 CDN 的轻量用法

并不是每个项目都需要一个完整的构建流程。有时候，你只是想在一个已有的 HTML 页面里给某个表单加上即时校验，或者让一个导航栏根据滚动位置高亮当前区域——这种情况下，用 Vite 或 Vue CLI 初始化整个工程反而显得过重。

Vue 从设计之初就考虑了这种“轻量接入”的场景。你只需要在 HTML 中加一行 <script> 标签，Vue 就能直接跑在浏览器里，无需安装 Node.js，无需配置 webpack，也无需任何构建步骤。

第一步：引入 Vue 的 CDN 链接

在 HTML 文件的 </body> 结束标签之前，加入以下代码：

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

vue.global.prod.js 是生产环境版本，体积更小，去掉了警告信息。
如果需要在开发时获得更详细的错误提示和警告，可以临时切换为 vue.global.js。

第二步：在页面中创建 Vue 应用并挂载

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="count++">点击了 {{ count }} 次</button>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('你好，CDN Vue！')
      const count = ref(0)
      // 必须将模板中用到的变量返回
      return { message, count }
    }
  }).mount('#app')
</script>

因为是通过 <script> 全局引入，Vue 的所有 API 都挂载在全局变量 Vue 下。你可以使用解构的方式提取出 createApp、ref、reactive 等函数，然后像在项目中一样使用组合式 API。整个应用的定义和挂载写在一个 <script> 标签内，非常直观。

第三步：直接用选项式 API 也行

如果你对组合式 API 不那么熟悉，或者只是想让代码更朴素，也可以用选项式 API：

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: '你好，CDN Vue！',
        count: 0
      }
    }
  }).mount('#app')
</script>

两种方式都完全可用，决定权在你。

这个“轻量用法”到底能做什么？

它不是玩具。虽然跳过了单文件组件(.vue)带来的组织优势，但以下场景依然非常适合：

给传统多页应用注入交互：比如一个后端渲染的列表页，需要点击表头排序，或者一个搜索框自动补全。直接用 CDN 在那一页加个 Vue 实例，不影响其他页面。
快速原型验证：你想快速试一个交互动效，或者给同事演示一个想法，新建一个 HTML，粘贴 CDN 链接，几分钟就能跑出结果。
嵌入第三方页面：比如你需要为平台开发一个可嵌入的客服悬浮按钮，用 CDN + Vue 写出组件，打包成一段自包含的 JS 被其他网站引用。
教学和分享：一个完全自包含的 HTML 文件，对方用浏览器打开就能看到效果，没有环境依赖。

限制与注意点

无法直接使用单文件组件(.vue)：所有的模板必须写在 HTML 的 <template> 标签里，或者通过 template 选项以字符串形式提供。
不支持大部分 Vue 生态的构建时特性：例如 scoped 样式、<script setup> 语法糖、静态资源导入等需要编译器参与的功能。
没有自动的 Tree Shaking：CDN 版本会包含 Vue 的全部运行时特性，即便你只用了其中一小部分，用户也要下载整个库。不过 30KB (gzip) 的体积在大多数场景下完全可以接受。
调试反馈稍弱：因为缺少 IDE 的语法高亮和类型提示，代码多起来后可能比工程化项目更吃力。但这对几十行的交互逻辑来说通常不是问题。

进阶小技巧

你可以在 CDN 实例中注册全局组件，以便在页面中复用：

<script>
  const app = Vue.createApp({...})
  app.component('highlight-box', {
    template: '<div style="border: 2px solid gold"><slot/></div>'
  })
  app.mount('#app')
</script>

这样就能在挂在范围内直接用 <highlight-box>内容</highlight-box>，进一步提升组织性。

一句话总结：CDN 引入是 Vue “渐进式”理念的起点。它把框架的复杂度降到最低，让你可以先用前端开发中最熟悉的方式——一个 HTML 文件——体验到响应式编程的好处。当页面逻辑真的膨胀到需要组件拆分、路由管理时，再迁移到 Vite 工程化方案也极为顺畅，因为核心概念和 API 完全一致。