您现在的位置是：首页 > 前端学习 > VueVue

项目初始化(图文)

第十三双眼睛2022-04-29【Vue】人已围观

简介项目初始化

安装element-ui
执行下面的命令 npm i element-ui -S 进行安装
并进行引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

封装一个请求工具
先运行命令npm install axios 安装axios
创建一个js文件 request.js

创建一个用户登录页面Login.vue

<template>
<div class="login-container">
<div class="login-header">
<span>我爱学英语</span>
</div>
<el-form class="login-form" ref="login-form" :model="userLogin" :rules="loginRules">
<el-form-item prop="userName">
<el-input v-model="userLogin.userName" placeholder="账号" ></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="userLogin.password" type="password" placeholder="密码" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login" class="login-btn" :loading="loading" >登录</el-button>
</el-form-item>
</el-form>
<div class="login-footer"></div>
</div>
</template>

<script>
export default ({
name: 'Login',
data () {
return {
userLogin: {
userName: 'admin',
password: '888888'
},
loading: false,
loginRules: {
userName: [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
login () {
this.$refs['login-form'].validate(valid => {
if (!valid) {
return
}
this.dologin()
})
},
dologin () {
this.loading = true
}
}
})
</script>

<style scoped lang="less">
.login-container {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url('./loginbg.png') no-repeat;
background-size: cover;
.login-header{
width: 400px;
height: 80px;
background-color: #148BE4;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
line-height: 80px;
font-display: '微软雅黑';
font-size: 36px;
color: #fff;
}
.login-form{
background-color: #fff;
padding: 40px 50px 20px;
min-width: 300px;
min-height: 120px;
.login-btn{
width: 100%;
margin-top: 15px;
}
}
.login-footer{
width: 400px;
height: 20px;
background-color: #fff;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
}
</style>

Tags：

很赞哦！ ()

上一篇：从0开发一个后台管理系统(第一节)(图文)

下一篇：返回列表