Vue 中的全局组件（nuxt）答案

【问题标题】：Global components in Vue (nuxt)Vue 中的全局组件（nuxt）
【发布时间】：2017-08-19 19:45:37
【问题描述】：

在构建 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。

【问题讨论】：

我见过的最常见的方法是您可以创建一个导出所有文件的文件，然后您可以将导入的文件减少到一个文件，如下所示：stackoverflow.com/a/29722646
我了解它如何与 ES6 类一起使用，但我似乎无法让它与 Vue 组件一起使用..

标签： javascript ecmascript-6 vuejs2 nuxt.js

【解决方案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']
}

【讨论】：

nuxt 文档中有一条与这种组件注册方式相关的警告说明，它会导致服务器端的内存泄漏，如下所述：nuxtjs.org/docs/directory-structure/plugins/…

【解决方案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)
})

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

这只会节省你的打字时间。每次仍然会导入组件，此外，您的构建以及热重载时间将显着增加。我最近不得不禁用此功能并手动导入所有组件，因为 dev hmr 时间变得难以忍受。这不值得。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

在文件夹 layout 下创建一个 frame.vue ，将所有组件导入其中并使其成为所有模板的布局，例如 /template.vue

【讨论】：