前言
实战已经开始了！在前面几篇文章中，我们把首页的布局和样式都完成了，也将首页拆分成了多个组件，并合并成一个首页展示出来了。本章节会先补充一个知识点 - Css作用域约束，然后还会将登录页的布局实现出来。
CSS作用域约束
在之前的代码中，我们的组件样式里面都是用的style标签，并在标签上写了一个lang=scss，这就表示我们的样式可以根据scss的方式去写。
在首页有这样一段样式代码：
<style lang="scss"> .wrapper { position: absolute; left: 0; top: 0; bottom: 0.5rem; right: 0; padding: 0 0.18rem; overflow-y: auto; } </style> 复制代码
如果在其他组件也定义了一个wrapper的类名，并写了样式，那页面上会怎么呈现出来呢？
<div class="tabbar wrapper"> <div class="tabbar__item" v-for="item in tabbarList" :key="item.icon"> <div class="iconfont" v-html="item.icon"></div> <div class="tabbar__title">{{item.title}}</div> </div> </div> 复制代码
- tabbar组件中添加了一个wrapper类名
.wrapper { background-color: red; } 复制代码
- 并在tabbar组件的样式中给wrapper一个红色背景
这时候会发现不仅页面的背景变成了红色，tabbar组件还跑到顶部去了。
⭐️ 如果想要找到并修改wrapper的样式，但是又有多个地方写了wrapper的样式，那么定位起来就比较困难了。
🔥 理论上来说，我们在写前端样式时，一个组件样式应该只是作用于当前组件内部，不应该影响到外部的组件。
如果想要实现这样的理论效果，那么就需要在style标签上添加一个scoped属性。
<style lang="scss" scoped> </style> 复制代码
scoped：当前样式仅对当前组件有效。
🐂 这时候页面就会正常显示了，而tabbar组件中的wrapper样式只会作用于当前组件。
建议：以后在写组件样式的时候，最好都加上scoped，这样方便大家维护组件样式。
登录页
在写登录页面之前，我们需要先在views目录下面新建Login文件夹和Login.vue文件。
稿图
由于组件的DOM结构比较简单，样式也不太复杂，所以下面会直接对组件和样式贴代码，大家也可以自行DIY登录页的哦。。。
组件DOM
<template> <div class="wrapper"> <img class="wrapper__img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/236a3cf5-e6e7-4f37-916f-72e1465ac359.png"/> <div class="wrapper__input"> <input class="wrapper__input__content" placeholder="请输入手机号" /> </div> <div class="wrapper__input"> <input class="wrapper__input__content" placeholder="请输入密码" /> </div> <div class="wrapper__login-button">登陆</div> <div class="wrapper__login-link">立即注册</div> </div> </template> 复制代码
组件样式
<style lang="scss" scoped> @import '../../style/viriables.scss'; .wrapper { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); &__img { display: block; margin: 0 auto .4rem auto; width: .66rem; height: .66rem; } &__input { height: .48rem; margin: 0 .4rem .16rem .4rem; padding: 0 .16rem; background: #F9F9F9; border: 1px solid rgba(0,0,0,0.10); border-radius: 6px; border-radius: 6px; &__content { line-height: .48rem; border: none; outline: none; width: 100%; background: none; font-size: .16rem; color: $content-notice-font-color; &::placeholder { color: $content-notice-font-color; } } } &__login-button { margin: .32rem .4rem .16rem .4rem; line-height: .48rem; background: #0091FF; box-shadow: 0 .04rem .08rem 0 rgba(0,145,255,0.32); border-radius: .04rem; border-radius: .04rem; color: #fff; font-size: .16rem; text-align: center; } &__login-link { text-align: center; font-size: .14rem; color: $content-notice-font-color; } } </style> 复制代码
- 在样式中，引入了一个公共scss，在首页的代码中也用到过的。
$content-notice-font-color: #777; 复制代码
App.vue中引入组件
<template> <div> <Login /> </div> </template> <script> import Login from './views/login/Login' export default { name: 'App', components: { Login } } </script> 复制代码
⭐️ 这时候在打开根路由的时候，就会渲染出Login页面了。
但是现在没办法看到首页了，该怎么办呢？
路由配置
👉 打开router目录下面的index.js文件
👆 将Home和Login两个组件引入进去
import Home from '../views/home/Home' import Login from '../views/login/Login' 复制代码
✌️ 将Home配置成根路由，将Login配置成/Login的路由
const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/login', name: 'Login', component: Login } ] 复制代码
👌 配置App.vue
<template> <div> <router-view /> </div> </template> <script> export default { name: 'App' } </script> 复制代码
- App.vue中就需要用router-view标签来展示路由了，其他的组件都不需要引入。
总结
本篇文章主要是补充了前面没有提到的Css作用域约束，还将登录页布局实现了，并把登录页和首页的路由配置完成之后，在App.vue里面就不用引入组件来显示了。
