use-vue-component

⚡安装

需要安装两个npm包：

yarn add docusaurus-plugin-usevue use-vue-component

另一个插件地址：docusaurus-plugin-usevue

插件导入

在docusaurus.config.js文件中，添加如下配置

module.exports = {
  // ...
    plugins: [
        //...
        'docusaurus-plugin-usevue'
    ],
};

用法

例如有如下场景

目录结构:

+-- docs
|   +-- test.vue
|   +-- intro.mdx

test.vue内容：

<template>
    <div class="red">
        hello world, this is {{name}}
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: 'peter'
        }
    }
}
</script>

<style>
    .red {
        color: red
    }
</style>

intro.mdx内容:

---
sidebar_position: 1
---

## Getting Started

import {uvc} from 'use-vue-component'  //引入转换包
import test from './text.vue'  //引入vue组件

export const HelloWorld = uvc(test)  //转换

<HelloWorld/>

渲染结果