CandyUI Vue

一个现代化的 Vue 3 组件库，基于 TypeScript 和 Tailwind CSS 构建。

特性

• 🚀 基于 Vue 3 + TypeScript
• 🎨 使用 Tailwind CSS 样式
• 📦 支持按需引入
• 🔧 完整的 TypeScript 类型定义
• 📊 内置 ECharts 图表组件
• 🎯 现代化的设计风格

安装

npm install candyui-vue
# 或
yarn add candyui-vue
# 或
pnpm add candyui-vue

使用

完整引入

import { createApp } from 'vue'
import CandyUI from 'candyui-vue'
import 'candyui-vue/dist/candyui-vue.css'
import App from './App.vue'

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

按需引入

import { CandyButton, CandyCard } from 'candyui-vue'

export default {
  components: {
    CandyButton,
    CandyCard
  }
}

在模板中使用

<template>
  <div>
    <CandyButton variant="primary">点击我</CandyButton>
    <CandyCard title="卡片标题">
      <p>卡片内容</p>
    </CandyCard>
  </div>
</template>

组件列表

基础组件

• CandyButton - 按钮
• CandyIcon - 图标
• CandyText - 文本
• CandyImage - 图片

表单组件

• CandyInput - 输入框
• CandyCheckbox - 复选框
• CandyRadio - 单选框
• CandySelect - 选择器
• CandySwitch - 开关
• CandyDatePicker - 日期选择器
• CandyTimePicker - 时间选择器
• CandyOtpInput - 验证码输入

数据展示

• CandyTable - 表格
• CandyCard - 卡片
• CandyBadge - 徽章
• CandyProgress - 进度条
• CandyChart - 图表
• CandyCalendar - 日历
• CandyTimeline - 时间轴

导航组件

• CandyTabs - 标签页
• CandyMenu - 菜单
• CandyNavigation - 导航
• CandySteps - 步骤条

反馈组件

• CandyModal - 模态框
• CandyDialog - 对话框
• CandyDrawer - 抽屉
• CandyNotification - 通知
• CandyTooltip - 工具提示
• CandyLoader - 加载器

其他组件

• CandyButtonGroup - 按钮组
• CandyCascader - 级联选择
• CandyDynamicTags - 动态标签
• CandyFloatButton - 悬浮按钮
• CandyVirtualList - 虚拟列表
• CandyWatermark - 水印

注意事项

1. 安装 Tailwind CSS

方式一：Tailwind CSS v4

npm install -D tailwindcss@next @tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss({
      content: [
        './src/**/*.{html,js,ts,jsx,tsx,vue}',
        './node_modules/candyui-vue/**/*.{vue,js,ts}' // 可能仍需要这行
      ]
    })
  ]
})

方式二：Tailwind CSS v3

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. 配置 Tailwind CSS

如果使用 Tailwind CSS v4

可能仍需要配置组件库路径（需要验证）：

// vite.config.ts
tailwindcss({
  content: [
    './src/**/*.{html,js,ts,jsx,tsx,vue}',
    './node_modules/candyui-vue/**/*.{vue,js,ts}'
  ]
})

如果使用 Tailwind CSS v3

关键步骤：在你的 tailwind.config.js 中添加组件库路径：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/candyui-vue/**/*.{vue,js,ts,jsx,tsx}" // 🔥 v3 需要这行
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

为什么 v3 需要这一步？ Tailwind CSS v3 只扫描 content 数组中指定的路径，默认不包含 node_modules。而 v4 会自动扫描所有相关文件。

3. 导入样式

在你的 main.css 或 main.ts 中：

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// main.ts
import './style.css' // 或你的CSS文件路径
import 'candyui-vue/dist/candyui-vue.css' // 组件库样式

TypeScript 支持

组件库完全使用 TypeScript 编写，提供完整的类型定义。

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！