登录按钮以及背景图设置

1. 安装element-plus和css插件

npm install element-plus --save
npm install sass --save
npm install sass-loader --save

2. 在main.js里引用
   

3. 寻找背景图存入assets文件下，并且在Login.vue里设置背景图和登录按钮
   

4. 设置的背景图的大小没有起作用，可能是style.css文件的影响，将其中的内容清空即可
   

设置登陆表单

主要在App.vue文件里写代码


效果图如下

调用后端的api，实现验证码

设置验证码表格的格式如下

实现效果如下

实现表格验证功能

1. 验证输入内容是否为空
   
   
   
   

遇到的问题

cookies保存用户名和密码后，再次登录时，密码直接显示，如下

在密码那个表格里定义类型为password即可

知识点

1. ref（）和reactive（）的区别
   参考链接：https://juejin.cn/post/7235118809605308471
2. const proxy = getcurrentinstance（）作用
   参考链接：https://juejin.cn/post/7292072087791173647
3. required: true 作用
   参考链接：https://blog.csdn.net/qq_45656036/article/details/119001999
4. vue3 清晰讲解视频
   参考链接：https://www.bilibili.com/video/BV1fe41157nG/?spm_id_from=333.788.recommend_more_video.5&vd_source=7afc1e6499af8adb1402b5a5609384cd

总结

完成了登陆页面，涉及的主要文件有login.vue，main.js，主要实现了登陆函数和记住我选项函数。
登陆函数功能：在登录的时候进行账户密码和验证码的验证功能。
记住我选项函数：利用token记住账户密码，并且在下次登陆的时候自动填充在表单上。