ElementUI

1.安装ElementUI

控制台输入

npm i element-ui -S

2.在main.js文件中加入

//导入elementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

导入elementUI

3. 登陆组块模板

<template>
	<div class="login_container">
		<!-- 登录盒子-->
		<div class="login_box">
			<!-- 头像盒子-->
			<div class="img_box">
				<img src="./assets/logo.png" />
			</div>
			<!-- 登录表单 -->
			<div>
				<el-form ref="form" label-width="80px"style = "margin-top: 100px; padding: 20px;">
					<el-form-item label="账号">
						<el-input v-model="account"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="password"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="login()" style="margin-left: 50px;">登录</el-button>
						<el-button type="primary" @click="onSubmit" style="margin-right: 50px;">注册</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
 
<script>
	/* 导出组件,并为组件定义数据,函数,生命周期函数 */
	export default {
		data() {
			return {
				account: "",
				password: ""
			}
		},
		methods: {
			login() {
				//前端检验账号和密码
				if (this.account.length == 0) {
					this.$message({
						message: '账号不能为空',
						type: 'warning',
					})
					return;
				}
					if (this.password.length == 0) {
						this.$message({
							message: '密码不能为空',
							type: 'warning',
						})
						return;
					}
 
					//与后端交互
 
					//后端相应一个结果
					this.$router.push("/main")
				}
			}
		}
</script>
 
<style>
	.login_container {
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
		margin: 0px;
		padding: 0px;
		background-image: url(assets/bg.jpg);
	}
 
	.login_box {
		width: 450px;
		height: 350px;
		background-color: #fff;
		border-radius: 10px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.95;
	}
 
	.img_box {
		width: 130px;
		height: 130px;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 50%;
		padding: 5px;
		border: 1px solid #eee;
	}
 
	.img_box img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #eee;
	}
</style>