当前位置：首页 > news >正文

【vue组件库搭建05】vitePress中使用vue/antd/demo预览组件

news 来源：原创 2024/9/22 19:30:11

一、vitepress使用vue及antd组件

1.安装antd之后在docs\.vitepress\theme\index.ts引入文件

// https://vitepress.dev/guide/custom-theme
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import './style.css'
import Demo from '../components/MyComponent.vue'// 引入antd文件
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';export default {extends: DefaultTheme,Layout: () => {return h(DefaultTheme.Layout, null, {// https://vitepress.dev/guide/extending-default-theme#layout-slots})},enhanceApp({ app, router, siteData }) {// 将封装好的vue组件全局注册即可使用app.component('Demo', Demo)app.use(Antd)}
} satisfies Theme

2.引入文件之后运行报错

3.docs\.vitepress\config.js中配置

import { defineConfig } from 'vitepress'// https://vitepress.dev/reference/site-config
export default defineConfig({base: '/eric-ui',title: "eric-ui",description: "eriv-ui",themeConfig: {// https://vitepress.dev/reference/default-theme-confignav: [{ text: 'Home', link: '/' },{ text: 'Examples', link: '/markdown-examples' }],sidebar: [{text: 'Examples',items: [{ text: 'Markdown Examples', link: '/markdown-examples' },{ text: 'Runtime API Examples', link: '/api-examples' }]}],socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }]},// 进行配置vite: {css: {preprocessorOptions: {less: {javascriptEnabled: true,},},},},
})

4.运行测试

二、demo演示工具

安装@vitepress-demo-preview/component

pnpm add @vitepress-demo-preview/component @vitepress-demo-preview/plugin

docs\.vitepress\theme\index.ts 进行如下配置：

import { AntDesignContainer, ElementPlusContainer, NaiveUIContainer } from '@vitepress-demo-preview/component'
import '@vitepress-demo-preview/component/dist/style.css'export default {...DefaultTheme,enhanceApp({ app }: { app: App }) {app.component('demo-preview', AntDesignContainer)}
}

docs\.vitepress\config.js中配置：

import { defineConfig } from 'vitepress'
import { containerPreview, componentPreview } from '@vitepress-demo-preview/plugin'export default defineConfig({markdown: {config(md) {md.use(containerPreview)md.use(componentPreview)}}
})

Preview of Component Form：

<!-- Tip: Support for closed tags --><preview path="./xxx/xx.vue"></preview><preview path="./xxx/xx.vue" title="title"></preview><preview path="./xxx/xx.vue" title="title" description="component description content"></preview>

Preview by Container Form：

:::previewdemo-preview=./xxx/xx.vue::::::preview titledemo-preview=./xxx/xx.vue::::::preview title || component description contentdemo-preview=./xxx/xx.vue:::

运行之后效果：