1---最终效果
2--引入element-ui:
在项目文件夹下,执行 npm i element-ui -S
即可
3--修改main.js内容:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 设置反向代理,前端请求默认发送到 http://localhost:8443/api
var axios=require('axios')
axios.defaults.baseURL='http://localhost:8443/api'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/*作用是阻止vue 在启动时生成生产提示。*/
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h=>h(App),
router, /*router 代表该对象包含 Vue Router,并使用项目中的路由*/
components: { App }, /*components 表示该对象包含的 Vue 组件,*/
template: '<App/>' /*template 是用一个字符串模板作为 Vue 实例的标识使用,类似于定义一个 html 标签*/
})
4---使用form组件 美化:
其中添加body组件,引入背景图片,选一张自己喜欢的就好!
<template>
<body id="poster">
<el-form class="login-container" label-position="left" label-width="0px">
<h3 class="login_title">系统登录</h3>
<el-form-item>
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
</el-form-item>
</el-form>
</body>
</template>
<script>
export default {
name: "Login",
data() {
return {
loginForm: {
username: '',
password: ''
},
responseResult: []
}
},
methods: {
login() {
this.$axios
.post('/login', {
username: this.loginForm.username,
password: this.loginForm.password
})
.then(successResponse => {
if (successResponse.data.code === 200) {
this.$router.replace({path: '/index'})
}
})
.catch(failResponse => {
})
}
}
}
</script>
<style>
#poster {
background:url("../assets/eva.jpg") no-repeat;
background-position: center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}
body{
margin: 0px;
padding: 0;
}
.login-container {
border-radius: 15px;
background-clip: padding-box;
margin: 90px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.login_title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>