HurryDeer UI

Appearance

指南 ​

欢迎使用 HurryDeer UI！这是一个基于 Vue3 的轻量级 UI 组件库，提供了丰富的组件和简洁的 API。

特性 ​

  • 基于 Vue3 Composition API 构建
  • 完整的 TypeScript 支持
  • 轻量级且高性能的组件实现
  • 内置暗黑主题支持
  • 简洁直观的 API 设计
  • 响应式设计，适配各种设备
  • 丰富的组件库，满足日常开发需求

安装 ​

使用 npm 安装 ​

bash
npm install hurrydeer-ui

使用 yarn 安装 ​

bash
yarn add hurrydeer-ui

使用 pnpm 安装 ​

bash
pnpm add hurrydeer-ui

快速开始 ​

完整引入 ​

js
import { createApp } from 'vue'
import App from './App.vue'
import DeerUI from 'hurrydeer-ui'
import 'hurrydeer-ui/dist/style.css'

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

按需引入 ​

js
import { createApp } from 'vue'
import App from './App.vue'
import { DeerButton } from 'hurrydeer-ui'
import 'hurrydeer-ui/dist/style.css'

const app = createApp(App)
app.component('DeerButton', DeerButton)
app.mount('#app')

Vite 配置 ​

如果使用 Vite 构建工具，需要在 vite.config.js 中添加以下配置：

js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['hurrydeer-ui']
  }
})

主题切换 ​

Deer UI 支持亮色和暗黑主题的自动切换，也支持手动切换：

js
import { createApp } from 'vue'
import App from './App.vue'
import DeerUI from 'hurrydeer-ui'
import 'hurrydeer-ui/dist/style.css'

const app = createApp(App)
app.use(DeerUI)

// 手动切换主题
document.documentElement.classList.add('dark') // 切换到暗黑主题
document.documentElement.classList.remove('dark') // 切换到亮色主题

浏览器支持 ​

Deer UI 支持所有现代浏览器：

  • Chrome >= 80
  • Firefox >= 70
  • Safari >= 13
  • Edge >= 80