快速开始 ​

本节介绍如何在项目中引入并使用 DHdesign 组件库。

移动端（dh-design-mobile） ​

组件级引入 ​

推荐按组件引入，在入口文件里显式注册需要的组件：

ts
import { createApp } from 'vue'
import App from './App.vue'
import { Button } from '@szhn/dh-design-mobile'
import '@szhn/dh-design-mobile/style.css'

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

注册后，在模板中通过 van- 前缀标签使用（与 Vant 一致）：

vue
<template>
  <van-button type="primary">主要按钮</van-button>
</template>

PC 端（dh-design-pc） ​

组件级引入 ​

ts
import { createApp } from 'vue'
import App from './App.vue'
import { Button } from '@szhn/dh-design-pc'
import '@szhn/dh-design-pc/style.css'

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

注册后，在模板中通过 el- 前缀标签使用（与 Element Plus 一致）：

vue
<template>
  <el-button type="primary">主要按钮</el-button>
</template>

TypeScript 支持 ​

两个包均内置 .d.ts 类型声明文件，开箱即用，无需额外配置。

如果需要获得最稳定的类型提示，推荐在页面或组件中显式导入使用到的 DHdesign 组件。全局组件类型入口会在后续版本补齐，当前不要在 tsconfig.json 中配置不存在的 @szhn/dh-design-mobile/global 或 @szhn/dh-design-pc/global。

主题色 ​

业务系统只需要在入口处设置一次主题色：

ts
import { applyDhDesignTheme } from '@szhn/dh-design-mobile'

applyDhDesignTheme({ colorPrimary: '#075AED' })
ts
import { applyDhDesignPcTheme } from '@szhn/dh-design-pc'

applyDhDesignPcTheme({ colorPrimary: '#075AED' })

移动端会自动转换成 Vant 需要的变量，PC 端会自动转换成 Element Plus 需要的变量。更多说明见 主题管理。