文章目录

• 前言
• 一、创建vue项目
• 二、开始打造页面
• 总结

前言

现在技术更新换代快，不学习，那就是等死，好几天没有写博客了，今天登录上来看了一下，发现一篇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-formref="loginFormRef":model="loginForm":rules="loginFormRules"label-width="0px"class="login_form"><!--用户名--><el-form-item prop="username"><el-inputv-model="loginForm.username"prefix-icon="el-icon-user"></el-input></el-form-item><!--密码--><el-form-item prop="password"><el-inputv-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) => {//未验证通过则直接returnif (!valid) return;//不加await的化不会打印出数据，await只能用于async修饰的函数const response = await this.$http.post("pro/login", this.loginForm).catch(() => this.$message.error("登录失败,请联系Tel:"));// {data:res}解构，将得到的返回值的data解构为resconsole.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的指令，跑起来，
点击进入就可以得到这个页面了