纯 html 文件引入vue、axios、elementui纯 html 文件引入vue、axios、elementui

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>报销详情</title>
    <!--cdn引入ElementUI组件必须先引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <!-- 引入element-ui -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 样式 -->
    <style>
      .inputClass {
        width: 300px;
        margin-bottom: 30px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <el-row>
        <el-button type="primary" @click="mainButton">主要按钮</el-button>
      </el-row>

      <input type="text" v-model="name" placeholder="请输入用户名"></br>
      <input type="text" v-model="realname" placeholder="请输入真实姓名"></br>

      <button @click="testGet">登录</button></br>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            name: "",
            realname: "",
            token: ""
          };
        },
        computed: {},
        created() {},
        methods: {
          mainButton() {
            this.$message.success("这是一条消息提示");
          },
          testGet() {
            axios
              .get("http://localhost:5001/api/test/getlogin", {
                params: {
                  name: this.name,
                  realname: this.realname
                }
              })
              .then(response => {
                console.log(response);
                this.token = response.data.access_token;
                console.log(this.token);
                this.$message.success("登录成功，token成功获取");
              })
              .catch(function(error) {
                // 请求失败处理
                console.log(error);
              });
          }
        }
      });
    </script>
  </body>
</html>