viepress:vue组件展示和源码功能

VitePress实战：vue组件展示和源码功能

一、项目结构与基础配置

1.1 侧边栏配置（sidebar.ts）

// docs/.vitepress/sidebar.ts
export default {
  '/example/': [
    {
      text: 'Examples',
      items: [
        { text: 'Markdown Examples', link: '/example/markdown' },
        { text: 'Runtime API Examples', link: '/example/api' }
      ]
    }
  ],
  '/guide/': [
    {
      text: '组件',
      items: [
        { text: '引入', link: '/guide/imp' },
        { text: '使用', link: '/guide/use' },
        { text: '预览', link: '/guide/preview' }
      ]
    }
  ]
}

• 侧边栏分为Examples和组件两部分，通过路径 /example/ 和 /guide/ 分层管理文档
• 组件文档包含 引入 （基础用法）、使用 （高级特性）、预览（交互演示）三级结构

1.2 导航栏配置（nav.ts）

// docs/.vitepress/nav.ts
export const nav = [
  { text: 'Home', link: '/' },
  { text: 'Examples', link: '/example/markdown' },
  { text: '组件', link: '/guide/imp' }
]

• 导航栏直接指向组件文档入口 /guide/imp，体现组件功能的核心地位
• 示例页面通过二级链接 /example/markdown 进行扩展

---

此篇文章重点梳理的是vue组件展示和源码功能，其基础配置可查看从入门到进阶：VitePress 构建高效静态站点全指南

二、核心插件集成

2.1 预览插件配置（config.mts）

// docs/.vitepress/config.mts
import { componentPreview,containerPreview } from '@vitepress-demo-preview/plugin'
import { codePreviewPlugin } from 'vitepress-script-preview'

export default defineConfig({
  markdown: {
    config(md) {
      // 组件预览插件
      md.use(componentPreview, { clientOnly: true })
      // 代码容器预览
      md.use(containerPreview,{ clientOnly: true })
      md.use(codePreviewPlugin, { clientOnly: true })
    }
  }
})

2.2 主题配置（theme.mts`）

// docs/.vitepress/theme/index.ts

import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import 'vitepress-script-preview/components/style.css'
import './style.css'
import { CodePreview } from 'vitepress-script-preview/components';
import '@vitepress-demo-preview/component/dist/style.css'
import { ElementPlusContainer } from '@vitepress-demo-preview/component'
export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    })
  },
  enhanceApp({ app, router, siteData }) {
    app.component('CodePreview', CodePreview);
    app.component('demo-preview', ElementPlusContainer)
    // ...
  }
} satisfies Theme

三、组件预览实战

3.1 基础用法示例

在Markdown中使用 :::preview 块实现组件交互：

<!-- docs/guide/preview.md -->
## 组件预览功能

```css
:::preview
demo-preveiw="./xx.vue"
:::

四. 总结

功能库：@vitepress-demo-preview/component、@vitepress-demo-preview/plugin、vitepress-script-preview