springboot+vue(从零开始)二：vue登录页（一）

springboot &＃43;vue (从零开始)-----二&＃xff1a;vue登录页&＃xff08;一&＃xff09;

前端页面是用的 是 elementui

elementui 官网&＃xff1a;https://element.eleme.cn/#/zh-CN/component/installation

将前端样式组件引入 执行

npm i element-ui -S

还需要引入

创建登录页

红框的2个页面 是创建页面时候生成的&＃xff0c;没有实际意义&＃xff0c;以后我会删除。新建的登录页已经创建完成

将login 页面引入到 router/index.js中

现在整体代码如图:

效果&＃xff1a;

加入样式

&＃96;&＃96;

.loginContainer{border-radius: 15px;background-clip: padding-box;margin: 180px auto;width: 350px;padding: 35px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{margin: 0px auto 40px auto;text-align: center;
}
.loginRemember{text-align: left;margin: 0px 0px 15px 0px;
}


效果&＃xff1a;

Login.vue页面代码如下

<template><div><el-form:rules&＃61;"rules":model&＃61;"loginForm"class&＃61;"loginContainer"ref&＃61;"loginForm"><h3 class&＃61;"loginTitle">系统登陆h3><el-form-item prop&＃61;"username"><el-input type&＃61;"text" v-model&＃61;"loginForm.username" auto-complete&＃61;"off" placeholder&＃61;"请输入用户名"/>el-form-item><el-form-item prop&＃61;"password"><el-input type&＃61;"text" v-model&＃61;"loginForm.password" auto-complete&＃61;"off" placeholder&＃61;"请输入密码" />el-form-item><el-checkbox class&＃61;"loginRemember" v-model&＃61;"checked">记住密码el-checkbox><el-button type&＃61;"primary" style&＃61;"width: 100%" >登录el-button>el-form>div>
template><script>export default {name: "Login",data() {return {loginForm:{username: "admin",password: "123456",},checked:true,rules:{username:[{required:true,message:"请输入用户名",trigger:"blur"}],password:[{required:true,message:"请输入密码",trigger:"blur"}]}};}}
script><style scoped>.loginContainer{border-radius: 15px;background-clip: padding-box;margin: 180px auto;width: 350px;padding: 35px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}.loginTitle{margin: 0px auto 40px auto;text-align: center;}.loginRemember{text-align: left;margin: 0px 0px 15px 0px;}
style>


今天就写这些。前期建议大家手撸下代码&＃xff0c;你会发现很多问题。差不多的时候&＃xff0c;我会告诉大家代码库地址。不过现在还得委屈下大家。