Nuxt-根据布局的全局组件

时间:2018-10-25 12:57:18

标签: vue.js webpack nuxt.js nuxt

我正在开发Nuxt通用应用程序,其中有两种布局,一种用于控制面板,另一种用于叶状UI。

我需要注册全局组件,但我只需要它们对于特定布局是全局的,因为我不想在其捆绑的前端应用程序中下载不必要的脚本。

有什么办法吗?

2 个答案:

答案 0 :(得分:0)

根据docs全局组件已在Vue原型上注册,并且可以从创建的Vue实例中的任何组件进行访问。这意味着,只要您使用单个实例,所有全局注册(组件,过滤器,混入等)都将被共享。

因此,答案是没有简单的方法可以做到这一点,特别是当Nuxt.js处理webpack配置和路由拆分的必要部分时。

应该在本地注册组件,以优化性能。

您可能要查看的另一项建议是,即使您优化了组件的加载,应用程序仍将加载所有声明的存储模块,插件,外部库等。最重要的是,根据我的经验,已针对该应用程序进行了设置,并且必须将一些更改部署到控制面板-整个站点都必须关闭进行维护。

我认为将前端面板和控制面板分离到自己的应用程序中是一种好的做法,这可以使职责分离,并且是对应用程序前端部分进行最佳优化的唯一方法。

控制面板通常在子域上可用,但可以在Web服务器上配置为子文件夹,例如domain.com/control-panel

答案 1 :(得分:0)

两步可以解决您的问题:

  1. 在插件目录中创建一个global_component.js文件

然后添加以下代码,

import Vue from 'vue'
import your_component from '../your component directory/your_component.vue'

Vue.component('your-component', your_component)
  1. 将此js文件添加到Nuxt.config.js插件块中
  

插件:['@/plugins/global_component.js'],

  1. 现在您可以将组件用于以下任何模板

<template>
  <section class="container">
  <your-component></your-component>
  </section>
</template>