VuePress2.0 全局注册组件简述 plugin-register-components@next 安装 .vue

简述

在使用VuePress构建静态网站或编写文档时，你可以直接在Markdown文件中编写Vue代码。这意味着你可以在Markdown文件中轻松地使用Vue语法和指令来设置动态内容和交互性元素。而且，你还可以引入自定义的Vue组件，以便在页面中更加灵活地开发界面，同时也支持全局组件引入。

plugin-register-components@next

安装

npm i -D @vuepress/plugin-register-components@next

.vuepress->config.js配置

import { getDirname, path } from '@vuepress/utils'
import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
const __dirname = getDirname(import.meta.url)
export default {
    plugins: [ registerComponentsPlugin({ componentsDir: path.resolve(__dirname, './components') })],
}

这里配置了plugin-register-components插件，.vuepress/components目录下的vue文件会被自动全局注册引入。

clinet.js配置

该项目使用的是VuePress2.0，之前client.js是叫enhanceApp.js，优化后改名为client.js，该文件会在VuePress构建过程中的最后阶段被调用。

import { defineClientConfig } from '@vuepress/client'
import MyComponent from './MyComponent.vue'

export default defineClientConfig({
    enhance({ app, router, siteData }){
        // 注册
        app.component('MyComponent', MyComponent)
    },
    setup(){},
    layouts: {},
    rootComponents: [],
})