Cute UI

一个基于React和daisyUI的组件库。

特性

• 基于React和TypeScript开发
• 使用daisyUI 5.x版本定义基础组件
• 使用Vite构建
• 支持按需导入

安装

在线安装 (通过 npm)

推荐使用包管理器进行在线安装：

# 使用 pnpm
pnpm add cute-ui

# 使用 npm
npm install cute-ui

# 使用 yarn
yarn add cute-ui

离线安装 (手动安装)

如果您无法访问 npm 仓库或者需要在离线环境中使用，可以进行手动安装：

1. 获取打包文件: 在 cute-ui 项目根目录下执行打包命令：

   pnpm build

   这将在项目根目录下生成一个 dist 文件夹，其中包含了打包后的 JavaScript 文件、CSS 样式文件以及 TypeScript 类型声明文件。

2. 复制文件: 将整个 dist 文件夹复制到您需要使用该组件库的项目中，例如放到项目的 src/libs/cute-ui 目录下。

3. 在项目中使用: 根据您复制的路径，在您的代码中直接引入组件和样式。

   import React from 'react';
   // 假设您将 dist 文件夹复制到了 src/libs/cute-ui
   import { Button, Badge } from './libs/cute-ui/cute-ui.es.js'; // 或 .umd.js
   import './libs/cute-ui/style.css';
   
   function App() {
     return (
       <div>
         <Button variant="primary">点击我</Button>
         <Badge variant="success">新功能</Badge>
       </div>
     );
   }

   注意: 手动安装时，您需要自行处理 react 和 react-dom 这两个外部依赖。请确保您的项目中已经安装了兼容版本的 React。

使用

确保在使用组件前引入必要的 CSS 样式：

import React from 'react';
import { Button, Badge } from 'cute-ui';
import 'cute-ui/dist/style.css'; // 引入样式文件

function App() {
  return (
    <div>
      <Button variant="primary">点击我</Button>
      <Badge variant="success">新功能</Badge>
    </div>
  );
}

本地开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建组件库
pnpm build

组件列表

• Button - 按钮组件
• Badge - 徽章组件
• 更多组件开发中...

许可证

MIT