docs: add install step to migration guide (#11319)

This commit is contained in:
neverland 2022-11-27 13:32:25 +08:00 committed by GitHub
parent c81e967188
commit cdfcf01687
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 37 additions and 18 deletions

View File

@ -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

View File

@ -42,6 +42,7 @@ Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
- 🍭 支持按需引入和 Tree Shaking
- 🍭 支持无障碍访问(持续改进中)
- 🍭 支持深色模式
- 🍭 支持 Nuxt 3
- 🍭 支持服务器端渲染
- 🌍 支持国际化,内置 20+ 种语言包

View File

@ -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;

View File

@ -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

View File

@ -26,6 +26,7 @@ Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
- 🍭 支持按需引入和 Tree Shaking
- 🍭 支持无障碍访问(持续改进中)
- 🍭 支持深色模式
- 🍭 支持 Nuxt 3
- 🍭 支持服务器端渲染
- 🌍 支持国际化,内置 20+ 种语言包

View File

@ -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';

View File

@ -89,7 +89,6 @@ pnpm add vant
- 配置基于 Rem 的适配方案
- 配置基于 Viewport 的适配方案
- 配置基于 TypeScript 的工程
- 配置自定义主题色方案
## 引入组件