✨ 特性

• 🌈 丰富的组件：80+ 个高质量组件，覆盖大部分业务场景
• 🎨 精美设计：遵循现代设计规范，提供优雅的用户体验
• 🔧 TypeScript：使用 TypeScript 开发，提供完整的类型定义
• 🌍 国际化：内置 80+ 种语言包
• 🎭 主题定制：支持深度主题定制和动态切换
• 📱 响应式：支持移动端和桌面端
• ⚡ 现代构建：基于 Vite，享受极速的开发体验
• 🛡️ 可靠性：完善的测试覆盖和持续集成

📦 安装

使用包管理器

# npm
npm install @sheryuwei/plus

# yarn
yarn add @sheryuwei/plus

# pnpm (推荐)
pnpm add @sheryuwei/plus

CDN

<!-- 引入样式 -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@sheryuwei/plus/dist/index.css"
/>

<!-- 引入组件库 -->
<script src="https://unpkg.com/@sheryuwei/plus/dist/index.full.js"></script>

🚀 快速开始

完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from '@sheryuwei/plus'
import '@sheryuwei/plus/dist/index.css'
import App from './App.vue'

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

按需引入

自动导入（推荐）

首先安装 unplugin-vue-components 和 unplugin-auto-import：

npm install -D unplugin-vue-components unplugin-auto-import

然后在 vite.config.ts 中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

手动导入

<template>
  <el-button type="primary" @click="handleClick">
    Hello @sheryuwei/plus
  </el-button>
</template>

<script setup lang="ts">
import { ElButton, ElMessage } from '@sheryuwei/plus'

const handleClick = () => {
  ElMessage.success('Hello World!')
}
</script>

Nuxt.js 集成

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
})

🧩 组件

基础组件

• Button 按钮
• Icon 图标
• Link 链接
• Text 文本
• Scrollbar 滚动条

表单组件

• Input 输入框
• Select 选择器
• Radio 单选框
• Checkbox 多选框
• Switch 开关
• Slider 滑块
• TimePicker 时间选择器
• DatePicker 日期选择器
• Upload 文件上传
• Form 表单

数据展示

• Table 表格
• Pagination 分页
• Tree 树形控件
• Progress 进度条
• Badge 徽章
• Avatar 头像
• Card 卡片
• Descriptions 描述列表

导航组件

• Menu 导航菜单
• Tabs 标签页
• Breadcrumb 面包屑
• Steps 步骤条
• Dropdown 下拉菜单

反馈组件

• Message 消息提示
• MessageBox 弹框
• Notification 通知
• Dialog 对话框
• Drawer 抽屉
• Popconfirm 气泡确认框
• Popover 弹出框
• Tooltip 文字提示

布局组件

• Container 布局容器
• Row/Col 栅格
• Space 间距
• Divider 分割线

其他组件

• Loading 加载
• Empty 空状态
• Result 结果
• Skeleton 骨架屏
• Tour 漫游式引导
• Watermark 水印

查看 完整组件列表

🎨 主题定制

CSS 变量

:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
}

Sass 变量

@forward '@sheryuwei/plus/theme-chalk/src/mixins/config.scss' with (
  $colors: (
    'primary': (
      'base': #409eff,
    ),
    'success': (
      'base': #67c23a,
    ),
  )
);

深色模式

import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)

🌍 国际化

import { createApp } from 'vue'
import ElementPlus from '@sheryuwei/plus'
import zhCn from '@sheryuwei/plus/es/locale/lang/zh-cn'
import en from '@sheryuwei/plus/es/locale/lang/en'

const app = createApp(App)

app.use(ElementPlus, {
  locale: zhCn, // 或 en
})

🛠️ 开发

环境要求

• Node.js >= 20
• pnpm >= 9.5.0

克隆项目

git clone https://github.com/sheryuwei/plus.git
cd plus

安装依赖

pnpm install

开发模式

# 启动组件调试环境
pnpm dev

# 启动文档站点
pnpm run docs:dev

构建

# 构建组件库
pnpm build

# 构建文档
pnpm run docs:build

测试

# 运行单元测试
pnpm test

# 运行测试覆盖率
pnpm test:coverage

# 运行 SSR 测试
pnpm test:ssr

代码规范

# 代码格式化
pnpm format

# 代码检查
pnpm lint

# 代码检查并修复
pnpm lint:fix

📁 项目结构

plus/
├── docs/                    # 文档站点
├── packages/
│   ├── components/          # 组件源码
│   ├── constants/           # 常量定义
│   ├── directives/          # 指令
│   ├── element-plus/        # 主包入口
│   ├── hooks/               # Composition API
│   ├── locale/              # 国际化
│   ├── test-utils/          # 测试工具
│   ├── theme-chalk/         # 主题样式
│   └── utils/               # 工具函数
├── play/                    # 组件调试环境
├── ssr-testing/             # SSR 测试
├── internal/                # 内部工具
└── scripts/                 # 构建脚本

🤝 贡献

我们欢迎所有贡献！请先阅读 贡献指南。

提交规范

我们使用 Conventional Commits 规范：

• feat: 新功能
• fix: 修复 bug
• docs: 文档更新
• style: 代码格式调整
• refactor: 重构
• test: 测试相关
• chore: 构建过程或辅助工具的变动

开发流程

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

📜 更新日志

详细的更新日志请查看 CHANGELOG.md。

📄 许可证

本项目基于 MIT 许可证开源。

🙏 致谢

• 感谢 Element Plus 提供的优秀基础
• 感谢 Vue.js 团队
• 感谢所有贡献者

📞 支持

• 📚 文档站点
• 🐛 问题反馈
• 💬 讨论区