在docusaurus中使用Vue组件⚡_docusaurus vue-CSDN博客

本文链接：https://blog.csdn.net/JKR10000/article/details/120824100

docusaurus，类似于Vuepress，是一个静态站点生成工具。但不同的是，使用docusaurus可以在文档中轻易混入React组件，很适合写React相关组件的文档，而Vuepress则是适合混入Vue组件。

这就让我比较困惑，如果我想在我的博客中同时使用vue组件和react组件，二者都满足不了我的要求，于是决定自己摸索，在文档中同时使用两种组件

初步目的是想把Vue组件封装成react组件，再让docusaurus渲染这个组件，不用自己写底层，省下一笔不小的功夫

docusaurus官网的描述：

在 Markdown 中使用 JSX：

export const Highlight = ({
    children, color}) => (
  <span
    style={
   {
   
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {
   children}
  </span>
);

<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
I can write **Markdown** alongside my _JSX_!

可以得到如下渲染结果：

那么就有了一定思路，写一个方法，vue组件作为输入，返回react组件：

export const uvc = (vueComponent) => {
   
     return function() {
   
         return ( //这里一个返回一个jsx
         	
         )
     }
}

那么接下来就要处理两件事情：

如何解析.vue文件
如何进行组件转换

解析.vue文件

使用vue-loader

Vue Loader 是一个 w