如何直接在浏览器中使用VueJS插件？

Question

我将 VueJS 作为遗留系统中 JQuery 的替代品，但我在使用插件时遇到了问题，就像我使用 JQuery 一样。举个例子，"vuetable" 库表示可以使用脚本标签直接导入到 html 中，但我无法使其工作：

我导入脚本

<div id="app">
<vuetable
        api-url="/api/users"
        :fields="columns">
</vuetable>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/vue-table.js"></script>
<script src="js/app.js"></script>

然后，在我的文件 JS 中，我尝试操纵信息。

<script>
    new Vue({
        el: '#app',
        data: {
            columns: [
                'firstname',
                'lastname',
                'nickname',
                'birthdate',
                'group.name_en',
                'gender',
                'last_login',
            ]
        },
methods: {CODE}
    })
</script>

在内部，我通过 fetch() 获取信息，然后通过其 props 将其传递给组件。当我尝试 intonoces 时，通过其标签调用组件时出现错误，指出 vueetables 未定义：app.js Uncaught ReferenceError: Vuetable is not defined

Answer 1

我认为缺少的只是脚本顶部的几个 Vue.use() 语句。

另请注意，对于 Vue2，请使用 vuetable-2

console.clear()
Vue.use(VueResource)
Vue.use(Vuetable)

new Vue({
  el: '#app',
  data: {
    columns: ['name', 'email','birthdate','nickname','gender']
  },
  methods: {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
<script src="https://unpkg.com/vuetable-2@1.6.0"></script>

<div id="app">
<vuetable ref="vuetable"
  api-url="https://vuetable.ratiw.net/api/users"
  :fields="columns"
  pagination-path="">
</vuetable>
</div>

如何直接在浏览器中使用VueJS插件？

How to use VueJS plugins directly in the browser?

jquery

module

vue.js

vue-tables-2