@fx1422/semi-ui-vue

基于 Semi Design 的 Vue 3 组件库。提供了一系列高质量、可定制的组件，帮助开发者快速构建现代化的用户界面。

安装

# 使用 npm
npm install @fx1422/semi-ui-vue

# 使用 yarn
yarn add @fx1422/semi-ui-vue

# 使用 pnpm
pnpm add @fx1422/semi-ui-vue

使用方法

在 Webpack,vue-cli 或 Vite 项目中使用时，无需进行任何编译项配置，直接使用即可。构建时所有相关资源均会按需打包。

//代码块
<script setup>
import { Button } from "@fx1422/semi-ui-vue"
</script>

<template>
<div>
    <Button>hello word</Button>
</div>
</template>

在组件中使用

<template>
  <div>
    <semi-button type="primary">主要按钮</semi-button>
    <semi-input placeholder="请输入" />
  </div>
</template>

<script setup lang="ts">
import { Button, Input } from '@fx1422/semi-ui-vue'
</script>

组件列表

基础组件

• Button（按钮）
• Icon（图标）
• Typography（排版）
• Space（间距）

表单组件

• Input（输入框）
• Select（选择器）
• Checkbox（复选框）
• Radio（单选框）
• Switch（开关）
• DatePicker（日期选择器）
• TimePicker（时间选择器）
• Form（表单）

数据展示

• Table（表格）
• List（列表）
• Card（卡片）
• Descriptions（描述列表）
• Tree（树形控件）
• Timeline（时间线）

反馈组件

• Modal（对话框）
• Drawer（抽屉）
• Message（全局提示）
• Notification（通知提醒）
• Progress（进度条）
• Spin（加载中）
• Alert（警告提示）

导航组件

• Menu（菜单）
• Tabs（标签页）
• Breadcrumb（面包屑）
• Pagination（分页）
• Steps（步骤条）

其他组件

• BackTop（回到顶部）
• Affix（固钉）
• Anchor（锚点）
• Tooltip（文字提示）
• Popover（气泡卡片）
• Dropdown（下拉菜单）

主题定制

Semi Design 支持通过 CSS 变量进行主题定制：

:root {
  --semi-color-primary: #1890ff;
  --semi-color-success: #52c41a;
  --semi-color-warning: #faad14;
  --semi-color-danger: #f5222d;
  --semi-color-text-0: rgba(0, 0, 0, 0.85);
  --semi-color-text-1: rgba(0, 0, 0, 0.65);
  --semi-color-text-2: rgba(0, 0, 0, 0.45);
}

国际化

支持中英文两种语言：

import { createApp } from 'vue'
import App from './App.vue'
import SemiUI from '@fx1422/semi-ui-vue'
import { zh_CN, en_US } from '@fx1422/semi-ui-vue'

const app = createApp(App)
app.use(SemiUI, {
  locale: zh_CN // 或 en_US
})
app.mount('#app')

最佳实践

组件按需加载

推荐使用按需加载的方式引入组件，可以有效减小打包体积：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { SemiUIResolver } from '@fx1422/semi-ui-vue/resolver'

export default defineConfig({
  plugins: [
    vue(),
    SemiUIResolver()
  ]
})

主题定制

1. 使用 CSS 变量进行主题定制
2. 使用 Less 变量进行深度定制
3. 使用主题包进行快速切换

性能优化

1. 使用按需加载
2. 合理使用组件缓存
3. 避免不必要的组件重渲染
4. 使用虚拟滚动处理大数据列表

版本兼容

• Vue 3.x
• TypeScript 4.x+
• Node.js 14.x+

相关链接

• Semi Design 官网
• Semi Design GitHub
• Vue 3 文档

许可证

MIT