source

Vue CLI를 사용하여 여러 Vue.js 컴포넌트를 네이티브 웹 컴포넌트에 한 번에 빌드하려면 어떻게 해야 합니까?

factcode 2022. 8. 19. 20:45
반응형

Vue CLI를 사용하여 여러 Vue.js 컴포넌트를 네이티브 웹 컴포넌트에 한 번에 빌드하려면 어떻게 해야 합니까?

저는 Vue.js를 처음 사용하므로 이를 사용하여 웹 컴포넌트의 SDK를 만들고 싶습니다.다음과 같은 단일 웹 구성 요소를 만들 수 있습니다.

main.filename:

import Vue from 'vue';
import App from './App.vue';
import wrap from '@vue/web-component-wrapper';

const customElement = wrap(Vue, App);

window.customElements.define('sky-chat', customElement);

CLI 명령:

vue build --target wc --name sky-chat ./src/main.js

단, 이것은 1개의 컴포넌트만을 위한 것입니다.웹 컴포넌트를 다른 js 파일로 한 번에 분리하기 위해 .vue 파일 묶음을 빌드하려면 어떻게 해야 합니까?

빌드 후 dist 폴더에 테스트하기 위해 내부에 모든 컴포넌트를 포함하는 테스트 html을 어떻게 자동으로 생성합니까?

고마워요.

버전 4.3.0에서는 콤마로 구분된 글로벌 패턴을 사용하여 여러 웹 컴포넌트를 구축할 수 있도록 지원이 추가되었습니다.

예:

vue-cli-service build --target wc --name myprefix src/components/core*.vue,src/components/basic*.vue

vue-cli-service build --target wc --name myprefix src/components/myFirst.vue,src/components/mySecond.vue

이렇게 하면 지정된 각 진입점에 대해 개별 웹 구성 요소가 생성되고 단일 웹 구성 요소가 생성됩니다.demo.html모든 컴포넌트가 포함되어 있습니다.단, 별도 지원은 없는 것 같습니다..js파일 수(Web 컴포넌트당)입니다.웹 컴포넌트는 단일 파일로 번들됩니다.

vue 플러그인을 생성하여 vue 파일을 함께 번들할 수 있습니다.

// plugin.js

// your components
import Component1 from '/src/components/Component1.vue'
import Component2 from '/src/components/Component2.vue'
import Component3 from '/src/components/Component3.vue'

// This exports the plugin object.
export default {
  install (Vue, options) {
     // Add a component or directive to your plugin, so it will be installed globally to your project.
     Vue.component('component1', Component1)
     Vue.component('component2', Component2)
     Vue.component('component3', Component3)
  }
}


// your main vue file:

import myPlugin from './plugin.js'
Vue.use(myPlugin);

new Vue({
//...
})

이제 각 파일에 가져올 필요 없이 플러그인에 포함된 모든 구성 요소를 원하는 위치에서 사용할 수 있습니다.

제가 당신의 질문을 제대로 이해했나요?

언급URL : https://stackoverflow.com/questions/61038281/how-can-i-build-multiple-vue-js-components-to-native-web-components-using-vue-cl

반응형