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

【问题标题】：How to import Vue components from browser - via CDN如何从浏览器导入 Vue 组件 - 通过 CDN
【发布时间】：2020-02-28 02:31:16
【问题描述】：

我正在尝试使用 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 的完全分离。

任何提示为什么它不能按我想要的方式工作？你怎么看？

【问题讨论】：

你能发布实际的 Vue 标记/HTML 吗？

标签： javascript vue.js vuejs2 cdn

【解决方案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>

【讨论】：