web-dev-qa-db-ja.com

Vue（nuxt）のグローバルコンポーネント

Vueアプリケーションを構築する際、すべてのテンプレートで特定のVueコンポーネントを再利用します。グリッドシステムは、.region、.layout、.grid 、。の外に存在します。列要素。それらはすべて個別の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 を使用しています。

javascriptecmascript-6vuejs2nuxt.js
8
Warre Buysse

アカウントを登録するプラグインを使用する必要があります。

// 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']
}
22
motia

!!!コンポーネントには常にBaseで始まる名前を付けてください。例：BaseIcon.vue
1。まず、プラグインフォルダにプラグインを作成する必要があります。私はmineglobal.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)
})
  1. Nuxt.config.js内にplugins: ['@plugins/global.js']を追加します
  2. これで、<BaseIcon />と入力するだけで基本コンポーネントを使用できます。
1
Tircomnicu

フォルダレイアウトの下にframe.vueを作成し、その中のすべてのコンポーネントをインポートして、 / template.vue のようにすべてのテンプレートのレイアウトにします。

1
Aymen Jemli

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

詳細については、 Vue.js Docs を確認してください。

0
Deep Duggal