Vue (nuxt) 中的全局组件

Question

在构建 Vue 应用程序时，我们在每个模板中重复使用某些 Vue 组件。我们的网格系统存在于 .region、.layout、.grid、.column 元素之外。它们都是独立的 Vue 组件 (, …)。

我们现在最终在每个模板中都这样做：

 import BlMain from '~components/frame/main/Main.vue'
import BlRegion from '~components/frame/region/Region.vue'
import BlLayout from '~components/frame/layout/Layout.vue'
import BlGrid from '~components/frame/grid/Grid.vue'
import BlColumn from '~components/frame/column/Column.vue'

有没有办法在你的项目中全局导入 Vue 组件？是否可以选择创建一个包含上述导入的组件 Frame.vue 并在每个模板中添加 Frame 组件？其他 FE 框架如何解决这个问题？

我们在 Vue 上使用 Nuxt JS 。

原文由 Warre Buysse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该使用注册帐户的插件。

 // plugins/bl-components.js

import Vue from 'vue'
import BlMain from '~components/frame/main/Main.vue'
import BlRegion from '~components/frame/region/Region.vue'
import BlLayout from '~components/frame/layout/Layout.vue'
import BlGrid from '~components/frame/grid/Grid.vue'
import BlColumn from '~components/frame/column/Column.vue'

const components = { BlMain, BlRegion, ... }

Object.entries(components).forEach(([name, component]) => {
    Vue.component(name, component)
})

 // nuxt.config.js

export default {
    plugins: ['~plugins/bl-components']
}

原文由 motia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

！！！始终以 Base 开头命名您的组件，例如： BaseIcon.vue

1.首先，你需要在你的插件文件夹中创建一个插件，我叫我的global.js

2.安装lodash：npm install lodash

3. 在 global.js 中添加以下代码：

 import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  '~/components',
  false,
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach((fileName) => {
  const componentConfig = requireComponent(fileName)

  const componentName = upperFirst(
    camelCase(fileName.replace(/^\.\/(.*)\.\w+$/, '$1'))
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

1. 在你的 nuxt.config.js 中添加 plugins: ['@plugins/global.js']
2. 现在，您只能通过键入 <BaseIcon /> 来使用基本组件

原文由 Tircomnicu 发布，翻译遵循 CC BY-SA 4.0 许可协议