Question

我在遗留系统中包含VueJS作为JQuery的替代品，但是我遇到了能够使用插件的问题，就像我使用JQuery一样。举个例子，＆＃34; vuetable＆＃34;库表明它可以使用脚本标签直接导入到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()获取信息，然后通过其道具将其传递给组件。当我尝试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插件？

1 个答案: