vue3-登录小案例（借助ElementPlus+axios）

1.创建一个vue3的项目。

npm create vue@latest

2.引入Elementplus组件库

链接：安装 | Element Plus

npm install element-plus --save

在main.js中引入

import ElementPlus from "element-plus";import "element-plus/dist/index.css";app.use(ElementPlus);

3.开始渲染页面

引入axios

链接：POST 请求 | Axios中文文档 | Axios中文网

引入步骤：

1.导入

import axios from "axios";

2.调用axios.post

const SubmitEvent = async () => {const { data } = await axios.post("https://v5.crmeb.net/api/login",{account: acc.value,password: pwd.value,},{headers: {"Content-Type": "application/json",},});

具体实现代码如下：

<template><div><div class="box"><br /><el-inputv-model="acc"style="width: 240px"placeholder="Please input"clearable/><br /><br /><el-inputv-model="pwd"style="width: 240px"type="password"placeholder="Please input password"show-password/><br /><br /><el-button @click="SubmitEvent" type="primary" style="width: 240px">login</el-button></div></div>
</template>

<style>
.box {width: 300px;height: 300px;background-color: antiquewhite;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
const acc = ref("");
const pwd = ref("");
const SubmitEvent = async () => {const { data } = await axios.post("https://v5.crmeb.net/api/login",{account: acc.value,password: pwd.value,},{headers: {"Content-Type": "application/json",},});if (data.status == 200) {ElMessage({message: "登录成功",type: "success",});// 保存到本地localStorage.setItem("token", data.data.token);// 跳转router.replace({name: "about",});} else {ElMessage.error("登录失败");acc.value = "";pwd.value = "";}
};
</script>

效果图：