基于Vue3和Element Plus组件库实现一个完整的登录功能 |
您所在的位置：网站首页 › 192168161登录界面 › 基于Vue3和Element Plus组件库实现一个完整的登录功能 |
基于Vue3和Element Plus组件库实现一个完整的登录功能
|
先看一下最终要实现的效果: 登录页面: 
注册页面: 
(1)引入element-plus组件库 引入组件库的方式有好多种,在这里我就在main.js全局引入了. npm i element-plus -Smain.js中代码: import { createApp } from "vue"; //element-plus import ElementPlus from "element-plus"; import "element-plus/dist/index.css"; import App from "./App.vue"; import router from "./router"; import axios from "axios"; import store from "./store"; //创建实例 const app = createApp(App); //全局应用配置 app.config.globalProperties.$axios = axios; app.use(ElementPlus).use(store).use(router).mount("#app");引入之后自己可以用几个按钮测试一下是否引入成功. (2)登录及注册页面 html部分 views/account/Login.vue {{ item.label }} 用户名 密码 确认密码 验证码 {{ data.code_button_text }} {{ data.current_menu === "login" ? "登录" : "注册" }} import { reactive, ref, onBeforeUnmount, getCurrentInstance } from "vue"; import { useStore } from "vuex"; import { useRouter } from "vue-router"; // 校验类 import { validate_email, validate_password, validate_code, } from "../../utils/validate"; // sha1 import sha1 from "js-sha1"; // API import { GetCode } from "../../api/common"; import { Register } from "../../api/account"; // Login export default { name: "Login", components: {}, props: {}, setup() { // const instance = getCurrentInstance(); // 获取实例上下文 const { proxy } = getCurrentInstance(); // store const store = useStore(); // router const rotuer = useRouter(); // 用户名校验 const validate_name_rules = (rule, value, callback) => { let regEmail = validate_email(value); if (value === "") { callback(new Error("请输入邮箱")); } else if (!regEmail) { callback(new Error("邮箱格式不正确")); } else { callback(); } }; const validate_password_rules = (rule, value, callback) => { let regPassword = validate_password(value); // 获取“确认密码” // const passwordsValue = data.form.passwords; if (value === "") { callback(new Error("请输入密码")); } else if (!regPassword) { callback(new Error("请输入>=6并且=6并且=6并且=6并且 |
【本文地址】
今日新闻 |
推荐新闻 |