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

README.md

@@ -11,7 +11,7 @@
     <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
     <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
 <p align="center">
@@ -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
 

README.zh-CN.md

@@ -11,7 +11,7 @@
     <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
     <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
 <p align="center">
@@ -42,6 +42,7 @@ Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 - 🍭 支持按需引入和 Tree Shaking
 - 🍭 支持无障碍访问（持续改进中）
 - 🍭 支持深色模式
+- 🍭 支持 Nuxt 3
 - 🍭 支持服务器端渲染
 - 🌍 支持国际化，内置 20+ 种语言包
 

packages/vant-cli/site/desktop/components/Nav.vue

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

packages/vant/docs/markdown/home.en-US.md

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

packages/vant/docs/markdown/home.zh-CN.md

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

packages/vant/docs/markdown/migrate-from-v3.zh-CN.md

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

packages/vant/docs/markdown/quickstart.en-US.md

@@ -32,12 +32,12 @@ The easiest way to use Vant is to include a CDN link in the HTML file, after whi
 <!-- import style -->
 <link
   rel="stylesheet"
-  href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
+  href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
 />
 
 <!-- import script -->
 <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
-<script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
+<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
 
 <script>
   // Render the Button component

packages/vant/docs/markdown/quickstart.zh-CN.md

@@ -36,12 +36,12 @@ pnpm add vant
 <!-- 引入样式文件 -->
 <link
   rel="stylesheet"
-  href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
+  href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
 />
 
 <!-- 引入 Vue 和 Vant 的 JS 文件 -->
 <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
-<script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
+<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
 
 <script>
   // 在 #app 标签下渲染一个按钮组件
@@ -89,7 +89,6 @@ pnpm add vant
 - 配置基于 Rem 的适配方案
 - 配置基于 Viewport 的适配方案
 - 配置基于 TypeScript 的工程
-- 配置自定义主题色方案
 
 ## 引入组件