Question

我正在尝试在Vue应用程序中集成Datatable插件（https://www.npmjs.com/package/vuejs-datatable），但在控制台中却出现错误。

Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (vuejs-datatable.js?b015:1)
    at Object.eval (vuejs-datatable.js?b015:1)
    at eval (vuejs-datatable.js:4)
    at Object../node_modules/vuejs-datatable/dist/vuejs-datatable.js (app.js:10170)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (selector.js?type=script&index=0!./src/views/tables/data-table.vue:2)
    at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/tables/data-table.vue (app.js:1438)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)

我的dataTable.vue文件：

<template lang="html">

  <section class="data-table">
   <datatable :columns="columns" :data="rows"></datatable>
  </section>

</template>

<script lang="js">
import Vue from 'vue'
import DatatableFactory from 'vuejs-datatable'
export default {
  name: 'DatatablePage'
}
Vue.use(DatatableFactory)
</script>

每当我在集成插件时尝试使用'Vue.use（PluginName）'时，都会收到类似的错误。我是VueJS的新手。我有什么需要做的吗？

Answer 1

您需要在初始化主Vue实例之前添加插件；参见using vue plugins here，其中说：

通过调用Vue.use（）全局方法来使用插件。 这必须是通过调用new Vue() 启动应用程序之前完成。

根据您的情况，移动

import Vue from 'vue'
Vue.use(DatatableFactory)

到您的main.js，看起来像这样：

import Vue from 'vue'
Vue.use(DatatableFactory)

// some other code

new Vue({
...
})

Answer 2

在weback.config.js中添加以下内容似乎可以解决问题：

module.exports = {
    resolve: {
        alias: {
            ...
            'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js',
            ...
        }
    },
}

基于此处的讨论：

https://github.com/pstephan1187/vue-datatable/issues/50

Answer 3

我在vue应用中遇到了同样的错误。

import Vue from 'vue';
import VueRouter from 'vue-router';
...some more imports here....

Vue.use(VueRouter);

...

错误为cannot read property 'use' of undefined。这意味着，在阅读Vue时遇到了问题。我检查了package.json和package-lock.json（是否已在本地安装）。一切似乎还好。我同时拥有Vue和Vue路由器。

删除node_modules和重新安装对我来说很有效。

Vuejs无法读取未定义错误的属性“使用”

3 个答案: