前端开发
1. Login.vue
<template>
<div>
Login
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
2. index.js 引入login组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: "/",
redirect: "/login"
},
{
path: "/login",
component : Login
}
]
const router = new VueRouter({
routes
})
export default router
3. App.vue 路由渲染
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
4. 访问Login 页面 成功
5. 修改login页面
<template>
<div class="login_container">
<div class="login_box">
<div class="avater_box">
<img src="../assets/logo.png"/>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
6. 添加全局样式 global.css 并在main.js中导入
/* 全局样式*/
html,body,#app{
height: 100%;
margin: 0;
padding: 0;
}
//添加全局样式
import './assets/css/global.css'
7**. 从elementui 中添加登录组件**
<template>
<div class="login_container">
<!--登录块-->
<div class="login_box">
<!--头像-->
<div class="avatar_box">
<img src="../assets/logo.png" />
</div>
<!--表单-->
<el-form ref="loginFromRef" :model="loginForm" class="login_from" label-width="0">
<!-- 用戶名 -->
<el-form-item >
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item >
<el-input v-model="loginForm.password"></el-input>
</el-form-item>
<!-- 按钮 -->
<el-form-item class="btns">
<el-button type="primary">登录</el-button>
<el-button type="info">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data(){
return{
loginForm:{
username:"username",
password:"password"
}
}
}
};
</script>
<style lang="less" scoped>
</style>
- 从iconfont.cn 阿里巴巴矢量图标库添加图标
找到所需图标,下载代码,解压出来放入assets文件夹下
修改了文件名
main.js引入
// 引入iconfont
import './assets/font/iconfont.css'
9. 挑选相应图标并获取类名,应用于页面
在对应的标签下添加样式
<!-- 用戶名 -->
<el-form-item >
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-denglu"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item >
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima"></el-input>
</el-form-item>
效果
10. 修改样式
<style lang="less" scoped>
//根结点样式
.login_container{
background-color: #2b4b6b;
height: 100%;
}
.login_box{
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
.avatar_box{
width: 130px;
height: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 5px;
box-shadow: 0 0 2px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
background-color: #eee;
img{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
}
.login_from{
position: absolute;
bottom: 0%;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
</style>
遇见问题:TypeError: this.getOptions is not a function
原因:less-loader版本过高
解决方法:卸载,重新安装低版本
通过 npm uninstall less-loader
命令卸载原版本的 less-loader,然后 通过 npm install less-loader@5.0.0
命令下载降级版本的 less-loade
完成结果