• 打开permission.js，将首页的页面path填写到白名单whiteList里

const whiteList = ['/login','/home'] // no redirect whitelist

• 然后访问首页路径

http://localhost:9020/#/home

• 下面配置tabbar，打开src/views/layouts/index.vue，修改tabbars数组

 tabbars: [
        {
          title: '通讯录',
          to: {
            name: 'Home'
          },
          icon: 'chat-o'
        },
        {
          title: '群聊',
          to: {
            name: 'GroupChat'
          },
          icon: 'friends-o'
        },
        {
          title: '我的',
          to: {
            name: 'About'
          },
          icon: 'user-o'
        }
      ]

• tabbar配置好了，下面删除src/views/home/index.vue中的代码

<template>
  <div>首页</div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
</style>

• 先来开发顶部的navbar和搜索框和滚动通告，需要用到vant组件库的NavBar 导航栏和Search 搜索和NoticeBar 通知栏

image.png

• 首先先引入NavBar 导航栏和Search 搜索
• 打开src/plugins/vant.js，引入这三个组件

import { NavBar, Search, NoticeBar } from 'vant';

Vue.use(NavBar);
Vue.use(Search);
Vue.use(NoticeBar);

• 开始编码开发这三个模块

<template>
  <div>
    <van-nav-bar title="回信（0）" left-text="">
      <template #right>
        <van-icon name="add-o" size="20" color="#333" />
      </template>
    </van-nav-bar>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <van-notice-bar left-icon="volume-o" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

• 开发完成

image.png

• 下面开发好友列表页面

image.png

• 需要用到Image 图片，自行去引入
• html

<div class="cell">
      <ul>
        <li v-for="(item,index) in 12" :key="index">
          <div class="left">
            <van-image
              fit="cover"
              class="avatar"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201606%2F07%2F20160607213049_SAfEL.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661607257&t=85d7505d9327024d5bfd5350cf0c1259"
            />
          </div>
          <div class="right">
            <div class="top">
              <span>钱多多 </span>
              <span></span>
              <span>12:00</span>
            </div>
            <div class="bottom">你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友</div>
          </div>
        </li>
      </ul>
    </div>

• css

.cell {
  padding-top: 10px;
  background: #fff;
  ul {
    li {
      display: flex;
      font-size: 24px;
      padding: 20px 12px;
      border-bottom: 2px solid #eee;
      margin-bottom: 12px;
      .left {
        width: 92px;
        height: 92px;
        margin-right: 12px;
        ::v-deep .van-image{
          width: 100%;
          height: 100%;
        }
      }
      .right{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top{
          display: flex;
          justify-content: space-between;
          span{
            &:first-child{
              font-size: 28px;
            }
          }
        }
        .bottom{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: calc(100vw - 150px);
          color: #999;
        }
      }
    }
  }
}

• 编码完成

image.png