mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
docs: add install step to migration guide (#11319)
This commit is contained in:
parent
c81e967188
commit
cdfcf01687
@ -38,6 +38,7 @@
|
||||
- 🍭 Support Custom Theme
|
||||
- 🍭 Support Accessibility (still improving)
|
||||
- 🍭 Support Dark Mode
|
||||
- 🍭 Support Nuxt 3
|
||||
- 🍭 Support SSR
|
||||
- 🌍 Support i18n, built-in 20+ languages
|
||||
|
||||
|
@ -42,6 +42,7 @@ Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
|
||||
- 🍭 支持按需引入和 Tree Shaking
|
||||
- 🍭 支持无障碍访问(持续改进中)
|
||||
- 🍭 支持深色模式
|
||||
- 🍭 支持 Nuxt 3
|
||||
- 🍭 支持服务器端渲染
|
||||
- 🌍 支持国际化,内置 20+ 种语言包
|
||||
|
||||
|
@ -110,14 +110,14 @@ export default {
|
||||
padding: 24px 0 0 var(--van-doc-padding);
|
||||
color: var(--van-doc-text-color-2);
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
a {
|
||||
display: block;
|
||||
margin: 8px 0;
|
||||
margin: 4px 0;
|
||||
padding: 6px 0 6px var(--van-doc-padding);
|
||||
color: var(--van-doc-text-color-3);
|
||||
font-size: 14px;
|
||||
|
@ -20,6 +20,7 @@
|
||||
- 🍭 Support Custom Theme
|
||||
- 🍭 Support Accessibility (still improving)
|
||||
- 🍭 Support Dark Mode
|
||||
- 🍭 Support Nuxt 3
|
||||
- 🍭 Support SSR
|
||||
- 🌍 Support i18n, built-in 20+ languages
|
||||
|
||||
|
@ -26,6 +26,7 @@ Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
|
||||
- 🍭 支持按需引入和 Tree Shaking
|
||||
- 🍭 支持无障碍访问(持续改进中)
|
||||
- 🍭 支持深色模式
|
||||
- 🍭 支持 Nuxt 3
|
||||
- 🍭 支持服务器端渲染
|
||||
- 🌍 支持国际化,内置 20+ 种语言包
|
||||
|
||||
|
@ -4,7 +4,36 @@
|
||||
|
||||
本文档提供了从 Vant 3 到 Vant 4 的升级指南。
|
||||
|
||||
## 按需引入方式调整
|
||||
### 安装 Vant 4
|
||||
|
||||
首先你需要安装 Vant 4 以及 `@vant/compat`。
|
||||
|
||||
`@vant/compat` 是一个兼容包,可以帮助你从 Vant 3 过渡到 Vant 4。
|
||||
|
||||
```bash
|
||||
# 通过 npm 安装
|
||||
npm add vant@^4 @vant/compat@^1
|
||||
|
||||
# 通过 yarn 安装
|
||||
yarn add vant@^4 @vant/compat@^1
|
||||
|
||||
# 通过 pnpm 安装
|
||||
pnpm add vant@^4 @vant/compat@^1
|
||||
```
|
||||
|
||||
你也可以直接修改 `package.json` 的 `dependencies` 字段中的版本号,修改完成后需要重新安装依赖。
|
||||
|
||||
```diff
|
||||
{
|
||||
"dependencies": {
|
||||
- "vant": "^3.0.0",
|
||||
+ "vant": "^4.0.0",
|
||||
+ "@vant/compat": "^1.0.0",
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 调整按需引入方式
|
||||
|
||||
### 移除 babel-plugin-import
|
||||
|
||||
@ -152,20 +181,7 @@ Dialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()
|
||||
|
||||
为了便于旧版本代码迁移至 v4,我们提供了兼容方案,你可以使用 `@vant/compat` 中导出的 `Dialog` 对象来兼容原有代码。
|
||||
|
||||
第一步,安装 `@vant/compat` 包:
|
||||
|
||||
```bash
|
||||
# 通过 npm 安装
|
||||
npm add @vant/compat
|
||||
|
||||
# 通过 yarn 安装
|
||||
yarn add @vant/compat
|
||||
|
||||
# 通过 pnpm 安装
|
||||
pnpm add @vant/compat
|
||||
```
|
||||
|
||||
第二步,从 `@vant/compat` 中引用 `Dialog` 方法:
|
||||
从 `@vant/compat` 中引用 `Dialog` 方法:
|
||||
|
||||
```js
|
||||
import { Dialog } from '@vant/compat';
|
||||
|
@ -89,7 +89,6 @@ pnpm add vant
|
||||
- 配置基于 Rem 的适配方案
|
||||
- 配置基于 Viewport 的适配方案
|
||||
- 配置基于 TypeScript 的工程
|
||||
- 配置自定义主题色方案
|
||||
|
||||
## 引入组件
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user