@cmclink/cmc_ui

企业级 Vue3 组件库 - 专为海运物流业务设计

✨ 特性

• 🚢 专业定位：专为海运物流业务场景设计
• 🎨 现代设计：基于最新设计规范，提供优雅的用户体验
• 🔧 TypeScript：完整的 TypeScript 支持，提供类型安全
• 🌍 国际化：内置国际化支持，支持中英文切换
• 📱 响应式：移动端友好的响应式设计
• 🎯 按需引入：支持 Tree Shaking，按需加载组件
• 🔌 插件化：基于 Element Plus 扩展，保持生态兼容性
• 📦 开箱即用：丰富的组件和工具函数，快速构建应用

📦 安装

使用 pnpm (推荐)

pnpm add @cmclink/cmc_ui

使用 npm

npm install @cmclink/cmc_ui

使用 yarn

yarn add @cmclink/cmc_ui

🚀 快速开始

完整引入

import CmcUI from '@cmclink/cmc_ui'
import { createApp } from 'vue'
import '@cmclink/cmc_ui/styles'

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

按需引入

import { CmcButton, CmcInput } from '@cmclink/cmc_ui'
import '@cmclink/cmc_ui/styles'

export default {
  components: {
    CmcButton,
    CmcInput
  }
}

自动导入 (推荐)

使用 unplugin-vue-components 实现自动导入：

import Components from 'unplugin-vue-components/vite'
// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        // CMC UI 组件自动导入
        (componentName) => {
          if (componentName.startsWith('Cmc'))
            return { name: componentName, from: '@cmclink/cmc_ui' }
        }
      ]
    })
  ]
})

🧩 组件概览

基础组件

| 组件 | 描述 | 状态 | | ------------- | ---------- | ---- | | CmcButton | 按钮组件 | ✅ | | CmcInput | 输入框组件 | ✅ | | CmcSelect | 选择器组件 | ✅ | | CmcDatePicker | 日期选择器 | ✅ | | CmcTable | 表格组件 | ✅ | | CmcPagination | 分页组件 | ✅ | | CmcDialog | 对话框组件 | ✅ | | CmcLoading | 加载组件 | ✅ |

业务组件

| 组件 | 描述 | 状态 | | ---------------- | ---------- | ---- | | CmcCountrySelect | 国家选择器 | ✅ |

📖 文档

• 快速开始
• 组件文档
• 开发指南

English | 中文

🔧 开发

# 克隆项目
git clone https://github.com/yaowb1994/cmc_ui.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建组件库
pnpm build

# 运行测试
pnpm test

# 启动文档服务器
pnpm dev:docs

🤝 贡献

我们欢迎所有形式的贡献。请阅读我们的贡献指南了解详细信息。

📄 许可证

MIT License

🙏 致谢

• Vue.js - 渐进式 JavaScript 框架
• Element Plus - 基于 Vue 3 的组件库
• Vite - 下一代前端构建工具