接上篇《8、登录与退出功能开发准备（二）》
上一篇讲解了登录模块的开发的前置准备工作，本篇来正式开发登录模块。
一、创建登录组件并渲染
下面我们创建一个根组件，并将根组件渲染到App根组件中。
打开vscode编辑器，打开“components”文件夹，新建一个名为“Login.vue”的登录组件：
一个完整的vue组件包含“结构”、“行为”和“样式”，我们将这三块编写上去：
<template>
<div>
登录组件
</div>
</template>
<script>
export default {}
</script>
<!-- 支持less语法格式，scoped代表样式只在本组件起作用 -->
<style lang="less" scoped>
</style>大家注意这里的scoped，一般一个组件的样式是自己定义的，不会去定义其他组件的样式，如果我们创建的是一个单文件的vue组件，建议大家都加上scoped标识，防止组件之间的样式冲突。
注：使用less语法，需要安装less-loader和less两个依赖。
然后我们需要在router路由的配置文件中，为Login.vue绑定路由，以便我们可以访问到该页面。打开“router/index.js”，添加以下内容：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' //引用Login组件
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
routes:[
{path:'/login',component:Login} //定义访问页面的路由地址
]
})
export default router有了路由配置后，紧接着我们需要把Login组件渲染到App根组件中，因为App组件是系统的入口，想要显示子组件就需要在App根组件上渲染它。
我们在App根组件的结构区域，添加路由占位符，用来展示地址栏上的路由组件内容：
<template>
<div id="app">
<!-- 路由占位符 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>注：如果报“Extra semicolon”的错误，是因为 eslint 的语法监测检查了分号，我觉得不让用空格和分号有点变态，决定把这个校验关闭。在“.eslintrc.js”配置文件中将所有rule删除即可：
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential'
//'@vue/standard' 这个也要删除
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
//一个不要留
}
}此时我们访问login地址，就可以在根组件上看到渲染的Login组件内容：
当我们访问默认地址时，是一片空白：
我们可以指定默认空路径的时候，访问login地址，在路由规则中添加一个重定向的规则：
const router = new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:Login} //定义访问页面的路由地址
]
})然后我们直接访问“http://localhost:8080/#/”的时候，就会自动跳转“http://localhost:8080/#/login”。
二、构建登录组件的布局
1、给登录组件添加背景色
<template>
<div class="login_container">
登录组件
</div>
</template>
<script>
export default {};
</script>
<!-- 支持less语法格式，scoped代表样式只在本组件起作用 -->
<style lang="less" scoped>
.login_container{
background-color: #2b4b6b;
height: 100%;
}
</style>此时效果：
我们想让这个颜色沾满全屏，此时需要创建一个全局样式表，在“assets”下创建“css/global.css”作为全局文件：
样式内容为：
/* 全局样式表 */
html,
body,
#app{
height: 100%;
margin: 0;
padding: 0;
}设置html、body以及app的组件高度都为100%，内外边距都是0。
然后在入口文件mian.js导入全局样式：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入全局样式表
import './assets/css/global.css'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')效果：
然后我们绘制登录的白色盒子：
<template>
<div class="login_container">
<div class="login_box"></div>
</div>
</template>
<script>
export default {};
</script>
<!-- 支持less语法格式，scoped代表样式只在本组件起作用 -->
<style lang="less" scoped>
.login_container{
background-color: #2b4b6b;
height: 100%;
}
.login_box{
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;//圆角效果
}
</style>这里添加了一个类名为“login_box”的div，并绘制了样式，效果为：
此时我们还需要让这个盒子上下左右居中，我们修改样式，进行绝对定位，距离左侧和上测都是50%，界面位移在横轴和纵轴都移动-50%：
.login_box{
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;//圆角效果
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}效果：
然后我们绘制一下登录页面那个圆形的头像组件。在template区域的白色盒子里面，再加一个样式名为“avatar_box”的组件：
<template>
<div class="login_container">
<div class="login_box">
<div class="avatar_box">
<img src="../assets/logo.png" alt=""/>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<!-- 支持less语法格式，scoped代表样式只在本组件起作用 -->
<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%);
//less语法的嵌套
.avatar_box{
height: 130px;
width: 130px;
background-color: #fff;
border: 1px solid #eee;//加个灰色边框
border-radius: 50%;//div组件变成圆形
padding: 10px;//图片和边框之间有10px间隙
box-shadow: 0 0 10px #ddd;//添加一个阴影，向外扩散10像素
//头像居中，向左移动box的50%，再向右移动自身的-50%，向上移动该组件高度的-50%，
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
img{
height: 100%;
width: 100%;
border-radius: 50%;//图片变成圆形
background-color: #eee;
}
}
}
</style>效果：
下一篇我们继续编写账号密码填写的表单样式。
参考：黑马程序员（www.itheima.com）Vue项目实战教学视频
转载请注明出处：http://blog.csdn.net/acmman/article/details/119482872