使用自定义构建的 Nuxt 模块将 nuxt.config.js 配置注入全局注册组件

如何解决使用自定义构建的 Nuxt 模块将 nuxt.config.js 配置注入全局注册组件

所以这个问题可能很复杂，但我会尽量解释清楚。

我目前正在创建 Nuxt 模块。如果您熟悉创建它们，您就会知道可以在您的 nuxt.config.js 中对其进行配置。我在这里做的：

components: {
    modules: ['carousel','filter','post-loop','gform'],gform: {
         title: true
    }
},

我有一系列要全局注册的模块。我已经使用以下配置这样做了：

(index.js)

const path = require('path');

export default function ClassName(moduleOptions) {

    const options = Object.assign({},this.options.components,moduleOptions);
    const availableModules = ['carousel','gform','post-loop'];
    const unkNownModules = options.modules.filter(mod => !availableModules.includes(mod));

    if(!options.modules) {
        throw new Error('ERROR: Please check the ReadMe,you need to include a modules array specifying what modules you want to enable');
    }

    if(unkNownModules.length > 0) {
        throw new Error(`ERROR: The following modules do not exist in the @blueelevation/components module: ${unkNownModules}`);
    }

    this.addplugin({
        src: path.resolve(__dirname,'./plugin/plugin.js'),options: options
    })

    const cssFilesToLoad = ['carousel.css'];

    cssFilesToLoad.forEach(file => this.options.css.push(path.resolve(__dirname,`dist/css/${file}`)));

    this.addplugin({
        src: path.resolve(__dirname,'./plugin/eventbus.js'),})
}

需要关注的重要部分是 plugin.js，我在 Nuxt 实例中全局注册组件：

import Vue from 'vue';

/**
 * If the module array contains carousel,we register it as a global component.
 */
<% if(options.modules.includes('carousel')) { %>
    import Carousel from '@blueelevation/components/components/Carousel/Carousel.vue';
    Vue.component('Carousel',Carousel);
<% } %>

/**
 * If the module array contains post-loop,we register it as a global component.
 */
<% if(options.modules.includes('post-loop')) { %>
    import PostLoop from '@blueelevation/components/components/PostLoop/PostLoop.vue';
    Vue.component('pwa-post-loop',PostLoop);
<% } %>

/**
 * If the module array contains filter,we register it as a global component.
 */
<% if(options.modules.includes('filter')) { %>
    import Filter from '@blueelevation/components/components/Filter/Filter.vue';
    import Filterheading from '@blueelevation/components/components/Filter/Filterheading.vue';
    Vue.component('pwa-filter',Filter);
    Vue.component('pwa-filter-heading',Filterheading);
<% } %>

/**
 * If the module array contains gform,we register it as a global component.
 */
<% if(options.modules.includes('gform')) { %>
    import GForm from '@blueelevation/components/components/GForm/GForm.vue';
    Vue.component('pwa-gform',GForm);
<% } %>

如您所见，我全局注册了组件，以防它在数组中指定。我目前遇到的问题是我的 gform.title 中有一个 nuxt.config.js 属性。如何将此 Boolean 传递给全局注册的 GForm 组件？所以我可以有条件地呈现标题，以防它是 true?

解决方法

我回答了我自己的问题。如果有人想知道如何做到这一点，您可以通过在 appBar: PreferredSize( preferredSize: Size.fromHeight(150.0),child: AppBar( title: Text('appbar'),), 中执行以下操作将某些内容注入到您的组件中：

plugin.js

注意 gform 组件全局注册下面的 import Vue from 'vue'; import Carousel from '@blueelevation/components/components/Carousel/Carousel.vue'; import PostLoop from '@blueelevation/components/components/PostLoop/PostLoop.vue'; import Filter from '@blueelevation/components/components/Filter/Filter.vue'; import FilterHeading from '@blueelevation/components/components/Filter/FilterHeading.vue'; import GForm from '@blueelevation/components/components/GForm/GForm.vue'; export default(context,inject) => { /** * If the module array contains carousel,we register it as a global component. */ <% if(options.modules.includes('carousel')) { %> Vue.component('Carousel',Carousel); <% } %> /** * If the module array contains post-loop,we register it as a global component. */ <% if(options.modules.includes('post-loop')) { %> Vue.component('pwa-post-loop',PostLoop); <% } %> /** * If the module array contains filter,we register it as a global component. */ <% if(options.modules.includes('filter')) { %> Vue.component('pwa-filter',Filter); Vue.component('pwa-filter-heading',FilterHeading); <% } %> /** * If the module array contains gform,we register it as a global component. */ <% if(options.modules.includes('gform')) { %> Vue.component('pwa-gform',GForm); inject('GForm',{config: <%= serialize(options.gform) %> }); <% } %> } 函数。我用序列化对象（inject() 中的 GForm）注入 options.gform。之后，此 nuxt.config.js 配置将通过以下方式在组件中可用：

GForm。

希望这对未来的人有所帮助。