From 2a5c67d304e65f166ab5c18f417f979ba4d13df2 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sat, 24 Oct 2020 10:38:09 +0800
Subject: [PATCH] docs: update install guide

---
 README.md                         |   8 +--
 README.zh-CN.md                   |   8 +--
 docs/markdown/quickstart.en-US.md |  88 ++++++++++++-------------
 docs/markdown/quickstart.zh-CN.md | 106 ++++++++++++++++--------------
 4 files changed, 107 insertions(+), 103 deletions(-)

diff --git a/README.md b/README.md
index 47eb27037e8..b699af70a3e 100644
--- a/README.md
+++ b/README.md
@@ -41,15 +41,13 @@
 ## Install
 
 ```bash
-# Using npm
+# Install vant 2.x for Vue 2 project
 npm i vant -S
 
-# Using yarn
-yarn add vant
+# Install vant 3.x for Vue 3 project
+npm i vant@next -S
 ```
 
-> Tips: Please install Vant 3.0 for Vue 3 projects, see [issue#7035](https://github.com/youzan/vant/issues/7035).
-
 ## Quickstart
 
 ```js
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 62b8224f41e..9455804dbb2 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -44,15 +44,13 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2016 年开源
 ## 安装
 
 ```bash
-# 通过 npm 安装
+# Vue 2 项目，安装 Vant 2.x 版本：
 npm i vant -S
 
-# 通过 yarn 安装
-yarn add vant
+# Vue 3 项目，安装 Vant 3.x 版本：
+npm i vant@next -S
 ```
 
-> Tips: Vue 3 项目请安装 Vant 3.0，参见 [issue#7035](https://github.com/youzan/vant/issues/7035)。
-
 ## 快速上手
 
 ```js
diff --git a/docs/markdown/quickstart.en-US.md b/docs/markdown/quickstart.en-US.md
index 851a2e0f509..76cd26308e2 100644
--- a/docs/markdown/quickstart.en-US.md
+++ b/docs/markdown/quickstart.en-US.md
@@ -1,8 +1,50 @@
 # Quickstart
 
-### Starter kit
+## Install
 
-We recomment to use [Vue Cli](https://cli.vuejs.org/) to create a project.
+### npm
+
+```bash
+# Install vant 2.x for Vue 2 project
+npm i vant -S
+
+# Install vant 3.x for Vue 3 project
+npm i vant@next -S
+```
+
+### CDN
+
+The easiest way to use Vant is to include a CDN link in the html file, after which you can access all components via the global variable `vant`.
+
+```html
+<!-- import style -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"
+/>
+
+<!-- import script -->
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
+
+<script>
+  // Render the Button component
+  new Vue({
+    el: '#app',
+    template: `<van-button>Button</van-button>`,
+  });
+
+  // Call function component
+  vant.Toast('Message');
+
+  // Register Lazyload directive
+  Vue.use(vant.Lazyload);
+</script>
+```
+
+### CLI
+
+We recomment to use [Vue Cli](https://cli.vuejs.org/) to create a new project.
 
 ```bash
 # Install Vue Cli
@@ -19,18 +61,6 @@ vue ui
 
 In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to the dependencies.
 
-### Install
-
-```bash
-# Using npm
-npm i vant -S
-
-# Using yarn
-yarn add vant
-```
-
-> Tips: Please install Vant 3.0 for Vue 3 projects, see [issue#7035](https://github.com/youzan/vant/issues/7035)
-
 ## Usage
 
 ### 1. Import on demand
@@ -93,36 +123,6 @@ Vue.use(Vant);
 
 > If you configured babel-plugin-import, you won't be allowed to import all components.
 
-### 4. CDN
-
-The easiest way to use Vant is to include a CDN link in the html file, after which you can access all components via the global variable `vant`.
-
-```html
-<!-- import style -->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"
-/>
-
-<!-- import script -->
-<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
-
-<script>
-  // Render the Button component
-  new Vue({
-    el: '#app',
-    template: `<van-button>Button</van-button>`,
-  });
-
-  // Call function component
-  vant.Toast('Message');
-
-  // Register Lazyload directive
-  Vue.use(vant.Lazyload);
-</script>
-```
-
 ## Other
 
 ### Rem units
diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md
index 405375e95ec..352df67c631 100644
--- a/docs/markdown/quickstart.zh-CN.md
+++ b/docs/markdown/quickstart.zh-CN.md
@@ -1,8 +1,57 @@
 # 快速上手
 
-### 脚手架
+### 介绍
 
-在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目。
+通过本章节你可以了解到 Vant 的安装方式和组件使用方法。
+
+## 安装
+
+### 通过 npm 安装
+
+在现有项目中使用 Vant 时，可以通过 `npm` 或 `yarn` 进行安装：
+
+```bash
+# Vue 2 项目，安装 Vant 2.x 版本：
+npm i vant -S
+
+# Vue 3 项目，安装 Vant 3.x 版本：
+npm i vant@next -S
+```
+
+### 通过 CDN 安装
+
+使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 `vant` 访问到所有组件。
+
+```html
+<!-- 引入样式文件 -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"
+/>
+
+<!-- 引入 Vue 和 Vant 的 JS 文件 -->
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
+
+<script>
+  // 在 #app 标签下渲染一个按钮组件
+  new Vue({
+    el: '#app',
+    template: `<van-button>按钮</van-button>`,
+  });
+
+  // 调用函数组件，弹出一个 Toast
+  vant.Toast('提示');
+
+  // 通过 CDN 引入时不会自动注册 Lazyload 组件
+  // 可以通过下面的方式手动注册
+  Vue.use(vant.Lazyload);
+</script>
+```
+
+### 通过脚手架安装
+
+在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目并安装 Vant。
 
 ```bash
 # 安装 Vue Cli
@@ -17,27 +66,17 @@ vue ui
 
 ![](https://img.yzcdn.cn/vant/vue-cli-demo-201809032000.png)
 
-在图形化界面中，点击`依赖` -> `安装依赖`，然后将 `vant` 添加到依赖中即可。
-
-### 通过 npm 安装
-
-在现有项目中使用 Vant 时，可以通过 `npm` 或 `yarn` 安装：
-
-```bash
-# 通过 npm 安装
-npm i vant -S
+在图形化界面中，点击 `依赖` -> `安装依赖`，然后将 `vant` 添加到依赖中即可。
 
-# 通过 yarn 安装
-yarn add vant
-```
-
-> Tips: Vue 3 项目请安装 Vant 3.0，参见 [issue#7035](https://github.com/youzan/vant/issues/7035)。
+## 示例
 
 ### 示例工程
 
-我们提供了一个基于 Vue Cli 的[示例工程](https://github.com/youzan/vant-demo)，示例工程会帮助你了解如下内容：
+我们提供了丰富的[示例工程](https://github.com/youzan/vant-demo)，通过示例工程你可以了解如下内容：
 
-- 基于 Vant 搭建单页面应用，配置按需引入组件
+- 基于 Vue Cli 和 Vant 搭建应用
+- 基于 Nuxt 和 Vant 搭建应用
+- 配置按需引入组件
 - 配置基于 Rem 的适配方案
 - 配置基于 Viewport 的适配方案
 - 配置基于 TypeScript 的工程
@@ -110,37 +149,6 @@ Vue.use(Vant);
 
 > Tips: 配置按需引入后，将不允许直接导入所有组件。
 
-### 方式四. 通过 CDN 引入
-
-使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 `vant` 访问到所有组件。
-
-```html
-<!-- 引入样式文件 -->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"
-/>
-
-<!-- 引入 Vue 和 Vant 的 JS 文件 -->
-<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
-
-<script>
-  // 在 #app 标签下渲染一个按钮组件
-  new Vue({
-    el: '#app',
-    template: `<van-button>按钮</van-button>`,
-  });
-
-  // 调用函数组件，弹出一个 Toast
-  vant.Toast('提示');
-
-  // 通过 CDN 引入时不会自动注册 Lazyload 组件
-  // 可以通过下面的方式手动注册
-  Vue.use(vant.Lazyload);
-</script>
-```
-
 ## 进阶用法
 
 ### Rem 适配