这里我们简单做一个登录界面,界面如图:
话不多说直接上代码
首先我们修改登录界面
login.vue
系统登录
修改主界面
Home.vue
在views下添加导航菜单栏、头部区域、内容区域
左测导航菜单栏
NavBar.vue
头部区域:
HeadBar.vue
import mock from "@/mock/index"
export default {
data() {
return {
user: {
name: "Louis",
avatar: "",
role: "超级管理员",
registeInfo: "注册时间:2018-12-20 "
},
activeIndex: '1',
langVisible: false
}
},
methods: {
selectNavBar(key, keyPath) {
console.log(key, keyPath)
}
},
mounted() {
var user = sessionStorage.getItem("user")
if (user) {
this.user.name = user
this.user.avatar = require("@/assets/user.png")
}
}
}
.headbar {
position: fixed;
top: 0;
right: 0;
z-index: 1030;
height: 60px;
line-height: 60px;
border-color: rgba(180, 190, 190, 0.8);
border-left-width: 1px;
border-left-style: solid;
}
.navbar {
float: left;
}
.toolbar {
float: right;
}
.user-info {
font-size: 20px;
color: #fff;
cursor: pointer;
img {
width: 40px;
height: 40px;
border-radius: 10px;
margin: 10px 0px 10px 10px;
float: right;
}
}
.position-left {
left: 200px;
}
主内容区域:
MainContent.vue
修改App.vue
export default {
name: 'App'
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
修改完代码后访问:http://localhost:8080/#/login
如下图,可以看到我们的登录界面已经出来了
然后我们点击登录,进入主界面
好啦,到此我们就完成了一个简单的登录流程,在实际开发过程中,在登录后可能会有一些操作要进行,我们这里就不细说了。
看完记得点赞哦!