源碼 j修械、源碼 j-step-c9终蒂、相關(guān)視頻
我們先實現(xiàn)一個簡單的流程：
簡單流程
可以看到，對于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="發(fā)消息" name="F">
發(fā)消息
</el-tab-pane>
<el-tab-pane label="聯(lián)系人" name="M">
聯(lián)系人
</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: 聯(lián)系人列表
- SendMessage.vue: 用來發(fā)送消息
上一節(jié) Electron開發(fā)實戰(zhàn)之08-Login.vue
目錄
下一節(jié) Electron開發(fā)實戰(zhàn)之10-ChatList.vue
