1
/* ================================================================
2
   模式 1：默认导出 与 默认导入 (最常用，例如：Vue组件)
3
   ================================================================ */
4

5
// 📄 src/components/App.js (导出方)
6
const myComponent = { template: '<div>Hello</div>' }
7
// 每个文件只能有一个 export default
8
export default myComponent
9

10

11
// 📄 src/main.js (导入方)
12
// ① 不带 {}
13
// ② 名字可以随便起 (比如起名叫 App)
14
import App from './components/App.js'
15

16

17

18
/* ================================================================
19
   模式 2：按需导出 与 按需导入 (最常用，例如：常量、工具函数)
20
   ================================================================ */
21

22
// 📄 src/utils/math.js (导出方)
23
// 可以有多个 export
24
export const PI = 3.14
25
export function add(a, b) { return a + b }
26

27

28
// 📄 src/main.js (导入方)
29
// ① 必须带 {}
30
// ② 名字必须和导出的一模一样
31
import { PI, add } from './utils/math.js'
32
// ③ 如果重名了，可以用 as 改名
33
import { PI as myPI } from './utils/math.js'
34

35

36

37
/* ================================================================
38
   模式 3：按需导出 与 全部导入 (全盘打包，防止命名冲突)
39
   ================================================================ */
40

41
// 📄 src/api/user.js (导出方)
42
export const login = () => { /*...*/ }
43
export const logout = () => { /*...*/ }
44
export const getInfo = () => { /*...*/ }
45

46

47
// 📄 src/main.js (导入方)
48
// ① 用 * 号拿到所有 export 导出的东西
49
// ② 打包塞进 userApi 这个对象里
50
import * as userApi from './api/user.js'
51

52
userApi.login()
53
userApi.logout()
54

55

56

57
/* ================================================================
58
   模式 4：混合导出 与 混合导入 (主角 + 配角)
59
   ================================================================ */
60

61
// 📄 src/core/vue.js (导出方)
62
export default class Vue { /* 核心对象：默认导出 */ }
63
export function nextTick() { /* 辅助工具：按需导出 */ }
64
export function reactive() { /* 辅助工具：按需导出 */ }
65

66

67
// 📄 src/main.js (导入方)
68
// ① 默认导入放在最前面 (Vue)
69
// ② 逗号隔开
70
// ③ 按需导入放在 {} 里 ({ nextTick, reactive })
71
import Vue, { nextTick, reactive } from './core/vue.js'