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

Eric⠀

已于 2024-07-13 20:54:55 修改

阅读量1.5k

点赞数 12

分类专栏：从零搭建组件库文章标签：笔记前端 javascript js vue.js

于 2024-07-06 21:30:07 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73884922/article/details/140234328

版权

一、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.引入文件之后运行报错