前言
现在技术更新换代快，不学习，那就是等死，好几天没有写博客了，今天登录上来看了一下，发现一篇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的指令，跑起来，
点击进入就可以得到这个页面了
