From a317984da1cc850ebb44bc7d0dd90024b6e1f257 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 11 Jun 2022 19:49:34 +0800
Subject: [PATCH] docs: recommend using unplugin-vue-components (#10703)

---
 .../vant/docs/markdown/quickstart.en-US.md    | 15 +++----
 .../vant/docs/markdown/quickstart.zh-CN.md    | 15 +++----
 packages/vant/docs/markdown/theme.en-US.md    | 39 ------------------
 packages/vant/docs/markdown/theme.zh-CN.md    | 41 -------------------
 4 files changed, 16 insertions(+), 94 deletions(-)

diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md
index efc877e92..52097b3ac 100644
--- a/packages/vant/docs/markdown/quickstart.en-US.md
+++ b/packages/vant/docs/markdown/quickstart.en-US.md
@@ -94,19 +94,19 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to
 
 ### Import on demand in vite projects (recommended)
 
-If you are using vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import).
+If you are using vite, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
 
 #### 1. Install Plugin
 
 ```bash
 # with npm
-npm i vite-plugin-style-import@1.4.1 -D
+npm i unplugin-vue-components -D
 
 # with yarn
-yarn add vite-plugin-style-import@1.4.1 -D
+yarn add unplugin-vue-components -D
 
 # with pnpm
-pnpm add vite-plugin-style-import@1.4.1 -D
+pnpm add unplugin-vue-components -D
 ```
 
 #### 2. Configure Plugin
@@ -115,13 +115,14 @@ Configure the plugin in the `vite.config.js` file:
 
 ```js
 import vue from '@vitejs/plugin-vue';
-import styleImport, { VantResolve } from 'vite-plugin-style-import';
+import Components from 'unplugin-vue-components/vite';
+import { VantResolver } from 'unplugin-vue-components/resolvers';
 
 export default {
   plugins: [
     vue(),
-    styleImport({
-      resolves: [VantResolve()],
+    Components({
+      resolvers: [VantResolver()],
     }),
   ],
 };
diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md
index 841223f19..050d5e447 100644
--- a/packages/vant/docs/markdown/quickstart.zh-CN.md
+++ b/packages/vant/docs/markdown/quickstart.zh-CN.md
@@ -95,19 +95,19 @@ pnpm add vant
 
 ### 在 vite 项目中按需引入组件（推荐）
 
-在 vite 项目中使用 Vant 时，推荐安装 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 插件，它可以自动按需引入组件的样式。
+在 vite 项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。
 
 #### 1. 安装插件
 
 ```bash
 # 通过 npm 安装
-npm i vite-plugin-style-import@1.4.1 -D
+npm i unplugin-vue-components -D
 
 # 通过 yarn 安装
-yarn add vite-plugin-style-import@1.4.1 -D
+yarn add unplugin-vue-components -D
 
 # 通过 pnpm 安装
-pnpm add vite-plugin-style-import@1.4.1 -D
+pnpm add unplugin-vue-components -D
 ```
 
 #### 2. 配置插件
@@ -116,13 +116,14 @@ pnpm add vite-plugin-style-import@1.4.1 -D
 
 ```js
 import vue from '@vitejs/plugin-vue';
-import styleImport, { VantResolve } from 'vite-plugin-style-import';
+import Components from 'unplugin-vue-components/vite';
+import { VantResolver } from 'unplugin-vue-components/resolvers';
 
 export default {
   plugins: [
     vue(),
-    styleImport({
-      resolves: [VantResolve()],
+    Components({
+      resolvers: [VantResolver()],
     }),
   ],
 };
diff --git a/packages/vant/docs/markdown/theme.en-US.md b/packages/vant/docs/markdown/theme.en-US.md
index 2ca693bcb..e6e302ba1 100644
--- a/packages/vant/docs/markdown/theme.en-US.md
+++ b/packages/vant/docs/markdown/theme.en-US.md
@@ -174,42 +174,3 @@ module.exports = {
   },
 };
 ```
-
-### Vite
-
-Add the following config in `vite.config.js`.
-
-```js
-// vite.config.js
-import vue from '@vitejs/plugin-vue';
-import styleImport from 'vite-plugin-style-import';
-
-export default {
-  css: {
-    preprocessorOptions: {
-      less: {
-        javascriptEnabled: true,
-        modifyVars: {
-          'text-color': '#111',
-          'border-color': '#eee',
-        },
-      },
-    },
-  },
-  resolve: {
-    alias: [{ find: /^~/, replacement: '' }],
-  },
-  plugins: [
-    vue(),
-    styleImport({
-      libs: [
-        {
-          libraryName: 'vant',
-          esModule: true,
-          resolveStyle: (name) => `vant/es/${name}/style/less`,
-        },
-      ],
-    }),
-  ],
-};
-```
diff --git a/packages/vant/docs/markdown/theme.zh-CN.md b/packages/vant/docs/markdown/theme.zh-CN.md
index c5763966f..919aaf3f6 100644
--- a/packages/vant/docs/markdown/theme.zh-CN.md
+++ b/packages/vant/docs/markdown/theme.zh-CN.md
@@ -182,44 +182,3 @@ module.exports = {
   },
 };
 ```
-
-### Vite 项目
-
-如果是 vite 项目，可以跳过以上步骤，直接在 `vite.config.js` 中添加如下配置即可。
-
-```js
-// vite.config.js
-import vue from '@vitejs/plugin-vue';
-import styleImport from 'vite-plugin-style-import';
-
-export default {
-  css: {
-    preprocessorOptions: {
-      less: {
-        javascriptEnabled: true,
-        // 覆盖样式变量
-        modifyVars: {
-          'text-color': '#111',
-          'border-color': '#eee',
-        },
-      },
-    },
-  },
-  resolve: {
-    alias: [{ find: /^~/, replacement: '' }],
-  },
-  plugins: [
-    vue(),
-    // 按需引入样式源文件
-    styleImport({
-      libs: [
-        {
-          libraryName: 'vant',
-          esModule: true,
-          resolveStyle: (name) => `vant/es/${name}/style/less`,
-        },
-      ],
-    }),
-  ],
-};
-```