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>

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

1 个答案: