vue实现登陆页面（详细介绍从零开始打造vue的登录页面（2022.7））

时间2025-06-27 05:39:42分类IT科技浏览4926

导读：前言现在技术更新换代快，不学习，那就是等死，好几天没有写博客了，今天登录上来看了一下，发现一篇html练手项目已经被面目全非了，太难受了因为奥运会版权问题，哎不过大致思路还在那里，还是具有一定学习价值的，没办法了，总得敲点文章，用来取代所以我又要开始来水文章了，偶吼吼。...

前言

现在技术更新换代快，不学习，那就是等死，好几天没有写博客了，今天登录上来看了一下，发现一篇html练手项目已经被面目全非了，太难受了因为奥运会版权问题，哎不过大致思路还在那里，还是具有一定学习价值的，没办法了，总得敲点文章，用来取代所以我又要开始来水文章了，偶吼吼。

言归正传，今天的目的是来介绍用vue脚手架搭的保姆级教程，紧跟当下哦，好先来展示下效果，喜欢的往下看，

这就是一个简单的登录页面设计，如果点赞或阅读量多的话，我考虑下一步链接后端，实现一个简单的登录系统，偶吼吼，下面开始从vue项目搭建开始仔细描述。

我要提一嘴首先要有idea哦，我用的是idea编辑的，有idea你应该更好地理解我的思路，有点啰嗦，废话不多说我现在开始讲述。

一、创建vue项目

我之前有一篇讲述vue项目，可以参考下（创建vue项目）

我这里重新讲述下吧

但是可能会有点简略，首先下载node.js,我的因为各种原因用了

14.19.3（这个和16也是稳定版，而且这个降低npm,不会出现啥啥不兼容的事）

有了这个一切可以说，没这个，那就不用往下看了，再去多搜一下搞定下载node.js

然后win+r ，输入cmd ，调出控制面板，然后打开自己项目所在盘

像我的话就是打开d盘的work web项目，然后输入 vue create xxx

创建xxx项目，接下来详细展示

可以看到我用的框架是vue CLI5.0.7 ，最新版是5.08 ，有需要可以用底下提示的指令，

这是题外话，底下的话不要选择默认设置，选择最底下的自定义配置，

你进去可以看到，已经有两个选项默认打星号，你要选择一个router路由配置

底下选择2.x,因为2.x比较稳定，不会出现各种离谱的错误，

底下选择no,然后再下面选择最后一个，当然standard标准配置也可以，可以看你自己的想法是啥，

这个选择第一个，

这个选择使用标准的config文件

底下选择n就行

这样项目就开始建造了第一次可能会有点慢，不要心急慢慢等，如果真的不动了，那你就删了重新开始，需要等一会儿，因为确实会出现不动的情况，所以千万不要心急。

出现这个代表已经可以了，如果你真的不放心，可以敲一下命令，可以打开8080端口的网页就代表你这个vue项目创立完成了。

二、开始打造页面

总所周知工欲善其事必先利其器，你先要往包里加一下依赖

可以看到比原来的项目基础之上，多了axios（这个为了跨域发送请求，但是并不做大多要求，为后面做铺垫），然后多了element-ui这个为了偷懒，还有less和less-loader ，版本号在后面，自己可以观察 "axios": "^0.27.2", "element-ui": "^2.15.9", "less-loader": "^11.0.0", "less": "^4.1.3"

所以打开package.json把你需要的依赖写入dependencies中

package.json在倒数第四个，然后使用npm install,更新把所有的依赖下载完毕。

接下来打开main.js

然后重新配置，引入全局配置等等，有一点要注意的是axios实际上没用，为后续前后端分离做准备 import Vue from "vue"; import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; import App from "./App.vue"; import router from "./router"; //导入全局样式表 import "./assets/css/global.css"; Vue.use(ElementUI); Vue.config.productionTip = false; new Vue({ router, // store, render: (h) => h(App), }).$mount("#app");

代码如上在main.js中填写的代码

然后APP.vue中的东西可以删到像我一样，那些都是没用的删掉，

这之后再把views文件夹下的两个视图删掉这也没啥用，当然还有components组件文件夹下的文件删除这个helloworld也没用

在vue.config.js文件下加入这行代码，避免检查驼峰法则

下面在assets文件下创建css文件然后再在里面创建global全局css，在里面输入以下代码

然后再在assets文件夹下挂上两张图片

在components组件文件夹下创建login.vue,代码如下 <template> <div class="login_container"> <div class="login_box"> <div class="wai">  <div class="avatar_box"> <img src="../assets/logo.jpg" alt="" /> </div>  <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form" >  <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon="el-icon-user" ></el-input> </el-form-item>  <el-form-item prop="password"> <el-input v-model="loginForm.password" prefix-icon="el-icon-key" type="password" ></el-input> </el-form-item>  <el-form-item class="btns"> <el-button type="primary" @click="Login">登录</el-button> <el-button type="info" @click="resetLoginForm">重置</el-button> </el-form-item> </el-form> </div> </div> </div> <style lang="less" scoped> .login_container { background-color: darkcyan; height: 100%; } .login_box { width: 350px; height: 300px; background-color: white; border-radius: 15px; /*容器内居中*/ position: absolute; left: 40%; top: 50%; transform: translate(-50%, -50%); .avatar_box { height: 130px; width: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; /*边框阴影*/ box-shadow: 0 0 10px #ddd; position: absolute; left: 50%; transform: translate(-50%, -50%); background-color: #fff; img { width: 100%; height: 100%; border-radius: 50%; background-color: #993d3d; } } .login_form { position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; } .btns { display: flex; justify-content: flex-end; } .wai { background-image: url("../assets/back.jpg"); width: 577px; height: 300px; border-radius: 15px; } } </style> <script> export default { data() { return { // 数据绑定对象 loginForm: { username: "hlllll", password: "123", }, // 验证规则对象 loginFormRules: { //验证用户 username: [ { required: true, message: "请输入用户名", trigger: "blur" }, { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur", }, ], password: [ { required: true, message: "请输入登录密码", trigger: "blur" }, { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur", }, ], }, }; }, methods: { Login() { // 预验证 this.$refs.loginFormRef.validate(async (valid) => { //未验证通过则直接return if (!valid) return; //不加await的化不会打印出数据，await只能用于async修饰的函数 const response = await this.$http .post("pro/login", this.loginForm) .catch(() => this.$message.error("登录失败,请联系Tel:")); // {data:res}解构，将得到的返回值的data解构为res console.log(response.data); // console.log(res.meta.statusText) //从res的元数据中得到返回状态 if (response.status !== 200) return; if (response.data.token) return this.$message.success("登录成功"); if (response.data.error) return this.$message.error(response.data.error); }); }, //重置登录表单 resetLoginForm() { // console.log(this) // ui框架自带的form表单方法 this.$refs.loginFormRef.resetFields(); }, }, }; </script>

script是为了前后端分离以及重置等做准备，可以考虑不写

总结

最后的最后，使用npm run serve的指令，跑起来，

点击进入就可以得到这个页面了

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

vue实现登陆页面（详细介绍从零开始打造vue的登录页面（2022.7））

前言

一            、创建vue项目

二                    、开始打造页面

总结

一、创建vue项目

二、开始打造页面