Question

我正在尝试编写Vuepress插件以利用App Level增强功能并安装Vue插件。但是我似乎无法使它正常工作。您能看一下下面的代码，看看有什么问题吗？

{.vuepress/config.js}
module.exports = {
  plugins: [
    require('./builder.plugin.js')
  ]
}

{.vuepress/builder.plugin.js}
module.exports = (option, ctx) => {
  return {
    enhanceAppFiles: [{
      name: 'builder-plugin',
      content: `export default ({ Vue }) => {
        Vue.component('b-header', {
          name: 'b-header',
          template: '<div id="header"><slot /></div>'
        })
      }`
    }]
  }
}

{README.md}
# Introduction
<b-header>Test from component</b-header>

我得到的最后一个错误是：

Unknown custom element: <b-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Answer 1

我实际上找到了答案。上面的方法不起作用，因为我使用插件将客户端站点代码与运行时代码混合在一起。

诀窍是使用EnhanceAPP钩子。参考：https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration

如何正确编写vuepress插件？

1 个答案: