第四章：模块化 — import / export

入门篇写 Vue 时，你肯定敲过这一句：
import { ref } from 'vue'
这个 import 到底是什么？为什么现代前端到处都是它？这一章讲清楚。

4.1 为什么需要模块化

想象一下，如果一个项目所有代码都写在一个 app.js 文件里，会发生什么？

文件长达几千行，找一个函数要翻半天
所有变量挤在一起，一不小心名字就重复冲突
想把某个功能挪到别的项目复用？根本抠不出来

这就是没有模块化的灾难。

模块化的思路很简单：

把代码拆成一个个小文件（模块），每个文件只干一件事。谁需要用别人的东西，就”导入（import）“进来；谁想把东西给别人用，就”导出（export）“出去。

就像搭乐高：每个零件（模块）独立，用的时候拼起来。

4.2 export 导出

想让一个文件里的东西被别的文件使用，就要 export（导出）。有两种方式。

命名导出（可以导出多个）

在要分享的东西前面加 export：

// 文件：utils.js

export const PI = 3.14

export function add(a, b) {
  return a + b
}

export function multiply(a, b) {
  return a * b
}

这个文件导出了三样东西：PI、add、multiply。

默认导出（一个文件只能有一个）

如果一个文件主要就是为了导出一样核心的东西，用 export default：

// 文件：User.js

export default function createUser(name) {
  return { name, createdAt: Date.now() }
}

记忆：命名导出像超市货架上贴了名字的多件商品，默认导出像这家店的招牌主打款。

4.3 import 导入

在另一个文件里，用 import 把上面导出的东西拿进来用。导入写法要和导出方式对应。

导入命名导出的（要用花括号，名字要对上）

// 文件：main.js

import { add, PI } from './utils.js'

console.log(add(1, 2))   // 3
console.log(PI)          // 3.14

{ add, PI } 里的名字必须和导出时的名字一致，因为它们是”按名字取货”。

导入默认导出的（不用花括号，名字随便起）

import createUser from './User.js'

const u = createUser('小明')

默认导出只有一个，所以导入时名字你随便取都行。

导入第三方包（重点来了）

前面第三章我们用 npm install 装的包，就是用 import 引入的。注意：引入 npm 包时，不写路径（没有 ./），直接写包名：

import { ref } from 'vue'      // 从 vue 这个包里，取出 ref
import axios from 'axios'      // 引入 axios 包的默认导出

对比一下：

import { add } from './utils.js'   // 有 ./ → 引入自己写的本地文件
import { ref } from 'vue'          // 没有 ./ → 引入 node_modules 里的第三方包

4.4 回头看 .vue 文件

现在，入门篇那句让你似懂非懂的代码，就完全解释得通了：

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

翻译成人话：“从 vue 这个包里，导入一个叫 ref 的工具，然后用它。”

这就是模块化的威力——Vue 官方把 ref 这些功能写好、导出，你 npm install 装下来，再 import 进来即可，站在巨人的肩膀上。

和入门时的 `<script src="">` 对比

入门篇引入 JS 是这样的：

<script src="app.js"></script>
<script src="utils.js"></script>

这种方式的问题：

文件之间的依赖关系全靠你手动排顺序，顺序错了就报错
所有变量都是”全局”的，容易撞名字

而模块化用 import：

每个文件自己声明要用谁，依赖关系一目了然
各模块互相隔离，不会污染彼此

这就是现代前端的”进化”：从手动引一堆 <script>，到用 import/export 自动管理依赖。

小提示：这套 import/export 语法正式名字叫 ES Module（ESM），是 JS 官方的模块化标准。你可能还会在老代码里看到 require(...) / module.exports（叫 CommonJS，Node 早期的模块化方式），了解即可，现代前端一律用 ESM。

4.5 小结

模块化 = 把代码拆成小文件，用到再拼，解决”大文件难维护、难复用”的问题
export 导出：
- 命名导出（可多个）：export const x = ...，导入要 { } 且名字对上
- 默认导出（仅一个）：export default ...，导入不用 { }、名字随意
import 导入：
- 引本地文件带路径：from './utils.js'
- 引 npm 包直接写名：from 'vue'
.vue 里的 import { ref } from 'vue' 就是这套机制
这套语法叫 ES Module（ESM），是现代前端的标准

地基打完了！下一章进入进阶篇的核心 —— Vite，看看它是怎么把这些 .vue 文件和 import 变成浏览器能跑的东西的。