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 を使用しています。
アカウントを登録するプラグインを使用する必要があります。
// 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']
}
!!!コンポーネントには常に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)
})
plugins: ['@plugins/global.js']
を追加します<BaseIcon />
と入力するだけで基本コンポーネントを使用できます。フォルダレイアウトの下にframe.vueを作成し、その中のすべてのコンポーネントをインポートして、 / template.vue のようにすべてのテンプレートのレイアウトにします。
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 を確認してください。