docs: auto-import-vite guide

Author: NelsonYong

packages/hooks/docs/.vitepress/theme/home/Badge.vue

@@ -1,5 +1,10 @@
 <template>
-  <a href="https://www.npmjs.com/package/vue-hooks-plus"
-    ><img src="https://img.shields.io/npm/v/vue-hooks-plus.svg" alt="npm package"
-  /></a>
+  <div style="display: flex; align-items: center;">
+    <h1>VueHooks Plus</h1>
+    <div style="padding-left: 8px;">
+      <a href="https://www.npmjs.com/package/vue-hooks-plus"
+        ><img src="https://img.shields.io/npm/v/vue-hooks-plus.svg" alt="npm package"
+      /></a>
+    </div>
+  </div>
 </template>

packages/hooks/docs/guide/index.en-US.md

@@ -7,7 +7,7 @@ source:
 import Badge from '@theme/home/Badge.vue'
 </script>
 
-# VueHooks Plus
+<Badge />
 
 Through this chapter, you will know how to quickly start using VueHooks Plus.
 
@@ -24,10 +24,6 @@ Through this chapter, you will know how to quickly start using VueHooks Plus.
 - 🤺 Playground, there's ample scope for one's abilities
 - 🔐 Perfect test, safe and reliable
 
-## 📝 Latest Version
-
-<Badge />
-
 ## 📦 Install
 
 ```bash
@@ -50,17 +46,15 @@ import useRequest from 'vue-hooks-plus/es/useRequest'
 
 ### Auto Import
 
-Only `resolver` for `unplugin-auto-import/vite`.
-
-#### Vite
+Use `unplugin-auto-import`'s `resolver`
 
 ```bash
 
-npm i @vue-hooks-plus/resolvers
+npm i -D @vue-hooks-plus/resolvers
 
 ```
 
-##### Use
+::: details Vite
 
 ```typescript
 import AutoImport from 'unplugin-auto-import/vite'
@@ -75,6 +69,29 @@ export const AutoImportDeps = () =>
   })
 ```
 
+:::
+
+::: details Webpack
+
+```typescript
+const { VueHooksPlusResolver } = require('@vue-hooks-plus/resolvers')
+module.exports = {
+  /* ... */
+  plugins: [
+    require('unplugin-auto-import/webpack')({
+      imports: ['vue', 'vue-router'],
+      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
+      dts: 'src/auto-imports.d.ts',
+      resolvers: [VueHooksPlusResolver()],
+    }),
+  ],
+}
+```
+
+:::
+
+For other supported tools, please see [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
+
 <br />
 
 ## 🧩 Compatible

packages/hooks/docs/guide/index.zh-CN.md

@@ -7,7 +7,7 @@ source:
 import Badge from '@theme/home/Badge.vue'
 </script>
 
-# VueHooks Plus
+<Badge />
 
 通过该章节，你将了解到如何快速开始使用 VueHooks Plus。
 
@@ -24,10 +24,6 @@ import Badge from '@theme/home/Badge.vue'
 - 🤺 演练场，大有用武之地
 - 🔐 测试完善，安全可靠
 
-## 📝 最新版本
-
-<Badge />
-
 ## 📦 安装
 
 ```bash
@@ -50,17 +46,15 @@ import useRequest from 'vue-hooks-plus/es/useRequest'
 
 ### 自动引入
 
-目前只有 `unplugin-auto-import/vite` 下的 `resolver`。
-
-#### Vite
+使用 `unplugin-auto-import` 的 `resolver`
 
 ```bash
 
-npm i @vue-hooks-plus/resolvers
+npm i -D @vue-hooks-plus/resolvers
 
 ```
 
-##### 使用
+::: details Vite
 
 ```typescript
 import AutoImport from 'unplugin-auto-import/vite'
@@ -75,6 +69,29 @@ export const AutoImportDeps = () =>
   })
 ```
 
+:::
+
+::: details Webpack
+
+```typescript
+const { VueHooksPlusResolver } = require('@vue-hooks-plus/resolvers')
+module.exports = {
+  /* ... */
+  plugins: [
+    require('unplugin-auto-import/webpack')({
+      imports: ['vue', 'vue-router'],
+      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
+      dts: 'src/auto-imports.d.ts',
+      resolvers: [VueHooksPlusResolver()],
+    }),
+  ],
+}
+```
+
+:::
+
+其他支持的工具, 更多请看 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
+
 <br />
 
 ## 🧩 兼容