@me-framework/me-ui-plus

v1.0.4

Published

18 hours ago

Me UI Component Library

0High
0Medium
0Low

raymondzhongnpm

gxiaowen

vue vue3 component ui element-plus

@me-framework/me-ui-plus 组件库文档

一个基于 Vue 3 + Element Plus 的企业级 UI 组件库，提供 50+ 增强组件。

📦 安装

npm install @me-framework/me-ui-plus
# 或
pnpm add @me-framework/me-ui-plus
# 或
yarn add @me-framework/me-ui-plus

安装 peerDependencies

由于以下依赖需要与你的项目版本保持一致，需要手动安装：

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

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

环境要求

Vue ^3.5.29
Element Plus ^2.13.5
Node.js >= 16

🚀 快速开始

完整引入

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

const app = createApp(App)
app.use(ElementPlus)
app.use(MeUI) // 注册所有组件
app.mount('#app')

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { MeButton, MeInput, MeDialog } from '@me-framework/me-ui-plus'
import '@me-framework/me-ui-plus/dist/es/button/style/index.css'
import '@me-framework/me-ui-plus/dist/es/input/style/index.css'
import '@me-framework/me-ui-plus/dist/es/dialog/style/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(MeButton)
app.use(MeInput)
app.use(MeDialog)
app.mount('#app')

配合 unplugin-vue-components 自动导入

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { MeUIResolver } from '@me-framework/me-ui-plus'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        ElementPlusResolver(),
        MeUIResolver(), // 自动解析 MeUI 组件
      ],
    }),
  ],
})

然后在模板中直接使用：

<template>
  <me-button type="primary">按钮</me-button>
  <me-input v-model="value" placeholder="请输入" />
</template>

浏览器直接引入 (UMD)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MeUI Plus</title>
  <!-- 引入 Element Plus 样式 -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
  <!-- 引入 MeUI Plus 样式 -->
  <link rel="stylesheet" href="//unpkg.com/@me-framework/me-ui-plus/dist/index.css">
</head>
<body>
  <div id="app">
    <me-button type="primary">按钮</me-button>
  </div>

  <!-- 引入 Vue -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- 引入 Element Plus -->
  <script src="//unpkg.com/element-plus"></script>
  <!-- 引入 MeUI Plus -->
  <script src="//unpkg.com/@me-framework/me-ui-plus/dist/index.min.js"></script>

  <script>
    const { createApp } = Vue
    const app = createApp({})
    app.use(ElementPlus)
    app.use(MeUI)
    app.mount('#app')
  </script>
</body>
</html>

📚 组件列表

| 组件名 | 说明 | |--------|------| | MeButton | 增强按钮组件 | | MeInput | 增强输入框 | | MeInputNumber | 数字输入框 | | MeInputSelect | 下拉选择输入框 | | MeInputRangeDate | 日期范围输入 | | MeInputRangeNumber | 数字范围输入 | | MeInputRangeText | 文本范围输入 | | MeInputRadio | 单选输入框 | | MeInputRandom | 随机输入框 | | MeInputGps | GPS 位置输入 | | MeSelectDate | 日期选择器 | | MeSelectData | 数据选择器 | | MeFormRadio | 表单单选框 | | MeLabel | 标签组件 | | MeText | 文本组件 | | MeTextSeparator | 文本分隔符 | | MeStatus | 状态组件 | | MeStatusTag | 状态标签 | | MeDot | 点标记 | | MeRibbon | 缎带标签 | | MeIconButton | 图标按钮 | | MeConfirmButton | 确认按钮 | | MeSvgIcon | SVG 图标 | | MeIconSelector | 图标选择器 | | MeImage | 图片组件 | | MeImageViewer | 图片预览器 | | MeVideoViewer | 视频预览器 | | MeUpload | 上传组件 | | MeUploadImage | 图片上传 | | MeUploadFile | 文件上传 | | MeUploadVideo | 视频上传 | | MeWangEditor | 富文本编辑器 | | MeDialog | 对话框 | | MeOverlay | 遮罩层 | | MeLoading | 加载组件 | | MeCard | 卡片组件 | | MeResourceCard | 资源卡片 | | MeResourceImage | 资源图片 | | MeBody | 主体容器 | | MeFlexBox | Flex 布局容器 | | MeGroup | 分组容器 | | MePageResult | 页面结果 | | MeSwiper | 轮播组件 | | MeSegmented | 分段控制器 | | MePagination | 分页组件 | | MeTree | 树形组件 | | MePropertyEditor | 属性编辑器 | | MeLoadJson | JSON 加载器 | | MeNav | 导航组件 | | MeBreadcrumb | 面包屑 | | MeMoreDropdown | 更多下拉菜单 | | MeExpandMenu | 展开菜单 | | MeMenu | 菜单组件 | | MeColumnMenu | 列菜单 | | MeMainMenu | 主菜单 | | MeTreeMenu | 树形菜单 | | MeAvatar | 头像组件 | | MeAvatarGroup | 头像组 | | MeWeekCalendar | 周历组件 | | MeTodo | 待办事项 | | MeEnv | 环境标识 | | MeBbb | 业务组件 |

🔧 工具函数

资源缓存

import { getGlobalResourceCache, setGlobalResourceCache, ResourceCacheData } from '@me-framework/me-ui-plus'

// 获取全局缓存实例
const cache = getGlobalResourceCache()

// 设置自定义缓存实例
const myCache = new ResourceCacheData()
setGlobalResourceCache(myCache)

在 Vue 中使用

// 通过 inject 使用
import { inject } from 'vue'
const resourceCache = inject('resourceCache')

// 通过 globalProperties 使用
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()!
const resourceCache = proxy.$resourceCache

📦 构建产物说明

dist/
├── es/          # ES Module 格式（推荐用于构建工具）
│   ├── index.mjs
│   ├── index.d.ts
│   └── ...
├── cjs/         # CommonJS 格式（用于 Node.js）
│   ├── index.js
│   └── ...
├── index.js     # UMD 格式（用于浏览器直接引入）
├── index.min.js # UMD 压缩版
├── index.mjs    # ES Module 打包版
├── index.min.mjs
├── index.css    # 全量样式
└── ...

🛠️ 开发指南

本地开发

# 安装依赖
pnpm install

# 构建组件库
pnpm run ui:build

# 生成类型声明
pnpm run ui:types

项目结构

src/lib/
├── [component]/       # 组件目录
│   ├── src/
│   │   └── [component].vue
│   ├── style/
│   │   └── index.scss
│   └── index.ts
├── utils/             # 工具函数
├── index.ts           # 库入口
└── index.scss         # 全局样式

添加新组件

在 src/lib/ 目录下创建组件文件夹
按照现有组件结构创建文件
在 src/lib/index.ts 中导出并注册组件
运行 pnpm run ui:build 构建