一、登录Login.vue
在views文件夹内新建Login.vue。新建完成后首先在<template></template>里添加<div> </div>。因为：
Vue 2（严格必须）：Vue 2 的模板要求必须只有一个根元素。如果你不包这个
，直接写两个并排的标签，浏览器会直接报错 Component template should contain exactly one root element。所以那时必须用或其他标签包起来。
新建页面后，首先保证这个页面是可以被访问的，so新建完页面后首先去router文件夹下的index.js文件里写一个新的路由:
constroutes=[{path:'/login',name:'Login',component:()=>import('../views/Login.vue')}]
盒子(div)布局+盒子+flek布局搞定
可以看到图片那侧角是直角，原因是图片把圆角border-radius: 5px遮盖了，解决方法为：添加
overflow: hidde
表单贴边怎么办？1.设置垂直居中（flex布局）在最外面的div盒子模型中添加display: flex;align-items: center，即<div style="flex: 1; display: flex;align-items: center">。
怎么让表单左右距离相等？组件水平方向居中：justify-content: center
!验证码怎么弄
有一个开源的库，代码在二、验证ValidCode.vue这一节
<template><divstyle="height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#41a1ff"><divstyle="display:flex;height:60vh;width:60%;background-color:white;border-radius:5px;overflow:hidden"><divstyle="flex:1"><imgsrc="@/assets/img/login.png"alt=""style="width:96%"></div><divstyle="flex:1;display:flex;align-items:center;justify-content:center"><el-form:model="user"style="width:80%"><divstyle="font-size:25px;font-weight:bold;text-align:center;margin-bottom:20px">欢迎登录后台管理系统</div><el-form-itemprop="username"><el-inputprefix-icon="el-icon-user"size="large"placeholder="请输入账号"v-model="user.username"></el-input></el-form-item><el-form-itemprop="password"><el-inputprefix-icon="el-icon-lock"size="large"show-passwordplaceholder="请输入密码"v-model="user.password"></el-input></el-form-item><el-form-itemprop="validCode"><divstyle="display:flex"><el-inputprefix-icon="el-icon-"size="large"style="flex:1"v-model="user.code"></el-input><divstyle="flex:1;justify-content:center;height:40px;width:40px;"><valid-code@update:value="getCode"/><!--验证码--></div></div></el-form-item><el-form-item><el-buttontype="primary"style="width:100%"size="large"@click="login">登 录</el-button></el-form-item><divstyle="display:flex"><divstyle="flex:1">还没有账号？请<spanstyle="color:blue;cursor:pointer">注册</span></div><divstyle="flex:1;text-align:right;cursor:pointer;color:blue">忘记密码</div></div></el-form></div></div></div></template><script>importValidCodefrom"@/components/ValidCode";//验证码exportdefault{name:"Login",components:{ValidCode//验证码},data(){return{code:'',// 验证码组件传递过来的codeuser:{code:'',// 表单里用户输入的code验证码username:'',password:''}}},created(){},methods:{getCode(code){console.log(code)this.code=code// login页面的code值=validCode页面传过来的值 ,this表示return里的内容},login(){}}}</script><stylescoped></style>到以上代码这一步，下一步写后端连接数据库
二、验证ValidCode.vue
在src文件夹下新建一个文件夹components，再新建一个ValidCode.vue 文件，文件内容为：
<template><divclass="ValidCode disabled-select"style="width:100%;height:100%"@click="refreshCode"><spanv-for="(item,index) in codeList":key="index":style="getStyle(item)">{{item.code}}</span><!-- 注意in不能贴着括号--></div></template><script>exportdefault{name:"validCode",data(){return{length:4,codeList:[]}},mounted(){this.createCode()},methods:{refreshCode(){this.createCode()},createCode(){letlen=this.length,codeList=[],chars='ABCDEFGHIJKLMNOPQRSTWXYZabcdefghijklmnopqrstwxyz0123456789',charslen=chars.length//生成for(leti=0;i<len;i++){letrgb=[Math.round(Math.random()*220),Math.round(Math.random()*240),Math.round((Math.random())*200)]codeList.push({code:chars.charAt(Math.floor(Math.random()*charslen)),color:`rgb(${rgb})`,padding:`${[Math.floor(Math.random()*10)]}px`,transform:`rotate(${Math.floor(Math.random()*90)-Math.floor(Math.random()*90)}deg)`})}//指向this.codeList=codeList//将当前数据派发出去this.$emit('update:calue',codeList.map(item=>item.code).join(''))},getStyle(data){return`color:${data.color}; font-size:${data.fontSize}; padding:${data.padding}; transform:${data.transform}`}}}</script><style>.ValiCode{display:flex;justify-content:center;align-items:center;cursor:pointer;}.Valicode span{display:inline-block;font-size:18px;}</style>
