docs: auto-import-vite guide

Author: NelsonYong

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

@@ -1,45 +1,5 @@
 <template>
-  <div class="badge">
-    <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>
-    <a href="https://github.com/InhiblabCore/vue-hooks-plus/actions/workflows/node-ci.yml"
-      ><img
-        src="https://github.com/InhiblabCore/vue-hooks-plus/actions/workflows/ci.yml/badge.svg?branch=master"
-        alt="build status"
-    /></a>
-    <a href="#badge"
-      ><img
-        src="https://img.shields.io/github/languages/top/InhiblabCore/vue-hooks-plus"
-        alt="language"
-    /></a>
-    <a
-      href="https://img.badgesize.io/https:/unpkg.com/vue-hooks-plus/dist/js/index.es.js?label=gzip%20size&compression=gzip"
-      ><img
-        src="https://img.badgesize.io/https:/unpkg.com/vue-hooks-plus/dist/js/index.es.js?label=gzip%20size&compression=gzip"
-        alt="gzip"
-    /></a>
-    <a href="#badge"
-      ><img
-        src="https://img.shields.io/librariesio/github/InhiblabCore/vue-hooks-plus"
-        alt="librariesio"
-    /></a>
-    <a href="https://github.com/InhiblabCore/vue-hooks-plus/blob/master/LICENSE"
-      ><img src="https://img.shields.io/github/license/InhiblabCore/vue-hooks-plus" alt="LICENSE"
-    /></a>
-  </div>
+  <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>
 </template>
-
-<script lang="ts" setup></script>
-
-<style scoped lang="less">
-  .badge {
-    display: flex;
-    justify-content: center;
-
-    & > a {
-      margin-left: 6px;
-      margin-right: 6px;
-    }
-  }
-</style>

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

@@ -5,13 +5,11 @@ source:
 
 <script setup>
 import Badge from '@theme/home/Badge.vue'
-import Icon from '@theme/home/Icon.vue'
 </script>
 
-<Icon />
-<h1 style="text-align:center">VueHooks Plus</h1>
-<br />
-<Badge />
+# VueHooks Plus
+
+Through this chapter, you will know how to quickly start using VueHooks Plus.
 
 ## ✨ Features
 
@@ -26,6 +24,10 @@ import Icon from '@theme/home/Icon.vue'
 - 🤺 Playground, there's ample scope for one's abilities
 - 🔐 Perfect test, safe and reliable
 
+## 📝 Latest Version
+
+<Badge />
+
 ## 📦 Install
 
 ```bash
@@ -46,8 +48,37 @@ import { useRequest } from 'vue-hooks-plus'
 import useRequest from 'vue-hooks-plus/es/useRequest'
 ```
 
+### Auto Import
+
+Only `resolver` for `unplugin-auto-import/vite`.
+
+#### Vite
+
+```bash
+
+npm i @vue-hooks-plus/resolvers
+
+```
+
+##### Use
+
+```typescript
+import AutoImport from 'unplugin-auto-import/vite'
+import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'
+
+export const AutoImportDeps = () =>
+  AutoImport({
+    imports: ['vue', 'vue-router'],
+    include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
+    dts: 'src/auto-imports.d.ts',
+    resolvers: [VueHooksPlusResolver()],
+  })
+```
+
 <br />
 
-::: warning does not contain vue2
+## 🧩 Compatible
+
+::: warning Not compatible with vue2 version
 
 :::

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

@@ -5,13 +5,11 @@ source:
 
 <script setup>
 import Badge from '@theme/home/Badge.vue'
-import Icon from '@theme/home/Icon.vue'
 </script>
 
-<Icon />
-<h1 style="text-align:center">VueHooks Plus</h1>
-<br />
-<Badge />
+# VueHooks Plus
+
+通过该章节，你将了解到如何快速开始使用 VueHooks Plus。
 
 ## ✨ 特性
 
@@ -26,6 +24,10 @@ import Icon from '@theme/home/Icon.vue'
 - 🤺 演练场，大有用武之地
 - 🔐 测试完善，安全可靠
 
+## 📝 最新版本
+
+<Badge />
+
 ## 📦 安装
 
 ```bash
@@ -46,8 +48,37 @@ import { useRequest } from 'vue-hooks-plus'
 import useRequest from 'vue-hooks-plus/es/useRequest'
 ```
 
+### 自动引入
+
+目前只有 `unplugin-auto-import/vite` 下的 `resolver`。
+
+#### Vite
+
+```bash
+
+npm i @vue-hooks-plus/resolvers
+
+```
+
+##### 使用
+
+```typescript
+import AutoImport from 'unplugin-auto-import/vite'
+import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'
+
+export const AutoImportDeps = () =>
+  AutoImport({
+    imports: ['vue', 'vue-router'],
+    include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
+    dts: 'src/auto-imports.d.ts',
+    resolvers: [VueHooksPlusResolver()],
+  })
+```
+
 <br />
 
+## 🧩 兼容
+
 ::: warning 不兼容 vue2 版本
 
 :::