---

一、导入Element

1、npm 安装

推荐使用 npm 的方式安装

npm i element-ui -S

2、引入 Element

在 main.js 中写入以下内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

3、实现代码

Element 注册了一个$message方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

      <!-- type="primary"设置按钮背景颜色为绿色 
      :plain="true"窗体主体部分背景颜色透明
      -->
      <el-button type="primary" :plain="true" @click="login">登录</el-button>

<script>
import request from "@/axios/baseURL";

// 接口数据初始化
const FORM_DATA = {
  userName: "",
  password: "",
};
export default {
  data() {
    return {
      FORM_DATA,
    };
  },
  created() {
    console.log("登录界面");
  },
  methods: {
    login() {
      request.post("/systemUser/login", this.FORM_DATA).then((res) => {
        var code = res.data.code;
        var message = res.data.message;
        if (code == 0) {
          this.$message(message);
        } else {
          this.$message(message);
        }
        console.log(res);
      });
    },
  },
};
</script>

4、效果

• 梦想是前行的方向，努力是脚下的力量。
• 勇敢直面挑战，奋力前行，必将突破困境。
• 人生没有终点，只有不断超越的起点。
• 经历风雨才能见彩虹，踏过荆棘才能达果实。
• 无论前方多艰辛，心怀希望便是光明的开始。