22vue--登录退出-配置Message全局弹框组件

vue 登录退出-配置Message全局弹框组件

视频：

https://www.bilibili.com/video/BV1EE411B7SU?p=23

知识点：

• element-ui Message 消息提示

目的：

• 以友好的方式提示用户

修改点：

文件：Login.vue内            
				if(res.meta.status != 200) return this.$message.error('账号密码错误');
                // console.log("login success")
                this.$message.success('登录成功')

说明

整体导入element-ui的的情况

在main.js内全局导入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

在vue文件内使用
this.$message.error('错误信息提示')
this.$message.success('成功信息提示')

局部导入的情况

插件安装的形式，如视频内 在element.js内
import {
    Message } from 'element-ui'
Vue.prototype.$message = Message

在vue文件内的使用
this.$message.error('错误信息提示')
this.$message.success('成功信息提示')

整体代码 Login.vue

<template>
    <div class="login_container">
        <div class="login_box">
            <!--  -->
            <div class="avatar_box">
                <img src="../assets/login_head.png" alt="">
            </div>
            <!-- login table place -->
            <el-form ref