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。

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

在您的nuxt.config.js中，将components设置为true。

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-components

Answer 3

您可以通过创建自定义插件来做到这一点这样的东西..

import Vue from 'vue'

/** form */
import Email from '~/components/elements/form/Email'
import Mobile from '~/components/elements/form/Mobile.vue'
import Password from '~/components/elements/form/Password'
import TextInput from '~/components/elements/form/TextInput.vue'
import FormLayout from '~/components/elements/form/FormLayout.vue'
import SelectInput from '~/components/elements/form/SelectInput.vue'
import ConfirmPassword from '~/components/elements/form/ConfirmPassword'

/** snackbar */
import Snackbar from '~/components/elements/Snackbar.vue'

/** skeleton */
import PageListing from '~/components/skeleton/PageListing'

/** slots */
import OneRow from '~/components/slots/layouts/OneRow'
import LoginWrapper from '~/components/slots/layouts/LoginWrapper'

/** slots tab */
import TabHolder from '~/components/slots/layouts/TabHolder'
import TabHolderHeading from '~/components/slots/layouts/TabHolderHeading.vue'

/** gallery */
import GalleryInput from '~/components/gallery/GalleryInput.vue'
import GalleryDialog from '~/components/gallery/GalleryDialog.vue'

const components = { TabHolderHeading, TabHolder, GalleryInput, GalleryDialog, Snackbar, LoginWrapper, PageListing, OneRow, Password, FormLayout, ConfirmPassword, Email, Mobile, TextInput, SelectInput }

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

现在通过在 nuxt.config.js 中调用它使其全局可用

plugins: [
    { src: '~/plugins/import-design-elements' }
],

Answer 4

Make a frame.vue under the folder layout , import all your components in it and make it the layout for all your templates, like /template.vue

Answer 5

！！！始终以Base开头的组件命名，例如：BaseIcon.vue
1.首先，您需要在您的插件文件夹中创建一个插件，我叫mine 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)
})

在您的nuxt.config.js内部添加plugins: ['@plugins/global.js']
现在您只能通过输入<BaseIcon />

Answer 6

在index.js文件（位于/.nuxt）中：

＆＃13;

// Nuxt's default imports

import Vue from 'vue'
import Meta from 'vue-meta'
import router from './router.js'
import store from './store.js'
import NuxtChild from './components/nuxt-child.js'
import NuxtLink from './components/nuxt-link.js'
import NuxtError from './components/nuxt-error.vue'
import Nuxt from './components/nuxt.vue'
import App from './App.vue'


// Import your Components after the Nuxt defaults

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'

// Register Global Components

Vue.component('BlMain', BlMain);
Vue.component('BlRegion', BlRegion);
Vue.component('BlLayout', BlLayout);
Vue.component('BlGrid', BlGrid);
Vue.component('BlColumn', BlColumn);

＆＃13;

有关详细信息，请查看the Vue.js Docs。

Vue中的全局组件（nuxt）

6 个答案: