【Ant Design Vue】Notification/Message没有反应、$notification/$message undefined 已解决

先上官方文档：Ant Design Vue Notification（通知提醒框）

光把官方文档里的代码粘贴过来是无法直接使用的，这里的处理方式和使用Ant Design Vue的普通组件也不一样，需要在Vue的原型链中增加notification属性，这样在其他组件中才可以通过$notification使用。

在main.js中修改Vue原型链：

import Vue from 'vue'
import App from './App'

//从Ant Design Vue导入notification，注意首字母小写
import { notification } from 'ant-design-vue'
//notification的全局配置方法
notification.config({
  duration: 2
});
//在Vue的原型链中增加notification属性
Vue.prototype.$notification = notification;

new Vue({
  render: h => h(App),
}).$mount('#app')

在其他组件中使用：

methods: {
  openNotificationWithIcon(type, title, content) {
    this.$notification[type]({
      message: title,
      description: content
    });
  }
}

this.openNotificationWithIcon('success', '登录成功', '正在跳转至首页')
this.openNotificationWithIcon('error', '登录失败', '用户名或密码错误')

当然，不是一定要在main.js中进行操作。个人习惯用一个js文件专门注册项目中需要使用的Ant Design Vue组件，所以就把这部分代码也放在那个文件里了，在main.js中引入就行。

另外，Ant Design Vue Message（全局提示）的使用方法和Notification很相似，也是要在Vue的原型链中增加message属性，然后通过$message使用，不再赘述。