如何从浏览器导入 Vue 组件 - 通过 CDN

Question

我正在尝试使用 UNPKG 作为 CDN导入 Vue.js 组件（@chenfengyuan/vue-qrcode）。

目前，我的设置是这样工作的：

<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>

但遗憾的是，这种方法行不通。我在控制台中看到的只是无法识别自定义标签。通过这种方法，我想实现我的 Vue 代码与 HTML 的完全分离。

任何提示为什么它不能像我想要的那样工作？你怎么认为？

Answer 1

您发布的示例工作正常，这是一个工作示例。

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>