feat: add site demo

site/.vitepress/config.ts

@@ -1,5 +1,11 @@
 import { defineConfig } from 'vitepress'
+import { getNav } from './config/nav'
+import { getSidebar } from './config/sidebar'
 
 export default defineConfig({
-  title: 'vue3组件库站点'
+  title: 'vue3组件库站点',
+  themeConfig: {
+    nav: getNav(),
+    sidebar: getSidebar()
+  }
 })

site/.vitepress/config/nav.ts

@@ -0,0 +1,10 @@
+import type { DefaultTheme } from 'vitepress'
+
+export const getNav = (): DefaultTheme.NavItem[] => {
+  return [
+    {
+      text: '组件',
+      link: '/components/'
+    }
+  ]
+}

site/.vitepress/config/sidebar.ts

@@ -0,0 +1,10 @@
+import type { DefaultTheme } from 'vitepress'
+
+export const getSidebar = (): DefaultTheme.Sidebar => {
+  return [
+    {
+      text: 'Button 按钮',
+      link: '/components/button/'
+    }
+  ]
+}

site/.vitepress/theme/index.ts

@@ -0,0 +1,12 @@
+import type { Theme } from 'vitepress'
+// eslint-disable-next-line import/no-named-as-default
+import DefaultTheme from 'vitepress/theme'
+import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp?.(ctx)
+    ctx.app.component('Demo', AntdTheme)
+  }
+} as Theme

site/components/button/index.md

@@ -0,0 +1,9 @@
+# Button 按钮
+
+按钮用于开始一个即时操作。
+
+
+## 演示例子
+
+
+<demo src="../../demos/button/basic.vue"></demo>

site/demos/button/basic.vue

@@ -0,0 +1,16 @@
+<docs>
+---
+title: 基础按钮
+---
+
+这是一个Button的基础按钮
+
+</docs>
+
+<script lang="ts" setup></script>
+
+<template>
+  <div>按钮</div>
+</template>
+
+<style scoped></style>

site/vite.config.ts

@@ -1,6 +1,12 @@
 import { defineConfig } from 'vite'
 import vueJsxPlugin from '@vitejs/plugin-vue-jsx'
+import { VitePluginVitepressDemo } from 'vite-plugin-vitepress-demo'
 
 export default defineConfig({
-  plugins: [vueJsxPlugin()]
+  plugins: [
+    vueJsxPlugin(),
+    VitePluginVitepressDemo({
+      glob: ['**/demos/**/*.vue']
+    })
+  ]
 })