Vue 3에서 Vue 글로벌 구성 요소 등록 구성

Vue 3에서 Vue 글로벌 구성 요소 등록 구성

Vue 2에서는 main.js 파일을 부풀리지 않고 index.js에서 다음 코드를 사용하여 여러 파일에 구성 요소를 전체적으로 등록할 수 있다.

import Vue from 'vue'
import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

그리고 main.js 파일 사용에서

import '@/components'

---

하지만 이 방법은 Vue 3에서는 나에게 효과가 없는 것 같다.

main.js.

import { createApp } from 'vue';
import '@/components'

const app = createApp({});

app.mount("#app");

인덱스 js

import Vue from 'vue' // doesn't work with import { createApp } from 'vue' too
import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

Vue 3에서 어떻게 같은 결과를 얻을 수 있는가?

나는 같은 문제에 비틀거리고 있었다.구성 요소를 여전히 외부 파일에 저장하기 위해registerComponents.ts인수가 vue 앱을 수신할 때 구성 요소를 추가해야 하는 구성 요소 로더 함수로서.

그래서 내 경우에는 파일을 가지고 있다.registerComponents.ts이렇게 생겼는데

import { App } from "vue";

// import components
import button from '@/components/Button.vue';

// register components
export const registerComponents = (app: App): void => {
    app.component('tw-button', button);
}

그리고 나의main.ts장착하기 전에 다음 기능을 사용하십시오.

const app = createApp(App)
    .use(store)
    .use(router)
    .use(i18n);

registerComponents(app);

app.mount("#app");

어쩌면 이것이 누군가에게 도움이 될지도 모른다 :-)

Vue 3에는 글로벌 등록이 없다. 모든 것이 특정 앱으로 한정된다.

따라서 가장 가까운 방법은 다음과 같다.

const app = createApp({});

app.component('my-component-name', MyComponent)

app.mount("#app");

당신은 당신의 두 파일 사이에 관련 비트를 전달하기 위한 최선의 방법을 결정해야 할 것이다.예를 들어, 당신은 다음과 같이 말할 수 있다.index.js플러그 인

RFC: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md

Vue 3에서는 여러 애플리케이션 인스턴스를 사용할 수 있음

const app1 = createApp({})
app1.mount('#container-1')

const app2 = createApp({})
app2.mount('#container-2')

같은 페이지에 공존할 수 있다는 겁니다그래서 우리는 더 이상 사용할 수 없다.Vue로부터import Vue from 'vue'플러그인을 등록하다/사용하다

---

마이솔루션

Stackblitz에서 구현 라이브 보기

1단계: 플러그인/패키지/종속성을 유지할 폴더 생성

나는 그것을 불렀다.plugins그들이 플러그를 꽂을 것이기 때문에.main.js.

2단계: 작성main-app.js

라고도 부를 수 있다.app1.js네가 원하는 게 뭐든간에내용은 다음과 같다.

import { createApp } from 'vue'
import App from '../App.vue'

export const app = createApp(App)

3단계: 플러그를 꽂으십시오.main.js

import { app } from './plugins/main-app'

app.mount('#app')

4단계: 새 플러그인 생성

자, 이제src/plugins/global-components.js

import { app } from './main-app'
import MyComponent from '@/components/MyComponent'

app.component('my-component-name', MyComponent)

에 등록하십시오.main.js:

import { app } from './plugins/main-app'
import './plugins/global-components'

app.mount('#app')

한 걸음 더 나아가서 한 걸음 더 나아가서 한 걸음 더 나아가서 한 걸음 더 나아가index.js에src/plugins그것이 될 곳main.js그리고 나서.main.js당신은 단지 가지고 있다import './plugins'하지만 개인적으로 나는 이 추가 단계가 마음에 들지 않는다.

참조URL: https://stackoverflow.com/questions/63261636/organize-registering-vue-global-components-in-vue-3