From 2c2ae91dbc1d517eb048d83c0224bd3a68f9f776 Mon Sep 17 00:00:00 2001
From: "Mr.Mao" <951416545@qq.com>
Date: Sun, 7 May 2023 17:59:41 +0800
Subject: [PATCH] chore(readme): update features readme

---
 README.md | 48 ++++++++++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index b9f7231..19eefe4 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,31 @@
+帮我优化下面的文档：
+
 # vue3-pixi-renderer
 
-> Use Vue 3 to create PixiJS applications
+Use Vue 3 to create PixiJS applications
+
+- 💚 Lightweight and flexible Vue 3 library for creating PixiJS applications.
+- ✏️ Provides a custom Vue renderer that creates PixiJS objects instead of HTML elements.
+- 📦 Supports all PixiJS objects, such as Container, Sprite, Graphics, Text, etc
+- 🧑‍💻 Support specifying texture paths in templates to load texture objects
+- ✨ All events emitted by PixiJS objects are supported
+- 🗃️ Offers a `Assets` component for bundling assets.
+
+## Try it Online
+
+[![StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vue-pixi-renderer)
+
+## Install
+
+```sh
+# with pnpm
+pnpm add @overlays/vue
+
+# with yarn
+yarn add @overlays/vue
+```
 
-This library provides it's own vue renderer that will create PixiJS objects instead of html elements.
+## Usage
 
 ```html
 <script setup lang="ts">
@@ -12,7 +35,7 @@ import textureUrl from "@/assets/myTexture.png";
 const hitArea = new Rectangle(0, 0, 64, 64);
 
 function onClick() {
-  console.log('sprite was clicked!');
+  console.log('sprite clicked!');
 }
 </script>
 
@@ -25,26 +48,11 @@ function onClick() {
 </template>
 ```
 
-## Try it Online
-
-[![StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vue-pixi-renderer)
-
-## Install
-
-```sh
-# with pnpm
-pnpm add @overlays/vue
-
-# with yarn
-yarn add @overlays/vue
-```
-
 ## Initialize vue plugin
 
 The vite plugin adds the ability to specify texture paths on sprites & other components that use textures, the same way as the `src` attribute on an image.
 
 ```ts
-// vite.config.ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { compilerOptions, transformAssetUrls } from 'vue3-pixi-renderer/compiler'
@@ -65,7 +73,7 @@ export default defineConfig({
 
 ### Usage in template
 
-The vue plugin will detect any texture props containing the path to an image, and will replace it with a reference to a texture object.
+The Vue Plugin detects any texture props containing the path to an image and replaces it with a reference to a texture object:
 
 ```html
 <sprite texture="@/assets/myTexture.png" />
@@ -162,7 +170,7 @@ const resolves: AssetsResolvers = {
 </template>
 ```
 
-## Creating an application manually
+## Creating an pixi application manually
 
 Using the custom renderer inside `vue3-pixi-renderer`