• 打開permission.js，將首頁的頁面path填寫到白名單whiteList里

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

• 然后訪問首頁路徑

http://localhost:9020/#/home

• 下面配置tabbar，打開src/views/layouts/index.vue，修改tabbars數(shù)組

 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>

• 先來開發(fā)頂部的navbar和搜索框和滾動通告，需要用到vant組件庫的NavBar 導(dǎo)航欄和Search 搜索和NoticeBar 通知欄

image.png

• 首先先引入NavBar 導(dǎo)航欄和Search 搜索
• 打開src/plugins/vant.js，引入這三個組件

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

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

• 開始編碼開發(fā)這三個模塊

<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="請輸入搜索關(guān)鍵詞" />
    <van-notice-bar left-icon="volume-o" text="在代碼閱讀過程中人們說臟話的頻率是衡量代碼質(zhì)量的唯一標(biāo)準(zhǔn)。" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

• 開發(fā)完成

image.png

• 下面開發(fā)好友列表頁面

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