From fc3617b00930c814fc4e050c1f2039cfda3fdd91 Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Thu, 12 Sep 2024 23:41:08 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0readme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md           | 77 +++++++++++++++++++++++++++++++++++++++++++++
 example/src/main.ts |  7 +++--
 2 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c02fe43
--- /dev/null
+++ b/README.md
@@ -0,0 +1,77 @@
+# vite-plugin-vue-app-loading
+
+[![NPM version](https://img.shields.io/npm/v/vite-plugin-vue-app-loading?color=a1b858&label=)](https://www.npmjs.com/package/vite-plugin-vue-app-loading)
+
+给 Vue 应用添加一个加载动画。
+
+## 安装
+
+```bash
+npm i vite-plugin-vue-app-loading -D
+```
+
+## 使用
+
+```ts
+// vite.config.ts
+import AppLoading from 'vite-plugin-vue-app-loading'
+
+export default defineConfig({
+  plugins: [
+    AppLoading(),
+  ],
+})
+```
+
+```ts
+// src/main.ts
+import { loadingFadeOut } from 'virtual:app-loading'
+loadingFadeOut()
+```
+
+## TypeScript
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "types": [
+      "vite-plugin-vue-app-loading/client"
+    ]
+  }
+}
+```
+
+## 自定义动画
+
+在应用根目录创建 `loading.html` 文件，例如：
+
+```html
+<style>
+.loader {
+  font-weight: bold;
+  font-family: sans-serif;
+  font-size: 30px;
+  animation: l1 1s linear infinite alternate;
+}
+.loader:before {
+  content:"Loading..."
+}
+@keyframes l1 {to{opacity: 0}}
+</style>
+<div class="loader"></div>
+```
+
+```ts
+// vite.config.ts
+import AppLoading from 'vite-plugin-vue-app-loading'
+
+export default defineConfig({
+  plugins: [
+    AppLoading('loading.html'),
+  ],
+})
+```
+
+> [!TIP]
+> 你可以从 [CSS Loaders](https://css-loaders.com/) 网站中找找灵感，它提供了 600+ 个纯 CSS 的加载动画。
diff --git a/example/src/main.ts b/example/src/main.ts
index b2ed34f..5503b82 100644
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -1,8 +1,9 @@
+import { loadingFadeOut } from 'virtual:app-loading'
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
 
+import './style.css'
+
 createApp(App).mount('#app')
 
-import { loadingFadeOut } from 'virtual:app-loading'
-loadingFadeOut()
\ No newline at end of file
+loadingFadeOut()