Jay's Blog

Appearance

Vue 组件 Playground ​

这个页面是一个 Vue 组件的游乐场，你可以在这里试验各类 Vue 组件。

组件试验区 ​

布局组件 ​

这个网站使用了自定义的布局组件，包括 CustomSidebar 和 SidebarImage。

更多组件将在这里添加 ​

你可以在这个页面添加更多的组件进行测试和展示。

如何在 Playground 中添加组件 ​

在这个 Playground 中试验组件有两种方式：

1. 使用全局注册的组件 ​

全局注册的组件可以直接在 Markdown 中使用：

md
<CustomSidebar />

2. 在页面中导入本地组件 ​

你也可以在页面中直接导入组件，无需全局注册：

md
<script setup>
import { defineAsyncComponent } from 'vue'
const MyComponent = defineAsyncComponent(() => import('./components/MyComponent.vue'))
</script>

<MyComponent />

创建新组件指南 ​

要创建并测试新的 Vue 组件，请按照以下步骤操作：

  1. 在 .vitepress/components/ 目录中创建组件文件（例如 MyComponent.vue）
  2. 在 .vitepress/theme/index.js 中导入并注册该组件（全局使用）
  3. 在这个 Playground 页面中使用该组件

或者，你可以直接在这个页面中使用 <script setup> 标签导入组件，无需全局注册。

组件实验技巧 ​

  • 尝试修改现有组件的样式和行为
  • 创建自己的交互式组件
  • 组合多个组件形成复杂的 UI
  • 测试不同的 Vue 功能，如 Composition API、插槽等