브라우저에서 Vue 컴포넌트를 Import하는 방법 - CDN 경유

브라우저에서 Vue 컴포넌트를 Import하는 방법 - CDN 경유

UNPKG를 CDN으로 하여 Vue.js 컴포넌트(@chenfengyuan/vue-qrcode)를 Import하려고 합니다.

현재 설정은 다음과 같습니다.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://unpkg.com/@chenfengyuan/vue-qrcode@1.0.1/dist/vue-qrcode.min.js"></script>
<script>Vue.component(VueQrcode.name, VueQrcode);</script>

<script type="module" src="/client.js"></script>

인마이client.js파일 Vue 인스턴스가 있습니다.

new Vue({
  el: "#app",
  data: {
    msg: "Vue js Hello World - Your First Vue.js App"
  }
});

제가 실현하고 싶은 설정은 다음과 같습니다.

<script type="module" src="/client.js"></script>

그러면 나의client.js다음과 같이 됩니다.

import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'

import VueQrcode from 'https://unpkg.com/@chenfengyuan/vue-qrcode@1.0.1/dist/vue-qrcode.min.js'

Vue.component(VueQrcode.name, VueQrcode);
new Vue({
  el: "#app",
  data: {
    msg: "Vue js Hello World - Your First Vue.js App"
  }
});

Vue 템플릿(HTML로 신뢰됨)은 다음과 같습니다.

<div id="app">
      <h1>{{ msg }}</h1>
      <qrcode value="https://queue-r.glitch.me" :options="{ width: 200 }"></qrcode>
</div>

하지만 안타깝게도 이 접근법은 효과가 없습니다.콘솔에 표시되는 것은 커스텀태그가 인식되지 않는다는 것뿐입니다.이 방법으로 HTML에서 Vue 코드를 완전히 분리할 수 있습니다.

왜 내 뜻대로 안 되는지 힌트라도 있어?당신은 어떻게 생각하나요?

투고하신 예는 정상적으로 동작하고 있습니다.실행 예는 다음과 같습니다.

new Vue({
  el: "#app",
  data: {
    msg: "Vue js Hello World - Your First Vue.js App"
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/@chenfengyuan/vue-qrcode@1.0.1/dist/vue-qrcode.min.js"></script>
<script>Vue.component(VueQrcode.name, VueQrcode);</script>

<div id="app">
      <h1>{{ msg }}</h1>
      <qrcode value="https://queue-r.glitch.me" :options="{ width: 200 }"></qrcode>
</div>

언급URL : https://stackoverflow.com/questions/58665229/how-to-import-vue-components-from-browser-via-cdn