electron11+vue3+antdv跨平臺聊天應用實戰

前段時間有給大家分享一個Vite2+Vant3仿製抖音短影片/直播例項。今天帶來的是

Electron+Vue3

相結合開發跨平臺聊天軟體專案。

Vue3ElectronChat

基於vue3。0+electron11。2。3+ant-design-vue等技術開發的多端聊天應用。

支援新開多個視窗、換膚、朋友圈等功能。

使用技術

編輯器：vscode

打包工具：vue-cli-plugin-electron-builder

跨端框架：electron11。2。3

MVVM框架：vue3。0

狀態管理：vuex^4。0。0

頁面路由：vue-router^4。0。3

UI元件庫：ant-design-vue （螞蟻金服vue3桌面端元件庫）

彈窗元件：v3layer（基於vue3自定義桌面端彈出層元件）

捲軸元件：v3scroll（基於vue3自定義美化系統捲軸）

專案目錄結構

antdv按需引入

專案中使用到了ant-design-vue元件庫中的部分元件，不需要全部引入，故採用按需引入的方式，能減少打包體積。

需要先安裝外掛： npm i babel-plugin-import -D

新建一個Plugins。js檔案，用來引入公共元件。

在main。js中引入Plugins。js即可。

vue3自定義彈窗|捲軸元件

專案中使用到的彈窗有一部分是vue3自定義元件實現，另外捲軸也是基於vue3自定義元件美化實現。

Electron自定義導航選單|最大/小化/關閉

專案採用無邊框模式frame：false，所以頂部選單需要自定義元件實現。

使用css3定義-webkit-app-region：drag，可快速實現一個可拖拽區域。

頂部navbar.vue模板

右上角按鈕組winbar.vue模板

Electron建立系統托盤/閃爍

點選視窗關閉按鈕，提示直接退出程式還是最小化至托盤。

需要提前準備兩張尺寸一致的ico圖示，其中一個透明背景即可。

electron-builder打包配置

ok，基於vue3。x+electron11+antdv搭建跨平臺聊天應用就分享到這裡。