我们先实现一个简单的流程：

可以看到，对于Chat.vue页面，我们需要一个Tabs组件。
我们选用element-ui快速搭建页面。

• bash

yarn add element-ui -D

• renderer/index.js

// 添加代码
...
import { TabPane, Tabs } from 'element-ui'
...
Vue.component(TabPane.name, TabPane)
Vue.component(Tabs.name, Tabs)
...

• views/Chat.vue

<template>
  <div id="chat">
    <el-tabs v-model="activeName">
      <el-tab-pane label="发消息" name="F">
        发消息
      </el-tab-pane>
      <el-tab-pane label="联系人" name="M">
        联系人
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'M'
    }
  }
}
</script>

<style scoped>
#chat {
  height: 100%;
  margin: 0 8px;
}
</style>

我们还需要两个自定义组件：

• ChatList.vue: 联系人列表
• SendMessage.vue: 用来发送消息