From e51a0ee12ac58cdcd0edccf33b8a5088c54a72c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E4=BA=9A=E6=98=95?= <1549469775@qq.com>
Date: Fri, 28 Nov 2025 13:16:32 +0800
Subject: [PATCH] feat: add vuepress-plugin-demo-container and update
 documentation with demo examples

---
 docs/.vuepress/config.ts                     |  5 +++++
 docs/.vuepress/enhanceApp.js                 |  8 ++++++++
 docs/README.md                               | 28 +++++++++++++++++++++++++++-
 package.json                                 |  3 ++-
 pnpm-lock.yaml                               |  8 ++++++++
 readme.md                                    |  1 +
 src/components/VaguerButton/VaguerButton.vue |  2 +-
 7 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 docs/.vuepress/config.ts
 create mode 100644 docs/.vuepress/enhanceApp.js

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
new file mode 100644
index 0000000..303a29f
--- /dev/null
+++ b/docs/.vuepress/config.ts
@@ -0,0 +1,5 @@
+import path from 'path'
+
+export default {
+    plugins: ['demo-container'],
+}
\ No newline at end of file
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
new file mode 100644
index 0000000..95241f2
--- /dev/null
+++ b/docs/.vuepress/enhanceApp.js
@@ -0,0 +1,8 @@
+import { VaguerComponents } from "../../dist/vaguer.js"
+import "../../dist/style.css"
+
+export default ({
+    Vue,
+}) => {
+    Vue.use(VaguerComponents)
+}
diff --git a/docs/README.md b/docs/README.md
index eca6cdd..9690a97 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,3 +1,29 @@
 # Hello VuePressasd
 
-Fuck
\ No newline at end of file
+组件展示
+
+::: demo 此处放置代码示例的描述信息，支持 `Markdown` 语法，**描述信息只支持单行**
+```html
+<template>
+  <div class="red-center-text">
+      <VaguerButton>{{ message }}</VaguerButton>
+      <input v-model="message" placeholder="Input something..."/>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      message: 'Hello Vue'
+    }
+  }
+}
+</script>
+<style>
+.red-center-text { 
+  color: #ff7875;
+  text-align: center;
+}
+</style>
+```
+:::
\ No newline at end of file
diff --git a/package.json b/package.json
index a24155d..a319016 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,8 @@
         "vue": "2.6.14",
         "vue-server-renderer": "2.6.14",
         "vue-template-compiler": "2.6.14",
-        "vuepress": "^1.9.10"
+        "vuepress": "^1.9.10",
+        "vuepress-plugin-demo-container": "^0.2.0"
     },
     "volta": {
         "node": "18.17.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7783256..bd31c23 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       vuepress:
         specifier: ^1.9.10
         version: 1.9.10(@vue/compiler-sfc@3.5.25)(hogan.js@3.0.2)(lodash@4.17.21)
+      vuepress-plugin-demo-container:
+        specifier: ^0.2.0
+        version: 0.2.0
 
 packages:
 
@@ -7395,6 +7398,9 @@ packages:
   vuepress-plugin-container@2.1.5:
     resolution: {integrity: sha512-TQrDX/v+WHOihj3jpilVnjXu9RcTm6m8tzljNJwYhxnJUW0WWQ0hFLcDTqTBwgKIFdEiSxVOmYE+bJX/sq46MA==}
 
+  vuepress-plugin-demo-container@0.2.0:
+    resolution: {integrity: sha512-IXWZUc9+mErxjhBMRvhjHkGlXC3aXLS8wRV4kh4RZYAOVtb8nLv2fmpzwrSZrnIOXLGMcMTObdFruVzX9kBylw==}
+
   vuepress-plugin-smooth-scroll@0.0.3:
     resolution: {integrity: sha512-qsQkDftLVFLe8BiviIHaLV0Ea38YLZKKonDGsNQy1IE0wllFpFIEldWD8frWZtDFdx6b/O3KDMgVQ0qp5NjJCg==}
 
@@ -16010,6 +16016,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vuepress-plugin-demo-container@0.2.0: {}
+
   vuepress-plugin-smooth-scroll@0.0.3:
     dependencies:
       smoothscroll-polyfill: 0.4.4
diff --git a/readme.md b/readme.md
index 5640d36..2265439 100644
--- a/readme.md
+++ b/readme.md
@@ -1,2 +1,3 @@
 https://github.com/wheatjs/vaguer
 https://v1.vuepress.vuejs.org/zh/
+https://docs.chenjianhui.site/vuepress-plugin-demo-container/zh/complex.html#todomvc-%E7%A4%BA%E4%BE%8B
diff --git a/src/components/VaguerButton/VaguerButton.vue b/src/components/VaguerButton/VaguerButton.vue
index 469397b..db27c15 100644
--- a/src/components/VaguerButton/VaguerButton.vue
+++ b/src/components/VaguerButton/VaguerButton.vue
@@ -10,7 +10,7 @@ export default {
 
 <template>
     <button class="vaguer-button">
-        <slot />-{{ a }}
+        <slot />
     </button>
 </template>