Vue 3에서 전역 구성 요소를 동적으로 등록하는 방법은 무엇입니까?

위의 헤더 이미지는 Vue 3 공식 홈페이지의 스크린샷입니다.

Vue 3는 2021년 6월 8일부터 Pluto라는 버전 3.1.0으로 안정적입니다. Typescript와 호환되며 setup 함수 내에서 구성 요소의 대부분을 초기화할 수 있는 Composition API를 도입합니다. Vue 3에 대한 자세한 정보를 원하시면 아래 링크를 확인하세요.

Vue 3 공식 웹사이트: https://v3.vuejs.org/

Vue 3 Github: https://github.com/vuejs/vue-next

안정적인 릴리스 정보: https://github.com/vuejs/vue-next/releases/tag/v3.1.0

합성 API: https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api

이 기사의 주제로 즉시 진행합시다. Vue 3에는 이미 구성 요소를 전역적으로 등록하는 방법에 대한 설명서가 있습니다. 전역 구성 요소는 구성 요소 속성에서 가져오기 및 선언 없이 다른 구성 요소의 템플릿 내부에서 즉시 선언할 수 있는 Vue 구성 요소입니다. Vue 3에 익숙하지 않은 경우 구성 요소 내부의 다른 구성 요소를 가져오는 방법은 다음과 같습니다.

<template>
    <div>
        <SomeComponent/>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import SomeComponent from '@/components/SomeComponent.vue';

export default defineComponent({
    components: { SomeComponent },
});
</script>

위의 파일이 views 디렉토리 안에 있고 components 디렉토리에서 재사용 가능한 구성 요소를 가져오고 있다고 가정합니다. 보시다시피 Vue 2에서 컴포넌트를 가져오는 방법은 컴포넌트 생성과 Typescript 사용법(script 태그 내부에 lang="ts" 추가)의 차이점을 제외하고 다르지 않습니다.

구성 요소를 다른 구성 요소에 전역적으로 액세스할 수 있도록 하면 프로젝트가 더 커져 재사용이 가능해지면 매우 유용할 것입니다. 또한 구성 요소가 로컬 하위 구성 요소가 아닌 한 구성 요소 내부의 여러 구성 요소 가져오기를 제거합니다. 아래 예를 참조하십시오.

<template>
    <div>
        <SomeComponent/>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
});
</script>

보시다시피 SomeComponent 구문과 import 함수 내부에 components 매개변수 없이 HTML 요소와 같은 defineComponent 구성 요소를 다른 구성 요소 내부에 직접 선언했습니다.

그렇다면 Vue 3에서 전역 구성 요소를 만드는 방법은 무엇입니까? official documentation 에 따르면 main.ts 파일에서 Typescript else를 사용하여 개발하는 경우 main.js 파일에 구성 요소를 전역적으로 등록하는 방법은 다음과 같습니다.

import { createApp } from 'vue';
import ComponentC from './components/ComponentC.vue';

// Usually it is App.vue inside the createApp function.
// App.vue is your main or root Vue component.
const app = createApp({}); 

// Component named with kebab-case.
app.component('component-a', {
  /* ... */
});

// Component named with PascalCase.
app.component('ComponentB', {
  /* ... */
});

app.component('ComponentC', ComponentC);

// The second argument of the component function is the object that creates a component or it can be an imported component instance.

// It willl mount the Vue app inside the HTML element with ID of 
// #app in index.html which is located in public directory.
app.mount('#app');

참고: Vue 3 Global Registration

위의 절차를 따르면 main.js 또는 main.ts 파일이 부풀어 오를 것입니다. 특히 응용 프로그램이 커지면 재사용 가능한 구성 요소가 증가합니다. 그러면 어떻게 하면 그런 일이 발생하지 않도록 방지할 수 있습니까?

Vue 2를 사용하여 프론트엔드 애플리케이션을 개발할 때 항상 사용하는 전역 구성 요소를 동적으로 등록하는 방법에 대한 아이디어는 Vue 2 설명서에서 얻었습니다. Vue 3에서는 설명서에 이 섹션이 없습니다.

참고: Automatic Global Registration of Base Components

내 구현은 다음과 같습니다.

./components/base/index.ts

import { App } from 'vue';

const requireComponent = require.context(
  // The relative path of the components folder
  './',
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match base component filenames
  /[A-Z]\w+Base\.vue$/,
);

const register = (app: App<Element>): void => {
  requireComponent.keys().forEach((fileName) => {
    // Get component config
    const componentConfig = requireComponent(fileName);
    // Get component name
    const componentName = fileName.split('/').pop()?.replace(/\.\w+$/, '') as string;

    app.component(componentName, componentConfig.default || componentConfig);
  });
};

export default {
  register,
};

Vue 2 구현에 대해 위에서 제공한 링크를 확인했다면 위의 Vue 3 구현과 거의 동일합니다. 내 구현의 차이점은 다음과 같습니다.

app 유형의 App<Element> 인수가 있습니다. App 유형은 vue 패키지에서 가져오고 Element 유형은 인터페이스에 가깝습니다. 자세한 내용을 참조하십시오here.

이 코드를 './' 에 배치했기 때문에 내 상대 경로는 ./components/base/index.ts 입니다.

내 정규식은 전역 구성 요소로 간주되도록 Base.vue로 끝나는 모든 파일을 가져옵니다. 나는 모든 전역 구성 요소를 base 디렉토리에 배치하는 것을 선호하지만 원하는 이름을 지정할 수 있습니다.

예. GlobalComponentBase.vue

최소한의 외부 패키지를 선호한다면 lodash 패키지를 사용하지 않았습니다.

다음은 main.ts 파일에서 구현한 방법입니다.

메인.ts

import { createApp } from 'vue';

import BaseComponents from './components/base';

const app = createApp(App);

BaseComponents.register(app);

app.mount('#app');

그게 다야! 수백 개의 전역 구성 요소를 등록해야 기본 파일이 부풀려지지 않습니다. 이 글이 많은 도움이 되기를 바랍니다. 😉

또한 위의 코드 구현에 대한 Github Gist를 만들었습니다.
https://gist.github.com/jirehnimes/2fcb31a2cbe7bb0c722a96f49e4cbf8f

건배!