使用Element框架来改变前端样式,3.5element -puls使用ts来引入实在搞不明白,退一步选择使用老版本element-ui来引入
一、安装引入Element
Element的官网https://element.eleme.cn/#/zh-CN
1、安装element
在项目文件夹下,执行 npm i element-ui -S
vue3.5版本需要引入element plus 和ts结合,自己操作中出现标签未识别错误,只能采取老版本的ui进行前端的编写
2、引入element
通过2.5版本指示只需修改main.js即可 内如如下:
import Vue from 'vue'
import App from './App.vue'
import router from "./router"
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store'
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8888/api'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
components:{App},
router,
store,
render: h => h(App),
}).$mount('#app')
完成element的引入,打开 Login.vue
修改 <div>
标签改为<el-card>
如图所示
然后访问 http://localhost:8080/#/login ,查看是否成功,如下图表示引入成功
二、优化登录页面
1、使用Form组件
引用vue来设计登录页面,一般选择form表单来获取样式
根据自己的需求修改代码,可已获得修改后的代码
<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>
并修改css样式,修改后样式如下
<style scoped>
.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>
2、设置背景
把自己需要的背景放入 src\assets
为了使用背景图片,我在 <el-form>
标签的外又添加了一个父标签 <body>
,id 设置为 poster
,并在 <style>
中添加如下内容
写一个 body 的样式,是为了覆盖掉浏览器(用户代理)的默认样式
上方有一片空白,是 App.vue
的错误需把margin-top: 60px去掉如果所示
3、完整代码
主要修改的就是Login.vue
现在沾出完整代码
<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'})
// }
// })
// // eslint-disable-next-line no-unused-vars
// .catch(failResponse => {
// })
// }
// }
var _this = this
console.log(this.$store.state)
this.$axios
.post('/login', {
username: this.loginForm.username,
password: this.loginForm.password
})
.then(successResponse => {
if (successResponse.data.code === 200) {
// var data = this.loginForm
_this.$store.commit('login', _this.loginForm)
var path = this.$route.query.redirect
this.$router.replace({path: path === '/' || path === undefined ? '/index' : path})
}
})
// eslint-disable-next-line no-unused-vars
.catch(failResponse => {
})
}
}
}
</script>
<style>
#poster{
background:url("../assets/login.jpg") no-repeat;
background-position: center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}
body{
margin: 0px;
}
.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>
登录页面完善,下面需引入Vuex来做前端拦截器