07. Vuepress2.x Markdown 中使用 Vue 组件

一、前言

Vuepress2.x 对组件使用有较大变化，点此查看

 二、详解

官网插件配置说明

步骤1：安装插件，注意vuepress2.x 也要使用 v2.x ，版本查看

npm i @vuepress/plugin-register-components@2.0.0-beta.23

步骤2：新建文件 docs/.vuepress/components/MyTemplate.vue

 <template>
    <h1>MyTemplate</h1>
 </template>
 
 <script>
 export default {
 
 }
 </script>
 
 <style>
 
 </style>

步骤3：docs/.vuepress/config.ts 中配置。有两种方式：

方式一：单个组件配置

const { path } = require('@vuepress/utils')

module.exports = {
    plugins: [
        [
          '@vuepress/plugin-register-components',
            {
                components: {
                    MyTemplate: path.resolve(__dirname, './components/MyTemplate.vue')                    
                }
            }
        ]
    ]
}

方式二：将 docs/.vuepress/components 下的vue文件自动注册为 Vue 组件（推荐）

const { path } = require('@vuepress/utils')

module.exports = {
    plugins: [
        [
          '@vuepress/plugin-register-components',
            {
                componentsDir: path.resolve(__dirname, './components')
            }
        ]
    ]
}

步骤4：使用