다른 Vue 프로젝트 내에서 Vue 웹 컴포넌트(Vue-CLI 3에서 생성)를 사용하는 방법

다른 Vue 프로젝트 내에서 Vue 웹 컴포넌트(Vue-CLI 3에서 생성)를 사용하는 방법

Vue-CLI 3 build 명령으로 생성된 웹 구성 요소를 사용할 수 있습니다(vue-cli-service build --target wc --name foo ./src/App.vue)는 다음과 같은 웹 페이지에서 독립 실행형 구성 요소로 사용됩니다.

<script src="https://unpkg.com/vue"></script>
<script src="./foo.js"></script>

<foo></foo>

그러나 이 컴포넌트를 다른 Vue 프로젝트 내에 Import할 경우:

import Vue from 'vue'
import foo from 'foo'

다음 오류가 발생:

Uncaught ReferenceError: Vue is not defined

Vue CLI 3 매뉴얼에는 다음과 같이 기재되어 있습니다.

웹 구성 요소 모드에서는 Vue가 외부화됩니다.즉, 코드가 Vue를 Import해도 번들은 Vue를 번들하지 않습니다.번들은 Vue를 호스트 페이지에서 글로벌 변수로 사용할 수 있다고 가정합니다.

그러나 다른 프로젝트에서 웹 컴포넌트를 사용하는 경우 이 문제를 해결하는 방법은 나와 있지 않습니다.

당신은 알기라도 하나요?

사실 당신이 인용한 문장은 당신이 사용할 필요가 없다는 것을 의미한다.import Vue from 'vue'. Vue는 스크립트에 의해 추가되었기 때문에 글로벌 변수로 사용할 수 있습니다.<script src="https://unpkg.com/vue"></script>.

실제로 vue-cli에 의해 빌드된 다른 프로젝트에서 컴포넌트를 사용하려면 먼저 index.js(또는 다른 이름)가 있어야 합니다.이 파일에는 다음과 같이 컴포넌트를 내보냅니다.

export {default as Button} from './button/button'
export {default as ButtonGroup} from './button/button-group'
export {default as Cascader} from './cascader/cascader'

패키지에 있는 'flash'를 변경합니다.json 'vue-cli-service build --target wc --name foo ./src / index.directory'를 새 프로젝트의 node_directory에 복사한 후 사용할 수 있습니다(단, 권장하지 않습니다).'npm publish'를 사용하여 새 프로젝트에서 npm install을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/52178388/how-to-use-vue-web-components-generated-by-vue-cli-3-inside-another-vue-projec