@me-framework/me-ui

基于 Vue 3 和 Element Plus 的企业级 UI 组件库。

特性

• 🚀 基于 Vue 3 + TypeScript 开发
• 🎨 集成 Element Plus 作为基础组件库
• 📦 提供丰富的业务组件
• 🔧 支持按需引入
• 🎯 完善的 TypeScript 类型支持

安装

npm install @me-framework/me-ui vue element-plus vxe-table vxe-pc-ui vue-router @element-plus/icons-vue @wangeditor/editor @wangeditor/editor-for-vue plyr json-editor-vue3
# 或
pnpm add @me-framework/me-ui vue element-plus vxe-table vxe-pc-ui vue-router @element-plus/icons-vue @wangeditor/editor @wangeditor/editor-for-vue plyr json-editor-vue3
# 或
yarn add @me-framework/me-ui vue element-plus vxe-table vxe-pc-ui vue-router @element-plus/icons-vue @wangeditor/editor @wangeditor/editor-for-vue plyr json-editor-vue3

重要配置

由于 json-editor-vue3 是 CommonJS 模块，在 Vite 项目中需要配置 CommonJS 转换插件：

1. 安装插件

npm install @originjs/vite-plugin-commonjs --save-dev
# 或
pnpm add @originjs/vite-plugin-commonjs -D
# 或
yarn add @originjs/vite-plugin-commonjs -D

2. 配置 vite.config.ts

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { viteCommonjs } from "@originjs/vite-plugin-commonjs"

export default defineConfig({
  plugins: [
    vue(),
    viteCommonjs(), // 添加这个插件
  ],
})

快速开始

完整引入

import { createApp } from "vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
import MeUI from "@me-framework/me-ui"
import "@me-framework/me-ui/dist/index.css"
import App from "./App.vue"

const app = createApp(App)
app.use(ElementPlus)
app.use(MeUI)
app.mount("#app")

按需引入

import { createApp } from "vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
import { MeButton, MeInput, MeTable } from "@me-framework/me-ui"
import "@me-framework/me-ui/dist/index.css"

const app = createApp(App)
app.use(ElementPlus)
app.use(MeButton)
app.use(MeInput)
app.use(MeTable)
app.mount("#app")

组件列表

基础组件

| 组件名 | 说明 | | -------------- | ------------ | | MeButton | 按钮组件 | | MeText | 文本组件 | | MeDot | 点标记组件 | | MeSvgIcon | SVG 图标组件 | | MeIconButton | 图标按钮组件 | | MeLabel | 标签组件 | | MeStatus | 状态组件 | | MeStatusTag | 状态标签组件 | | MeRibbon | 丝带组件 | | MeTodo | 待办事项组件 |

数据展示

| 组件名 | 说明 | | ----------------- | ------------ | | MeImage | 图片组件 | | MeAvatar | 头像组件 | | MeAvatarGroup | 头像组组件 | | MeCard | 卡片组件 | | MeResourceCard | 资源卡片组件 | | MeResourceImage | 资源图片组件 | | MeImageViewer | 图片查看器 | | MeVideoViewer | 视频查看器 | | MeTree | 树形组件 | | MeSwiper | 轮播组件 |

表单组件

| 组件名 | 说明 | | -------------------- | ------------ | | MeInput | 输入框组件 | | MeInputNumber | 数字输入框 | | MeInputRangeNumber | 数字范围输入 | | MeInputRangeText | 文本范围输入 | | MeInputRangeDate | 日期范围输入 | | MeInputRandom | 随机输入组件 | | MeInputSelect | 选择输入组件 | | MeInputGps | GPS 输入组件 | | MeInputRadio | 单选输入组件 | | MeFormRadio | 表单单选组件 | | MeSelectDate | 日期选择组件 | | MeSelectData | 数据选择组件 | | MeIconSelector | 图标选择器 | | MePropertyEditor | 属性编辑器 | | MeWangEditor | 富文本编辑器 |

上传组件

| 组件名 | 说明 | | --------------- | ------------ | | MeUpload | 上传组件 | | MeUploadImage | 图片上传组件 | | MeUploadFile | 文件上传组件 | | MeUploadVideo | 视频上传组件 |

导航组件

| 组件名 | 说明 | | ---------------- | ------------ | | MeNav | 导航组件 | | MeMenu | 菜单组件 | | MeMainMenu | 主菜单组件 | | MeColumnMenu | 列菜单组件 | | MeTreeMenu | 树形菜单组件 | | MeExpandMenu | 展开菜单组件 | | MeBreadcrumb | 面包屑组件 | | MeMoreDropdown | 更多下拉组件 |

布局组件

| 组件名 | 说明 | | ----------------- | ------------ | | MeBody | 主体布局组件 | | MeGroup | 分组组件 | | MeFlexBox | 弹性布局组件 | | MeOverlay | 遮罩层组件 | | MeTextSeparator | 文本分隔符 |

反馈组件

| 组件名 | 说明 | | ----------------- | ------------ | | MeDialog | 对话框组件 | | MeMessage | 消息提示 | | MeConfirmButton | 确认按钮组件 | | MeLoading | 加载组件 | | MePageResult | 页面结果组件 |

业务组件

| 组件名 | 说明 | | ---------------- | ------------- | | MeEnv | 环境标识组件 | | MeWeekCalendar | 周日历组件 | | MePagination | 分页组件 | | MeSegmented | 分段控制器 | | MeLoadJson | JSON 加载组件 |

开发

# 构建
pnpm build

# 生成组件
pnpm gen

# 生成全局类型
pnpm gen:global-types

依赖项

必需依赖

• vue >= 3.5.29
• element-plus >= 2.13.5
• vxe-pc-ui >= 4.13.11
• vxe-table >= 4.18.7
• vue-router >= 5.0.3
• @element-plus/icons-vue >= 2.3.2
• @wangeditor/editor >= 5.1.23
• @wangeditor/editor-for-vue >= 5.1.12
• plyr >= 3.8.4
• json-editor-vue3 >= 1.1.1

License

ISC