반응형
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
반응형
'source' 카테고리의 다른 글
laravel-vujs 프로젝트의 루트/베이스 URL을 설정하려면 어떻게 해야 합니까? (0) | 2022.08.19 |
---|---|
지점 예측 변수에 지점을 따를 가능성을 알려줄 수 있습니까? (0) | 2022.08.19 |
vue.filename: 와의 차이점vue.filename: 와의 차이점?? (0) | 2022.08.19 |
NuxtServerInit을 올바르게 호출하려면 어떻게 해야 합니까? (0) | 2022.08.19 |
gdb 디버거에 가장 까다롭고 유용한 명령어 (0) | 2022.08.19 |