Vue中的全局组件（nuxt）

在构建Vue应用程序时，我们在每个模板中重新使用某些Vue组件。我们的网格系统存在于.region，.layout，.grid和.column元素之外。所有这些都是单独的Vue组件（，...）。Vue中的全局组件（nuxt）

现在，我们最终在每个模板这样做：

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组件？其他有限元框架如何解决这个问题？

我们在Vue上使用Nuxt JS。

来源

2017-03-27 Warre Buysse

我看到的最常见的方式是你可以创建一个文件，导出所有这些文件，然后你可以减少导入到一个文件，像这样：http://stackoverflow.com/a/29722646 – Christopher

我明白它适用于ES6类，但我似乎无法使用Vue组件工作。 –

下使文件夹布局的frame.vue，导入所有的组件，并使其成为所有模板的布局，像 /template.vue

来源

2017-04-13 14:53:48

您应该使用注册帐户的插件。

// plugins/bl-components.js 

import Vue form '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.keys(Components).forEach(key => { 
    Vue.component(key, components[key]) 
}) 


// nuxt.config.js 
export default { 
    plugins: ['~plguins/bl-components.js'] 
}

来源

2017-06-12 14:41:47 motia

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

// 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);

欲了解更多信息，请the Vue.js Docs。

来源

2017-08-04 17:23:33

Vue中的全局组件（nuxt）

回答

相关问题