持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

前言

实战已经开始了！在前面几篇文章中，我们把首页的布局和样式都完成了，也将首页拆分成了多个组件，并合并成一个首页展示出来了。本章节会先补充一个知识点 - 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里面就不用引入组件来显示了。