Javascript 元素UI$confirm不是一个函数

我在v-on处理程序中遇到了

错误：“TypeError:this.$confirm在调用元素UI的
this.$confirm
时不是函数：

也许我没有导入我应该导入的东西（文档和示例表明不需要额外导入）

我正在尝试使用Element UI构建一个Vue应用程序。它有一个表，每行都有一个删除按钮。单击处理程序调用
this.$confirm
为用户显示确认对话框。从元素文档中我不太清楚，但似乎Element使用
$confirm
将Vue组件扩展到了框外

模板：

我正在像这样引导Vue：

import Vue from 'vue/dist/vue.js';

import {
  ElementUI, // Element is undefined when imported 
  Table, 
  TableColumn,
  Form,
  FormItem,
  Input,
  Button,
  DatePicker,
  Row,
  Col,
  Select,
  Option,
  Pagination
} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(require('vue-moment'));
Vue.use(ElementUI);

Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)
Vue.component(Form.name, Form)
Vue.component(FormItem.name, FormItem)
Vue.component(Input.name, Input)
Vue.component(Button.name, Button)
Vue.component(DatePicker.name, DatePicker);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
Vue.component(Select.name, Select);
Vue.component(Option.name, Option);
Vue.component(Pagination.name, Pagination);

import * as NewItem from './components/new-item/new-item.vue';
import * as NamesList from './components/names-list/names-list.vue';
import * as NamesFilter from './components/names-filter/names-filter.vue';
import * as FilterableList from './components/filterable-list/filterable-list.vue';

import ElementUI from 'element-ui'
Vue.use(ElementUI)

（出现故障的处理程序位于
名称列表中
组件…）

如果我导入ElementUI，我会得到这个
类型错误：无法读取未定义的属性“install”

您的代码错误地将ElementUI作为命名导入导入。
元素ui
包没有
ElementUI
的命名导出，因此它将是
未定义的
。默认导入是您将在那里使用的（但这不是您实际需要的）：

由于要单独导入元素（以节省捆绑包大小），因此应该避免像这样全局导入ElementUI，因为这样会降低捆绑包大小的节省

从元素文档中我不太清楚，但似乎元素用$confirm开箱即用扩展了Vue组件

全局
$confirm
方法仅在完全导入以下元素时可用的状态：

import Vue from 'vue/dist/vue.js';

import {
  ElementUI, // Element is undefined when imported 
  Table, 
  TableColumn,
  Form,
  FormItem,
  Input,
  Button,
  DatePicker,
  Row,
  Col,
  Select,
  Option,
  Pagination
} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(require('vue-moment'));
Vue.use(ElementUI);

Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)
Vue.component(Form.name, Form)
Vue.component(FormItem.name, FormItem)
Vue.component(Input.name, Input)
Vue.component(Button.name, Button)
Vue.component(DatePicker.name, DatePicker);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
Vue.component(Select.name, Select);
Vue.component(Option.name, Option);
Vue.component(Pagination.name, Pagination);

import * as NewItem from './components/new-item/new-item.vue';
import * as NamesList from './components/names-list/names-list.vue';
import * as NamesFilter from './components/names-filter/names-filter.vue';
import * as FilterableList from './components/filterable-list/filterable-list.vue';

import ElementUI from 'element-ui'
Vue.use(ElementUI)

如果要单独导入元素，则应在组件中本地导入
confirm
方法。也就是说，为其
confirm
方法导入
MessageBox
：

// MyComponent.vue
import { MessageBox } from 'element-ui'

export default {
  methods: {
    handleDelete(row) {
      MessageBox.confirm(`Do you really want to delete ${row.name} ?`,
        "Confirmation",
        {
          confirmButtonText: "OK",
          cancelButtonText: "Cancel",
          type: "warning"
        })
    }
  }
}

你看到了吗？@SajibKhan可能是因为我有一个不同版本的Vue/Element，在我的例子中，
Element
是未定义的，如果我导入ElementUI，我会得到这个
类型错误：无法读取未定义的属性“install”
import ElementUI from 'element-ui'
Vue.use(ElementUI)

// MyComponent.vue
import { MessageBox } from 'element-ui'

export default {
  methods: {
    handleDelete(row) {
      MessageBox.confirm(`Do you really want to delete ${row.name} ?`,
        "Confirmation",
        {
          confirmButtonText: "OK",
          cancelButtonText: "Cancel",
          type: "warning"
        })
    }
  }
}