Vue 3 （2） 模块化开发入门教程（ESM方式）
一、什么是模块化开发？
在 Vue 2 中，我们常用如下方式引入 Vue：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>在这种方式中，Vue 是作为全局对象存在的，开发体验类似于 jQuery。
而在 Vue 3 中，你可以通过原生 JavaScript 模块（ES Modules）方式来开发 Vue 应用，更加规范和现代化，方便未来集成构建工具（如 Vite、Webpack）。
二、文件结构
我们需要两个文件：
项目目录/
│
├── index.html # 主页面
└── vue.esm-browser.js # Vue 官方提供的 ESM 构建文件（可通过 CDN 下载）
你可以从 https://unpkg.com/vue@3/dist/vue.esm-browser.js 下载 vue.esm-browser.js 文件并放在项目根目录下。
三、模块化开发示例代码
以下是一个完整的 HTML 页面，通过模块化方式使用 Vue 编写响应式应用：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Vue 模块化开发示例</title>
</head>
<body><div id="app"><p>{{ message }}</p><h1>{{ web.title }}</h1><h2>{{ web.url }}</h2></div><script type="module">// 从 vue.esm-browser.js 中导入 Vue 核心 APIimport { createApp, reactive } from './vue.esm-browser.js'// 创建 Vue 应用createApp({setup() {// 使用 reactive 定义响应式对象const web = reactive({title: "theodore的博客",url: "https://blog.csdn.net/Theodore_1022"})// 返回模板中要使用的数据return {message: "Hello Vue 模块化开发！",web}}}).mount('#app')</script>
</body>
</html>
四、如何运行
由于使用了 ES 模块，浏览器必须在本地服务器环境下加载此页面，否则可能会遇到跨域错误。
本地启动服务器（任选其一）：
方法一：使用 VS Code 插件「Live Server」
-
安装插件；
-
右键
index.html； -
选择
Open with Live Server； -
页面自动在浏览器中打开并运行。
方法二：使用 Python 启动服务器
# 在终端中进入项目目录，然后运行：
python -m http.server 8000# 浏览器访问：
http://localhost:8000/index.html
五、核心知识点解读
| 语法 | 说明 |
|---|---|
type="module" | 允许使用 import/export，启用原生模块语法 |
import { createApp, reactive } | 模块化引入 Vue 的核心 API |
setup() | Vue 3 Composition API 的入口函数 |
reactive() | 创建响应式对象 |
createApp({...}).mount() | 创建并挂载 Vue 实例 |
六、模块化开发的优势
-
结构清晰：更易管理多个组件和功能模块；
-
符合现代标准：为使用构建工具如 Vite/Webpack 奠定基础；
-
便于复用：可以按需引入、导出 Vue 相关模块；
-
便于扩展：后续可轻松迁移到完整的工程化开发模式。