🚀 零构建！教你通过 CDN 快速使用 Vue 3（含模块拆分 + Import Maps 实战)

在构建现代 Vue 应用时，我们常用的工具链如 Vite、Webpack 都依赖构建步骤。但其实，Vue 也可以完全不需要构建工具，直接通过

本文将带你系统掌握如何通过 CDN + 原生 ES Module 使用 Vue 3，并解决过程中可能遇到的坑，让你在不依赖任何打包工具的情况下，也能愉快地写 Vue！

🌐 一、最简单的方式：通过 CDN 引入全局版本

首先，我们可以通过

xml 复制代码

<!-- 引入 Vue 全局构建版本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

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

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return { message }
    }
  }).mount('#app')
</script>

✅ 适用场景：

学习 Composition API；
简单的页面增强；
和后端模板语言（如 JSP、PHP、Django）集成；
原型演示、内网项目或低复杂度页面。

❌ 限制：

不能使用 .vue 单文件组件（SFC）；
没有代码拆分；
仅适合开发环境或轻量级需求。

📦 二、使用 ES 模块版本（推荐）

现代浏览器支持原生模块（

xml 复制代码

<!-- index.html -->
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue with ESM!')
      return { message }
    }
  }).mount('#app')
</script>

✅ 优势：

支持模块化开发；
更贴近现代 Vue 项目结构；
可拆分组件、复用逻辑；
无需构建工具即可使用 Composition API。

❗注意：一定要加 type="module"，否则导入会失败。

🧩 三、使用 Import Maps 优化模块导入路径

在模块开发中，我们常写：

javascript 复制代码

import { createApp } from 'vue'

如果直接在浏览器中运行，浏览器不知道 vue 是什么。这时候就可以用 Import Maps 解决路径映射的问题。

xml 复制代码

<!-- 使用 importmap 告诉浏览器 'vue' 指向哪 -->
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

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

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue via Import Map!')
      return { message }
    }
  }).mount('#app')
</script>

🧠 解释：

type="importmap" 是一种告诉浏览器模块路径映射的机制；
这样我们就可以像在 Node 项目中一样用简短的模块名 vue。

⚠️ 兼容性提示：

Import Maps 是新特性，目前主流浏览器都支持（Chrome 89+、Safari 16.4+、Firefox 108+）；
老版本浏览器不支持，可通过 polyfill 或 fallback 处理。

🧱 四、实现模块拆分：Vue 模块化开发实践

一个页面内代码写太多会很混乱，Vue 支持将组件拆成多个模块。

✅ 示例结构：

bash 复制代码

/project/
├── index.html
└── my-component.js

index.html

xml 复制代码

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

my-component.js

javascript 复制代码

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<button @click="count++">Count is: {{ count }}</button>`
}

🔒 注意事项：

必须使用 HTTP 协议打开项目：
- 双击 HTML 文件后浏览器使用的是 file:// 协议，ES Module 无法加载；
- 正确方式：使用本地 HTTP 服务器。
如何启动本地服务器？
- 如果你安装了 Node.js，可以直接在项目目录运行：

erlang 复制代码

npx serve .

- 或者使用 Python：

vbscript 复制代码

python3 -m http.server

🔐 五、开发 vs 生产的注意事项

以上例子中引入的都是 Vue 的开发版本（包含完整调试信息，体积大），不适合直接用于生产。

🏭 正确做法：

使用 Vue 的生产构建版本，例如：

xml 复制代码

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

或使用构建工具（如 Vite）来生成最小化的 JS 文件；
CDN 也可以做生产部署，但要控制缓存和依赖版本；
如果只是轻量级使用，可考虑使用官方提供的轻量方案 Petite Vue，类似 Alpine.js，更适合纯静态页面增强。

✨ 小技巧：组件模板语法高亮

当你把 Vue 的 template 写在字符串里时，VS Code 默认不识别语法。你可以：

安装插件：es6-string-html；
给模板加注释：

css 复制代码

template: /*html*/ `<div>{{ message }}</div>`

这样就能高亮模板内容了，写代码更舒服！

✅ 总结：何时使用哪种方式？

方式	优点	缺点	适用场景
	快速、简单、无依赖	无模块、无拆分	Demo、后端集成
	支持模块、组合式 API	需 http 服务	原型、现代开发
Import Maps	模块路径更清晰	浏览器兼容性限制	学习、轻量项目
拆分模块文件	项目结构清晰	不支持 file:// 打开	小型真实项目

📚 延伸阅读

如果你觉得这篇文章帮你看懂了 Vue 的 CDN 使用方式，欢迎点赞、收藏、转发分享给其他开发者，让更多人受益。