vue.js - Vuepress - 将组件添加到每个页面

Question

这方面的文档很短。我想在应用程序的每个页面中添加一个 Vue 组件，而不必在每个模板中手动声明它。

我设法添加了一个enhanceApp.js文件并将其添加到其中：

import MyComponent from './components/my-component'

export default ({
  Vue,
  options,
  router,
  siteData
}) => {
  Vue.component('MyComponent', MyComponent)
}

该应用程序运行，但我在任何地方都看不到该组件。有什么技巧或其他方法可以实现这一目标吗？谢谢！

Answer 1

这是一个老问题，可能只适用于 V1，但这很容易实现。

1. .vuepress/components像往常一样添加你的 Vue 组件
2. 添加.vuepress/config.js以下内容：

   module.exports = {
   
     // rest of config...
   
     globalUIComponents: [
       'YourComponent'
     ]
   }
   

   甚至不需要导入您的组件。

有关更多信息，请参阅文档。

Answer 2

你不需要把它放进去enhanceApp.js，只要把组件放进/.vuepress/components去就足够了。

虽然，如果您想将它们保留在该文件夹之外，这可能是让 Vuepress 了解它们的方法。

就像在 Vue 模板中一样在 md 文件中使用它，

<MyComponent></MyComponent>