mltc-design-system/README.md

長照設計系統

/\*\*

- @ Author: 1891
- @ Create Time: 2024-03-21 10:59:47
- @ Description: 長照設計系統基本使用說明
  \*/

# 長照設計系統 (MLTC Design System)

Vue 3 + TypeScript 構建的長照專業設計系統，提供符合長照領域需求的 UI 組件庫。

## 功能特色

- 專為長照領域設計的 UI 組件
- 支援專業照護模式，適合工作環境使用
- 完全基於 Vue 3 + TypeScript 開發
- 使用 UnoCSS 進行樣式管理
- 支援按需引入

## 安裝

```bash
# 使用 npm
npm install mltc-design-system

# 使用 pnpm
pnpm add mltc-design-system

# 使用 yarn
yarn add mltc-design-system
```

## 快速開始

### 完整引入

```typescript
import { createApp } from 'vue'
import App from './App.vue'

// 導入設計系統
import MLTCDesignSystem from 'mltc-design-system'
// 重要！必須導入樣式文件
import 'mltc-design-system/dist/mltc-design-system.css'

const app = createApp(App)

// 註冊設計系統
app.use(MLTCDesignSystem)

app.mount('#app')
```

### 按需引入

```typescript
import { createApp } from 'vue'
import App from './App.vue'

// 按需導入組件
import { Button, Input } from 'mltc-design-system'
// 重要！即使按需引入組件，也必須導入樣式文件
import 'mltc-design-system/dist/mltc-design-system.css'

const app = createApp(App)

// 註冊需要的組件
app.component('MltcButton', Button)
app.component('MltcInput', Input)

app.mount('#app')
```

## 重要說明：樣式導入

如果你在使用組件時發現沒有樣式，很可能是因為忘記導入 CSS 文件。請確保在你的入口文件中添加：

```typescript
import 'mltc-design-system/dist/mltc-design-system.css'
```

詳細的使用說明和 API 文檔請查看 [使用指南](./docs/USAGE.md)。

## 開發與貢獻

### 開發環境設置

```bash
# 克隆倉庫
git clone [倉庫地址]

# 安裝依賴
pnpm install

# 啟動開發服務器
pnpm dev
```

### 構建庫文件

```bash
pnpm lib:build
```

## 許可證

MIT