1. 废话不说，先上设计图

image.png

1. 在view 目录下新建pages文件夹，内新建login.vue文件，代码如下：（注意背景图，自己找一个好看的，放在指定的位置）
ps: 先添加路由 
    {
        path: '/login',
        name: 'Login',
        component: () => import('@/views/pages/login'),
        meta: { title: '登录', keepAlive: false }
    }
<template>
  <div class="body">
    <h1>大番薯聊天室</h1>
    <img class="bg-img" src="@/assets/02.jpg">
    <div class="box" v-if="loginflag">
      <ul class="li-list">
        <li>
          <van-field class="username" v-model="username" input-align="center" placeholder="输入账号" />
        </li>
        <br>
        <li>
          <van-field class="username" v-model="password" input-align="center" placeholder="输入密码" />
        </li>
        <li>
          <van-button @click="handlerLogin()" class="login-btn" size="small" type="info" color="#00ccb8">登录</van-button>
        </li>
        <li class="register">即时聊天,随机头像,退出自焚记录</li>
        <li class="go-register">
          <span @click="loginflag=!loginflag">去注册</span>
        </li>
      </ul>
    </div>
    <div class="box" v-if="!loginflag">
      <ul class="li-list">
        <li>
          <van-field class="username" v-model="username" input-align="center" placeholder="输入账号" />
        </li>
        <br>
        <li>
          <van-field class="username" v-model="password" input-align="center" placeholder="输入密码" />
        </li>
        <li>
          <van-button @click="register()" class="login-btn" size="small" type="info" color="#00ccb8">注册</van-button>
        </li>
        <li class="register">即时聊天,随机头像,退出自焚记录</li>
        <li class="go-register">
          <span @click="loginflag=!loginflag">去登录</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { register } from "@/api/user";
export default {
  name: "Login",
  data () {
    return {
      loginflag: true,
      username: "",
      password: ""
    }
  },
 
  methods: {
    async register () {
      try {
        if (this.username.trim() == '') {
          this.$toast.fail("请输入账号")
          return
        }
        if (this.password.trim() == '') {
          this.$toast.fail("请输入密码")
          return
        }
        const res = await register({ username: this.username, password: this.password })
        this.$toast.success("注册成功")
        this.loginflag = !this.loginflag
        this.username = ""
        this.password = ""
      } catch (error) {
        this.$toast.fail(error.message)
      }
    },
    async handlerLogin () {
      if (this.username.trim() == '') {
        this.$toast.fail("请输入账号")
        return
      }
      if (this.password.trim() == '') {
        this.$toast.fail("请输入密码")
        return
      }
      await this.$store.dispatch('login', { username: this.username, password: this.password }).then((res) => {
        this.$router.push({ path: '/' })
        this.$toast.success("登录成功！")
      }).catch((error) => {
        console.log(error);
        this.$toast.fail(error.message)
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'webfont';
  font-display: swap;
  src: url('//at.alicdn.com/t/webfont_es0jxyv1ci.eot');
  /* IE9*/
  src: url('//at.alicdn.com/t/webfont_es0jxyv1ci.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('//at.alicdn.com/t/webfont_es0jxyv1ci.woff2') format('woff2'),
    url('//at.alicdn.com/t/webfont_es0jxyv1ci.woff') format('woff'),
    /* chrome、firefox */ url('//at.alicdn.com/t/webfont_es0jxyv1ci.ttf') format('truetype'),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/webfont_es0jxyv1ci.svg#站酷小薇体')
      format('svg');
  /* iOS 4.1- */
}

.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

h1 {
  position: absolute;
  top: 40px;
  color: #fff;
  opacity: 0.5;
  text-shadow: 5px 5px 5px #ccc;
  font-family: 'webfont' !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.box {
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.li-list {
  padding-top: 15px;
}
.li-list li {
  display: flex;
  justify-content: center;
  align-items: center;
}

.username,
.password {
  width: 300px;
  margin: 5px 0;
  border: 1px solid #fff;
  border-radius: 5px;
  background-color: #1abc9c;
  color: #fff;
  text-align: center;
  padding: 5px 0;
}
.login-btn {
  padding: 8px;
  border: none;
  width: 300px;
  margin: 60px 0;
  border-radius: 5px;
  background-color: #1abc9c;
  color: #fff;
  cursor: pointer;
  outline: medium;
  &:active {
    transform: scale(0.95);
  }
}

.register {
  text-align: center;
  color: #1a2a3a;
  font-size: 14px;
  white-space: nowrap;
  line-height: 50px;
}

.register a {
  font-size: 16px;
  color: #1a2a3a;
  text-decoration: none;
  cursor: pointer;
}

.box {
  position: relative;
  margin: 0 auto;
  padding: 130px;
  background: hsla(0, 0%, 100%, 0.15) border-box;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.3) inset, 0 5px 5px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.3);
}

.box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -30px;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

.bg-img {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}
.go-register {
  font-size: 12px;
  span {
    background: #1abc9c;
    color: #fff;
    padding: 4px 10px;
    border-radius: 5px;
  }
}
</style>

2. 然后会报错，<van-field>组件未引入，底部的tabbar我们login页面并不想要，在继续改造一下

image.png

1. 在plugins/vamt.js内引入，我们项目大致会用到的，这里我一并引入
  // 按需全局引入 vant组件
import Vue from 'vue'
import { Button, Icon,NoticeBar,Notify, List, Field, 
Dialog, Cell, CellGroup, Tabbar, Popover, Popup, 
Sticky, TabbarItem, NavBar, Search, Image as VanImage } from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Tabbar).use(TabbarItem)
Vue.use(Icon)
Vue.use(NavBar)
Vue.use(Search)
Vue.use(VanImage)
Vue.use(Sticky)
Vue.use(Popover)
Vue.use(Popup)
Vue.use(CellGroup)
Vue.use(Dialog)
Vue.use(Field)
Vue.use(NoticeBar)
Vue.use(Notify)

2. 解决底部tabbar的问题，因为我们有的页面需要tabbar，有的页面不需要，所以我们要动态控制，
在router.config.js内每个路由的meta内新增一个属性showFoot: true，为true就说这个页面需要显示tabbar，反之亦凡。
login页面不需要，所以  meta: { title: '登录', keepAlive: false, showFoot: false } 
首页是需要的 所以 meta: { title: '首页', keepAlive: false, showFoot: true }
光是这么弄是不行，还要改造下 views/layouts/index.vue
    <div class="layout-footer" v-if="$route.meta.showFoot">
      <TabBar :data="tabbars" @change="handleChange" />
    </div>

3. 最后 注释掉 ,大功告成

//.app-container {
//  padding-bottom: 50px;
//}