Vue2 老项目接入

Vue2 包只用于存量项目兼容。新项目继续使用 @szhn/dh-design-mobile 和 @szhn/dh-design-pc。

包名

场景	Vue3 包	Vue2 包	底层组件
移动端	@szhn/dh-design-mobile	@szhn/dh-design-mobile-vue2	Vant 2
PC 端	@szhn/dh-design-pc	@szhn/dh-design-pc-vue2	Element UI

Vue2 标识放在包名里。组件从 DHdesign Vue2 包引入，模板标签继续沿用原组件习惯：移动端使用 Button / <van-button>，PC 端使用 ElButton / <el-button>。

安装

移动端老项目：

pnpm

pnpm add @szhn/dh-design-mobile-vue2

npm

npm install @szhn/dh-design-mobile-vue2

yarn

yarn add @szhn/dh-design-mobile-vue2

bun

bun add @szhn/dh-design-mobile-vue2

PC 端老项目：

pnpm

pnpm add @szhn/dh-design-pc-vue2

npm

npm install @szhn/dh-design-pc-vue2

yarn

yarn add @szhn/dh-design-pc-vue2

bun

bun add @szhn/dh-design-pc-vue2

移动端使用

import Vue from 'vue'
import Button from '@szhn/dh-design-mobile-vue2/components/button'
import '@szhn/dh-design-mobile-vue2/styles/base.css'
import '@szhn/dh-design-mobile-vue2/styles/button.css'

Vue.use(Button)

<template>
  <van-button type="primary">提交</van-button>
</template>

PC 端使用

import Vue from 'vue'
import ElButton from '@szhn/dh-design-pc-vue2/components/button'
import '@szhn/dh-design-pc-vue2/styles/base.css'
import '@szhn/dh-design-pc-vue2/styles/button.css'

Vue.use(ElButton)

<template>
  <el-button type="primary">提交</el-button>
</template>

默认主题

Vue2 包已经内置 DHdesign 默认主题。业务项目只要引入 style.css，字体、颜色、间距、圆角、按钮尺寸和输入框尺寸就会按 DHdesign 默认值生效。

只有项目需要换品牌色或做专属主题时，才调用主题方法覆盖：

applyDhDesignMobileVue2Theme({
  colorPrimary: '#075AED',
})

PC 端写法一致，只是调用 applyDhDesignPcVue2Theme。

整包与按需

新页面优先从 components/* 和 styles/* 独立入口引入。存量项目需要快速迁移时，也可以从包根入口注册整套组件，并引入 style.css。

Nuxt 2 等服务端渲染项目必须在仅客户端运行的插件中注册整包，不能在服务端入口直接加载 Vant 2 或 Element UI 整包。

变量覆盖范围

可覆盖的不只有下面这些。下面列的是业务最常用的主题入口，完整默认值来自 DHdesign 主题包。

设计变量	作用
colorPrimary / colorPrimaryLight / colorPrimaryBg	主色、悬停色、浅背景
colorSuccess / colorWarning / colorDanger	成功、警告、危险状态
colorTextPrimary / colorTextSecondary / colorTextPlaceholder / colorTextDisabled	正文、辅助文字、占位文字、禁用文字
colorBorder / colorBorderLight	边框和分割线
colorSurface / colorSurfaceSoft	白色表面和浅灰背景
fontFamily / fontSizeBase / fontSizeMd / lineHeightBase	全局字体、常用字号和行高
space8 / space12 / space16 / space24 / space32	单元格、表单、搜索框、弹层等常用边距
radius4 / radiusMedium / radius12 / radius16 / radiusPill	小标签、按钮、弹窗、弹层、圆角胶囊
buttonHeight / buttonHeightSmall / buttonHeightMini / buttonPadding	按钮高度和左右留白
fieldHeight / fieldPadding	输入框高度和表单留白

Vue2 包第一版重点覆盖常用组件：按钮、输入、表单、单元格/表格、弹窗、弹出层、标签页、选择器、分页、单选、复选、开关和状态标签。

支持范围

第一版只覆盖老项目最常用的标准组件和全局主题。Vue3 包里的 PC Pro 组件、自定义高级业务组件和新组件不默认提供 Vue2 版本。

如果某个组件在 Vue2 包中没有对应能力，以 Vant 2 或 Element UI 官方能力为准；确实需要时再单独补齐。