详细说说 Element Plus 源码中 packages 目录下的各个子目录及其作用。Element Plus 采用 monorepo 管理。每个子包都有明确的职责，理解这些目录对改造或借鉴其结构很关键。

packages/
├── components/ # 所有 UI 组件
├── me-chalk/ # 样式程序
├── hooks/ # 可复用的组合式 API
├── utils/ # 工具函数
├── directives/ # 自定义指令
├── locale/ # 国际化语言包
├── element-plus/ # 组件库入口包
├── icons-vue/ # 图标库
├── icons/ # 图标原始资源
└── test-utils/ # 测试辅助工具

下面逐一详细说明。

. components/ – 主要 UI 组件

作用存放所有 Vue 组件。每个组件是一个独立的子目录，支持按需加载。话说回来，

结构示例

components/
├── button/
│ ├── src/
│ │ ├── button.vue # 组件模板与逻辑
│ │ ├── button.ts # 组件定义
│ │ └── types.ts # TypeScript 接口
│ ├── index.ts # 导出组件及 install 方法
│ └── style/ # 样式入口
├── input/
├── dialog/
└── index.ts # 全局导出所有组件

改造要点

• 需要修改组件逻辑或 DOM 结构时直接编辑这里的具体组件文件。
• 删除不需要的组件：直接删除对应文件夹，并更新 components/index.ts 中的导出列表。

. me-chalk/ – 样式程序

作用使用 SCSS 编写组件样式。遵循 BEM 规范，支持主题变量定制。

结构

me-chalk/
├── src/
│ ├── common/
│ │ └── var.scss # 全局设计令牌
│ ├── mixins/
│ │ ├── config.scss # 命名空间、BEM mixin
│ │ ├── mixins.scss # 通用 mixin
│ │ └── utils.scss # 工具类 mixin
│ ├── button.scss # 单个组件样式
│ ├── input.scss
│ └─ index.scss # 入口：导入所有组件样式
├── gulpfile.ts # 建立脚本
└─ package.json

• 修改 var.scss 中的 $--el-* 变量可全局换肤。
• 修改 mixins/config.scss 中的 $namespace 可改变所有 CSS 类名前缀。
• 删除不需要的组件样式：在 index.scss` 中注释掉对应的 @import`。

. hooks/ – 可复用的组合式 API

作用: 抽取组件中的通用逻辑。以 Vue Composition API 形式提供，提高代码复用性。这些 hooks 通常不依赖具体组件，可被多个组件调用。

常见 hooks:

• : 透传非 props 属性
• : 监听点击外部
• : 国际化相关逻辑
• : 生成 BEM 类名
• : 管理层级
• : 处理尺寸属性

hooks/
├── use-attrs/
│ └─ index.ts
├── use-click-outside/
│ └─ index.ts
└─ index.ts # 统一导出

• If your new component needs similar logic。you can directly import se hooks.
• You can also modify existing hooks to adapt new prefixes or behaviors .

. utils/ – 工具函数

作用 : 提供与 UI 无关 的纯函数，用于数据类型判断、 DOM 操作、事件处理、错误提示等。这些函数被组件和 hooks 很多人在用。

分类 :

• dom . ts : DOM 操作
• types . ts/ typescript . ts : 类型判断
• error . ts : 抛出组件错误
• event . ts : 事件相关
• aria . ts : 无障碍辅助
• position . ts : 定位计算

改造要点 :

• 一般无需大改，除非你希望改变底层工具行为。
• 可增加自己的工具函数，放在 `utils/` 下并导出。

. directives/> – 自定义指令

作用>: 存放 Vue 自定义指令，例如监听点击外部、重复点击防抖、权限控制等。

常见指令>:

• : 点击元素外部触发回调
• : 处理长按重复点击
• :监听元素尺寸变化
• :焦点陷阱
.

=

Structure:

directives/ ├─ click‑outside/ │  └─ index.ts ├─ repeat‑click/ │  └─ index.ts └─ index.ts //统一注册所有指令

• 可修改指令逻辑、修改指令名称。
• 删除不需要的指令，并在 directives/index.ts 中移除。

作用提供多语言支持，包含所有组件的文字。按理说，

locale/ ├─ lang/ │  ├─ zh‑cn.ts │  ├─ en.ts │  ├─ ja.ts │  └─ …├─ index.ts //语言管理主要 └─ format.ts //模板字符串格式化

• 如果需要新增语言，在 lang/ 下添加文件并在 index.ts 中注册。
• 修改现有翻译内容。
• 如果你移除了某些组件。需要同步删除语言包中对应的词条，否则毫无影响。说起来，

作用将上述所有模块整合在一起。暴露最终的组件库，不过，这才是使用者安装 element‑plus npm 包后实际引入的内容。

关键文件

• index.ts导出所有组件、指令、插件、locale 等，并提供 install 方法。不过，
• defaults.ts全局配置。
• make-installer.ts生成安装器，支持按需加载。
• package.json定义包的名称、入口文件、导出映射。

• 修改 package.json 中的 name 为你自己的包名。
• 修改 index.ts 中的导出内容——如果删除了某些组件，就不要在这里导出。
• 修改 defaults.ts 中的全局默认行为。

• icons-vue/将图标库以 Vue 组件形式提供。每个图标是一个独立的 .vue 文件，支持按需加载。
• icons/存放原始 SVG 图标资源。通常用于生成 icons-vue.

如果你的组件库不需要内置图标，可以直接删除这两个目录，并在 element-plus/index.ts 中移除相关导出。

作用内部使用的测试工具函数，例如模拟鼠标事件、创建 Vue 测试实例等。packages/components 中的组件测试会依赖它。

• 如果保留 component 测试，则保留此目录；否则可删除，

。

---