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并在每个模板中添加F​​rame组件？其他FE框架如何解决这个问题？

我们在Vue 上使用Nuxt JS.

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']
}

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)
})

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