# epms-element

**Repository Path**: charsle/epms-element

## Basic Information

- **Project Name**: epms-element
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-24
- **Last Updated**: 2025-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# EPMS Element

EPMS Element是一个基于Element Plus的Vue 3组件库，为EPMS微前端生态提供统一的UI组件和工具。

[English](./README.en.md) | 简体中文

## 特性

- 基于Element Plus，提供更多业务定制组件
- 支持ESM和UMD两种使用方式
- 高度可定制的主题
- 类型完善，提供完整的TypeScript支持
- 支持按需引入
- 运行时依赖检查

## 安装

```bash
# 使用npm
npm install @epms-micro/epms-element

# 使用yarn
yarn add @epms-micro/epms-element

# 使用pnpm
pnpm add @epms-micro/epms-element
```

## 快速开始

### 完整引入

```js
import { createApp } from 'vue'
import EpmsElement from '@epms-micro/epms-element'
import '@epms-micro/epms-element/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(EpmsElement)
app.mount('#app')
```

### 按需引入

```js
import { createApp } from 'vue'
import { eButton, eTable } from '@epms-micro/epms-element'
import '@epms-micro/epms-element/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.component('eButton', eButton)
app.component('eTable', eTable)
app.mount('#app')
```

### Simple版本

如果你的项目已经使用了Element Plus，可以使用Simple版本避免重复引入Element Plus：

```js
import { createApp } from 'vue'
import EpmsElement from '@epms-micro/epms-element/simple'
import '@epms-micro/epms-element/dist/simple/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(EpmsElement)
app.mount('#app')
```

## 组件列表

EPMS Element提供以下组件：

- **基础组件**
  - `eButton` - 增强按钮组件
  - `Icon` - 图标选择器
  - `Search` - 搜索框
  - `RouterSearch` - 路由搜索
  - `InputPassword` - 密码输入框

- **布局组件**
  - `CardTitle` - 卡片标题
  - `ContentWrap` - 内容包装器
  - `eContent` - 内容容器
  - `eContentWrap` - 内容包装器
  - `SummaryCard` - 摘要卡片

- **表单组件**
  - `Form` - 增强表单
  - `eSearchForm` - 搜索表单
  - `eFilterSearch` - 过滤搜索
  - `eAdvancedFilter` - 高级过滤器
  - `eRemoteSelect` - 远程选择器

- **数据展示**
  - `Table` - 增强表格
  - `eCustomTable` - 自定义表格
  - `eCustomCardTable` - 卡片式表格
  - `Pagination` - 分页
  - `Descriptions` - 描述列表
  - `DictTag` - 字典标签
  - `eDetailContent` - 详情内容

- **反馈组件**
  - `Dialog` - 对话框
  - `eConfirmDialog` - 确认对话框
  - `Error` - 错误页面

- **其他组件**
  - `Cropper` - 图片裁剪
  - `Editor` - 富文本编辑器
  - `Echart` - 图表组件
  - `ImageViewer` - 图片查看器
  - `UploadFile` - 文件上传
  - `DynamicComponent` - 动态组件
  - `DocAlert` - 文档提示
  - `DiyEditor` - 可视化编辑器

## 工具函数

EPMS Element提供了一系列实用工具函数：

```js
// 缓存工具
import { useCache } from '@epms-micro/epms-element'
// 国际化工具
import { useI18n } from '@epms-micro/epms-element'
// 消息提示
import { useMessage } from '@epms-micro/epms-element'
// 表单工具
import { useForm } from '@epms-micro/epms-element'
// 表格工具
import { useTable } from '@epms-micro/epms-element'
```

## 依赖检查

EPMS Element会在运行时检查必要的依赖是否已安装。你也可以手动检查：

```js
import { isDependencyInstalled } from '@epms-micro/epms-element'

// 检查某个依赖是否已安装
if (!isDependencyInstalled('element-plus')) {
  console.warn('Element Plus is required')
}
```

## 构建

```bash
# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建库
pnpm build

# 构建并分析包大小
pnpm build:analyze
```

## 许可证

[MIT](LICENSE)