mcl-ui-framework

mcl-ui-framework

平台简介

mcl-ui-framework 是一个基于 Vue 3 + TypeScript + Element Plus 开发的现代化 UI 组件库，专为中后台管理系统设计。它提供了完整的布局解决方案、丰富的工具类和系统指令，帮助开发者快速构建高质量的企业级应用。

核心特性

• 现代化技术栈：基于 Vue 3 Composition API 和 TypeScript
• 完整的布局组件：内置顶部导航栏、侧边栏菜单、主内容区域
• 丰富的主题支持：支持9种预设主题颜色、自定义颜色、明暗模式切换
• 皮肤预设功能：提供6种精美的皮肤风格
• 锁屏功能：支持系统锁屏，密码解锁
• 响应式设计：完美适配不同屏幕尺寸
• 灵活的路由集成：支持外部路由配置
• 面包屑导航：自动生成，固定顶部

技术栈

快速开始

安装

# 使用 npm
npm install mcl-ui-framework

# 使用 pnpm
pnpm add mcl-ui-framework

基本使用

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import MclUI from 'mcl-ui-framework'
import 'mcl-ui-framework/dist/mcl-ui-framework.css'

createApp(App).use(router).use(MclUI).mount('#app')

按需引入（推荐）

只引入用到的组件，减小打包体积：

import { createApp } from 'vue'
import { mclLayout } from 'mcl-ui-framework/mclLayout'
import { mclTable } from 'mcl-ui-framework/mclTable'
import { showMclConfirm } from 'mcl-ui-framework/confirm'
import 'mcl-ui-framework/style.css'

const app = createApp(App)
app.component('mclLayout', mclLayout)
app.component('mclTable', mclTable)
app.mount('#app')

按需注册插件（仅注册部分组件）：

import MclInstall from 'mcl-ui-framework/install'

app.use(MclInstall, {
  components: ['mclLayout', 'mclLogin', 'mclTable']
})

大屏默认配置：

import { defaultConfig, defaultCharts } from 'mcl-ui-framework/config'

// App.vue
<template>
  <mcl-layout
    :routes="router.options.routes"
    :use-external-routes="true"
    :router="router"
    content-margin="20px"
    mobile-content-margin="16px"
  >
    <router-view />
  </mcl-layout>
</template>

<script setup lang="ts">
import router from './router'
</script>

组件文档

共 33 个组件，完整索引、在线文档与演示路由见 docs/README.md。

• 单组件 API：docs/mclXxx.md（已与源码同步）
• 使用说明汇总：COMPONENT_USAGE.md
• 本地浏览：pnpm dev 后访问 /commonComponentsUseDoc

开发环境

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 内网 HTTPS + WebRTC 信令（聊天室）
pnpm dev:lan

# 构建生产版本
pnpm build

开发参考

参考项目：mcl-ui-frame

贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

许可证

MIT License

联系方式

• 项目地址：https://gitee.com/ma_chun_liang/mcl-ui-framework
• Issues：https://gitee.com/ma_chun_liang/mcl-ui-framework/issues
• 作者姓名：马春亮
• 作者联系方式：18804656460（微信同号）

版本历史

组件按依赖与使用场景先后迭代，每个版本对应一个组件或一次 mclLayout 能力迭代（当前最新 1.0.38）。