Vue의 글로벌 구성 요소(nuxt)

Vue의 글로벌 구성 요소(nuxt)

Vue 애플리케이션을 구축하는 동안 모든 템플릿에서 특정 Vue 구성 요소를 다시 사용하십시오.우리의 그리드 시스템은 .region, .layout, .grid, .column 요소들로 존재한다.모두 별도의 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 구성 요소를 전체적으로 가져올 수 있는 방법이 있는가?구성요소 프레임을 작성할 수 있는 옵션인가?위의 가져오기를 포함하고 모든 템플릿에 프레임 구성 요소를 추가하는 vue?다른 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. 먼저 플러그인 폴더에 플러그인을 생성해야 하는데, 나는 내 것을 글로벌이라고 불렀다.js
2. lodash 설치: npm 설치 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)
})

4. nuxt.config.js 추가 내부plugins: ['@plugins/global.js']
5. 이제 입력만으로 기본 구성 요소를 사용할 수 있음<BaseIcon />

당신 안에nuxt.config.js세트components로true.

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-components

사용자 지정 플러그인을 생성하면 이렇게 할 수 있다.

import Vue from 'vue'

/** form */
import Email from '~/components/elements/form/Email'
import Mobile from '~/components/elements/form/Mobile.vue'
import Password from '~/components/elements/form/Password'
import TextInput from '~/components/elements/form/TextInput.vue'
import FormLayout from '~/components/elements/form/FormLayout.vue'
import SelectInput from '~/components/elements/form/SelectInput.vue'
import ConfirmPassword from '~/components/elements/form/ConfirmPassword'

/** snackbar */
import Snackbar from '~/components/elements/Snackbar.vue'

/** skeleton */
import PageListing from '~/components/skeleton/PageListing'

/** slots */
import OneRow from '~/components/slots/layouts/OneRow'
import LoginWrapper from '~/components/slots/layouts/LoginWrapper'

/** slots tab */
import TabHolder from '~/components/slots/layouts/TabHolder'
import TabHolderHeading from '~/components/slots/layouts/TabHolderHeading.vue'

/** gallery */
import GalleryInput from '~/components/gallery/GalleryInput.vue'
import GalleryDialog from '~/components/gallery/GalleryDialog.vue'

const components = { TabHolderHeading, TabHolder, GalleryInput, GalleryDialog, Snackbar, LoginWrapper, PageListing, OneRow, Password, FormLayout, ConfirmPassword, Email, Mobile, TextInput, SelectInput }

Object.entries(components).forEach(([name, component]) => {
  Vue.component(name, component)
})

이제 nuxt.config.js로 전화하여 글로벌하게 사용 가능

plugins: [
    { src: '~/plugins/import-design-elements' }
],

액자를 만들다.폴더 레이아웃 아래에 있는 모든 구성 요소를 가져와서 /template과 같은 모든 템플릿의 레이아웃으로 만드십시오.부에를 하다

참조URL: https://stackoverflow.com/questions/43040692/global-components-in-vue-nuxt