使用 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 warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the 'name' option. (found in )"

code in codepen

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

任何对我的代码笔示例工作的帮助将不胜感激:)

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!")
    },
  },
})

使用 unpkg 在 html 中重用 Vue 组件

Reuse Vue component in html with unpkg

html

vue.js

vue-component

unpkg