我们先实现一个简单的流程：
简单流程
可以看到，对于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: 用来发送消息
上一节 Electron开发实战之08-Login.vue
目录
下一节 Electron开发实战之10-ChatList.vue
