From 2fd0d54da1cc0958fb3e8028c0ae5b5945cc0eb7 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 2 Mar 2021 09:49:26 +0800
Subject: [PATCH] docs: add vite plugin guide (#8246)

---
 docs/markdown/quickstart.en-US.md | 57 ++++++++++++++++++----------
 docs/markdown/quickstart.zh-CN.md | 63 ++++++++++++++++++-------------
 2 files changed, 74 insertions(+), 46 deletions(-)

diff --git a/docs/markdown/quickstart.en-US.md b/docs/markdown/quickstart.en-US.md
index 4a11c52eb..d330bb0d1 100644
--- a/docs/markdown/quickstart.en-US.md
+++ b/docs/markdown/quickstart.en-US.md
@@ -74,37 +74,54 @@ Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to
 npm i babel-plugin-import -D
 ```
 
-```js
-// set babel config in .babelrc or babel-loader
+Set babel config in .babelrc or babel-loader:
+
+```json
 // Note: Don't set libraryDirectory if you are using webpack 1.
 {
   "plugins": [
-    ["import", {
-      "libraryName": "vant",
-      "libraryDirectory": "es",
-      "style": true
-    }]
+    [
+      "import",
+      {
+        "libraryName": "vant",
+        "libraryDirectory": "es",
+        "style": true
+      }
+    ]
   ]
 }
-
-// For users who use babel7, that can be configured in babel.config.js
-module.exports = {
-  plugins: [
-    ['import', {
-      libraryName: 'vant',
-      libraryDirectory: 'es',
-      style: true
-    }, 'vant']
-  ]
-};
 ```
 
 ```js
-// Then you can import components from vant
+// For users who use babel7, that can be configured in babel.config.js
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'vant',
+        libraryDirectory: 'es',
+        style: true,
+      },
+      'vant',
+    ],
+  ],
+};
+```
+
+Then you can import components from vant:
+
+```js
 import { Button } from 'vant';
 ```
 
-> If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead.
+#### Vite Plugin
+
+If you are using Vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) or [vite-plugin-imp](https://github.com/onebay/vite-plugin-imp) instead.
+
+#### TypeScript Plugin
+
+If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead.
 
 ### 2. Manually import
 
diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md
index 16c764003..27cc1df85 100644
--- a/docs/markdown/quickstart.zh-CN.md
+++ b/docs/markdown/quickstart.zh-CN.md
@@ -95,38 +95,55 @@ vue ui
 npm i babel-plugin-import -D
 ```
 
-```js
-// 在.babelrc 中添加配置
+在.babelrc 中添加配置：
+
+```json
 // 注意：webpack 1 无需设置 libraryDirectory
 {
   "plugins": [
-    ["import", {
-      "libraryName": "vant",
-      "libraryDirectory": "es",
-      "style": true
-    }]
+    [
+      "import",
+      {
+        "libraryName": "vant",
+        "libraryDirectory": "es",
+        "style": true
+      }
+    ]
   ]
 }
-
-// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
-module.exports = {
-  plugins: [
-    ['import', {
-      libraryName: 'vant',
-      libraryDirectory: 'es',
-      style: true
-    }, 'vant']
-  ]
-};
 ```
 
 ```js
-// 接着你可以在代码中直接引入 Vant 组件
+// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'vant',
+        libraryDirectory: 'es',
+        style: true,
+      },
+      'vant',
+    ],
+  ],
+};
+```
+
+接着你可以在代码中直接引入 Vant 组件：
+
+```js
 // 插件会自动将代码转化为方式二中的按需引入形式
 import { Button } from 'vant';
 ```
 
-> Tips: 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。
+#### Vite 插件
+
+对于 vite 项目，可以使用 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 或 [vite-plugin-imp](https://github.com/onebay/vite-plugin-imp) 实现按需引入。
+
+#### TypeScript 插件
+
+如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。
 
 ### 方式二. 手动按需引入组件
 
@@ -154,12 +171,6 @@ app.use(Vant);
 
 ## 常见问题
 
-### 在 Vite 中如何按需引入组件？
-
-在 Vite 中无须考虑按需引入的问题。Vite 在构建代码时，会自动通过 Tree Shaking 移除未使用的 ESM 模块。而 Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力。
-
-现阶段遗留的问题是，未使用的组件样式无法被 Tree Shaking 识别并移除，后续我们会考虑通过 Vite 插件的方式进行支持。
-
 ### 在 HTML 中无法正确渲染组件？
 
 在 HTML 中使用 Vant 组件时，你可能会碰到部分示例代码无法正确渲染的情况，比如下面的用法：