/**

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

長照設計系統 (MLTC Design System)

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

功能特色

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

安裝

# 使用 npm
npm install mltc-design-system

# 使用 pnpm
pnpm add mltc-design-system

# 使用 yarn
yarn add mltc-design-system

快速開始

完整引入

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')

按需引入

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 文件。請確保在你的入口文件中添加：

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

詳細的使用說明和 API 文檔請查看 使用指南。

開發與貢獻

開發環境設置

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

# 安裝依賴
pnpm install

# 啟動開發服務器
pnpm dev

構建庫文件

pnpm lib:build

許可證

MIT