用unpkg在html中重用Vue组件

Question

很难通过unpkg重用Vue组件(vue-json-漂亮)。我想我错过了一些基本的东西，但我自己也没办法把它分类。

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

联署材料：

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

错误信息：

"Vue警告:未知的自定义元素：-正确注册组件吗?对于递归组件，请确保提供'name‘选项。“

代码中的代码

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

如果能帮助我的代码示例工作，我们将不胜感激:)

Answer 1

你需要宣布vue-json-漂亮为组件。否则，Vue不知道那个标签是什么。像这样宣布它在顶部

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