html - 使用 unpkg 在 html 中重用 Vue 组件

Question

通过 unpkg 重用一个 Vue 组件 (vue-json-pretty) 非常困难。我想我错过了一些基础知识，但自己无法对其进行排序。

我的 HTML：

<link rel="stylesheet" href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/fundamental-vue@latest/dist/FundamentalVue.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-json-pretty@1.7.0/lib/styles.css"/>
<script src="https://unpkg.com/vue-json-pretty@1.7.0/lib/vue-json-pretty.js"></script>

<div id="app">
  <div>
    <vue-json-pretty
      :path="'res'"
      :data="{ key: 'value' }"
      @click="handleClick">
    </vue-json-pretty>
  </div>
  <div>
    <fd-popover v-fd-margin:large placement="bottom-start" with-arrow>
      <h1 v-fd-margin:large>
         Hello Fundamental Vue 
      </h1>
      <template #control="{toggle}">
        <fd-button @click="toggle">Show Popover</fd-button>
      </template>
    </fd-popover>
  </div>
</div>

JS：

new Vue({ 
  el: '#app',
  data: {
    json: '{"count":3}'
  },
  methods: {
    handleClick: function() {
      console.log("clicked!")
    },
  },
})

错误信息：

“[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供 'name' 选项。（在 中找到）”

codepen中的代码

https://github.com/leezng/vue-json-pretty

对我的 codepen 示例的任何帮助将不胜感激:)

Answer 1

您需要将 vue-json-pretty 声明为组件。否则 Vue 不知道那个标签是什么。像这样在顶部声明它

Vue.component("vue-json-pretty", VueJsonPretty.default);
new Vue({
  el: '#app',
  data: {
    json: '{"count":4}'
  },
  methods: {
    handleClick: function() {
      console.log("clxicked!")
    },
  },
})