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

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

一、项目结构与基础配置

1.1 侧边栏配置（sidebar.ts）

// docs/.vitepress/sidebar.tsexportdefault{'/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.tsexportconstnav=[{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.mtsimport{componentPreview,containerPreview}from'@vitepress-demo-preview/plugin'import{codePreviewPlugin}from'vitepress-script-preview'exportdefaultdefineConfig({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.tsimport{h}from'vue'importtype{Theme}from'vitepress'importDefaultThemefrom'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'exportdefault{extends:DefaultTheme,Layout:()=>{returnh(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