open-index/open-npm huggingface dataset:
npm package: @quant360/ui
Description: @quant360 ui library
Latest version: 1.0.1

# @quant360/ui

Vue 3 组件库，基于 Vue 3 + TypeScript 构建的现代化组件库。

## 特性

- 🚀 基于 Vue 3 + TypeScript 构建
- 📦 支持按需引入
- 💪 使用 Monorepo + pnpm 工作区管理
- 📝 完整的类型定义
- 🔧 完善的开发工具链

## 安装

```bash
npm install @quant360/ui

yarn add @quant360/ui

pnpm add @quant360/ui
```

## 快速开始

### 全局引入

```ts
// main.ts
import { createApp } from 'vue';
import App from './App.vue';

import quant360 from '@quant360/ui';
import '@quant360/ui/style.css';

const app = createApp(App);
app.use(quant360);
app.mount('#app');
```

### 按需引入

```ts
// main.ts
import { createApp } from 'vue';
import App from './App.vue';

import { Button } from '@quant360/ui';
import '@quant360/ui/style.css';

const app = createApp(App);
app.use(Button);
app.mount('#app');
```

## 使用示例

```vue
<template>
  <FcButton @click="open = true">弹窗</FcButton>
  <FcButton type="primary">按钮</FcButton>
  <FcButton type="success">按钮</FcButton>
  <FcButton type="warning">按钮</FcButton>
  <FcButton type="danger">按钮</FcButton>
  <FcButton type="info">按钮</FcButton>
  <FcDialog v-model="open">
    <div>弹窗测试2222</div>
  </FcDialog>
</template>

<script setup lang="ts">
import { FcButton, FcDialog } from '@quant360/ui';
import { ref } from 'vue';
const open = ref(false);
</script>
```