sunyard-szyy-ui

企业级 Vue 3 组件库 - 基于 Element Plus 的二次封装

✨ 特性

• 🚀 Vue 3 + TypeScript - 基于 Vue 3.5+ 和 TypeScript 5.6+
• 📦 Monorepo 架构 - 使用 pnpm workspace 管理
• 🎨 主题定制 - 支持 SCSS 变量和 CSS 变量双重定制
• 🔥 按需加载 - 支持自动按需导入，极致的打包体积
• 📚 完整文档 - 详细的使用文档和 API 说明
• 💪 TypeScript - 完整的类型定义和类型推导
• 🌲 Tree-shaking - 支持 ES Module，自动 tree-shaking
• ⚡️ 高性能 - 基于 Element Plus，性能卓越

📦 安装

# npm
npm install sunyard-szyy-ui element-plus

# pnpm
pnpm add sunyard-szyy-ui element-plus

# yarn
yarn add sunyard-szyy-ui element-plus

🚀 快速开始

全量引入

// main.ts
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

import SunyardSzyyUI from 'sunyard-szyy-ui';
import 'sunyard-szyy-ui/theme-chalk/index.css';

import App from './App.vue';

const app = createApp(App);

app.use(ElementPlus);
app.use(SunyardSzyyUI);
app.mount('#app');

自动按需引入（推荐）

// 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';
import { SunyardSzyyUIResolver } from 'sunyard-szyy-ui/utils';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' }), SunyardSzyyUIResolver()]
    })
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "sunyard-szyy-ui/theme-chalk/var.scss" as *;`
      }
    }
  }
});

// main.ts (按需引入时只需引入基础样式)
import 'sunyard-szyy-ui/theme-chalk/base.css';

使用组件

<template>
  <div>
    <SySearchBar v-model="keyword" placeholder="请输入搜索关键词" @search="handleSearch" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const keyword = ref('');

const handleSearch = (value: string) => {
  console.log('搜索:', value);
};
</script>

📚 包结构

本项目采用 Monorepo 架构，包含以下子包：

sunyard-szyy-ui/
├── @sunyard-szyy-ui/components   # Vue 组件
├── @sunyard-szyy-ui/hooks        # Composition API Hooks
├── @sunyard-szyy-ui/utils        # 工具函数
├── @sunyard-szyy-ui/theme-chalk  # 样式主题
└── sunyard-szyy-ui              # 主包（聚合导出）

子包说明

| 包名 | 说明 | 独立使用 | | ------------------------------ | --------------------- | --------- | | sunyard-szyy-ui | 主包，包含所有功能 | ✅ 推荐 | | @sunyard-szyy-ui/components | Vue 组件 | ✅ 可以 | | @sunyard-szyy-ui/hooks | Composition API Hooks | ✅ 可以 | | @sunyard-szyy-ui/utils | 工具函数 | ✅ 可以 | | @sunyard-szyy-ui/theme-chalk | 样式主题 | ❌ 不推荐 |

📦 发布产物

安装 sunyard-szyy-ui 后，包含以下内容：

sunyard-szyy-ui/
├── es/                    # ESM 格式
│   ├── index.mjs
│   └── index.d.ts
├── lib/                   # CJS 格式
│   ├── index.js
│   └── index.d.ts
├── dist/                  # UMD 格式 + 子包
│   ├── index.full.js      # UMD bundle
│   ├── index.full.mjs     # ESM bundle
│   ├── hooks/             # Hooks 子包
│   └── utils/             # Utils 子包
└── theme-chalk/           # 样式文件
    ├── index.css          # 完整样式
    ├── base.css           # 基础样式
    └── *.css              # 组件样式

🤝 依赖关系

sunyard-szyy-ui
├── @sunyard-szyy-ui/components
│   ├── @sunyard-szyy-ui/hooks
│   │   └── @sunyard-szyy-ui/utils
│   └── @sunyard-szyy-ui/utils
├── @sunyard-szyy-ui/hooks
│   └── @sunyard-szyy-ui/utils
└── @sunyard-szyy-ui/utils

外部依赖（Peer Dependencies）：

• vue ^3.0.0
• element-plus ^2.0.0