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}fromvitepress-demo-preview/pluginimport{codePreviewPlugin}fromvitepress-script-previewexportdefaultdefineConfig({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}fromvueimporttype{Theme}fromvitepressimportDefaultThemefromvitepress/themeimportvitepress-script-preview/components/style.cssimport./style.cssimport{CodePreview}fromvitepress-script-preview/components;importvitepress-demo-preview/component/dist/style.cssimport{ElementPlusContainer}fromvitepress-demo-preview/componentexportdefault{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
)
