1、安装组件库

# 使用 npm
npm install hurrydeer-ui

# 使用 yarn
yarn add hurrydeer-ui

# 使用 pnpm
pnpm add hurrydeer-ui

2、在项目中使用

1. 全量引入

在 main.js 或 main.ts 中全量引入组件库：

import { createApp } from 'vue'
import App from './App.vue'
import HurryDeerUI from 'hurrydeer-ui'
import 'hurrydeer-ui/dist/style.css' // 引入样式文件

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

然后在组件中直接使用：

<template>
  <div>
    <deer-button type="primary">主要按钮</deer-button>
    <deer-input v-model="inputValue" placeholder="请输入内容"></deer-input>
    <deer-input-number v-model="numValue"></deer-input-number>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const inputValue = ref('')
const numValue = ref(1)
</script>

2. 按需引入

如果只需要使用部分组件，可以按需引入：

<template>
  <div>
    <DeerButton type="primary">主要按钮</DeerButton>
    <DeerInput v-model="inputValue" placeholder="请输入内容"></DeerInput>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { DeerButton, DeerInput } from 'hurrydeer-ui'
import 'hurrydeer-ui/dist/style.css' // 引入样式文件

const inputValue = ref('')
</script>

3. 主题定制

HurryDeer UI 支持主题定制，用户可以通过 SCSS 变量或 CSS 变量来修改主题：

// 在项目的全局样式文件中覆盖主题变量
:root {
  --primary-color: #409eff;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --error-color: #f56c6c;
  --info-color: #909399;
}

或者使用 JavaScript 动态切换主题：

import { switchTheme } from 'hurrydeer-ui'

// 切换到暗色主题
document.documentElement.setAttribute('data-theme', 'dark')

// 或使用提供的工具函数
switchTheme() // 在默认、暗色、浅色主题间切换