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

90后晨仔
15 阅读4分钟

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

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

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

首先，我们可以通过 

<!-- 引入 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 模块版本（推荐）

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

<!-- 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 优化模块导入路径

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

import { createApp } from 'vue'

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

<!-- 使用 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 支持将组件拆成多个模块。

✅ 示例结构：

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

index.html

<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

import { ref } from 'vue'

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

🔒 注意事项：

  1. 必须使用 HTTP 协议打开项目：

    • 双击 HTML 文件后浏览器使用的是 file:// 协议，ES Module 无法加载；
    • 正确方式：使用本地 HTTP 服务器。

  2. 如何启动本地服务器？

    • 如果你安装了 Node.js，可以直接在项目目录运行：
npx serve .

    • 或者使用 Python：

python3 -m http.server

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

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

🏭 正确做法：

  • 使用 Vue 的生产构建版本，例如：
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

  • 或使用构建工具（如 Vite）来生成最小化的 JS 文件；

  • CDN 也可以做生产部署，但要控制缓存和依赖版本；

  • 如果只是轻量级使用，可考虑使用官方提供的轻量方案 Petite Vue，类似 Alpine.js，更适合纯静态页面增强。

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

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

  1. 安装插件：es6-string-html；
  2. 给模板加注释：
template: /*html*/ `<div>{{ message }}</div>`

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

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

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

📚 延伸阅读

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

avatar
文章
阅读
粉丝