vue 聊天窗口实现：ElectronVue3跨平台仿QQ
vue 聊天窗口实现：ElectronVue3跨平台仿QQvue3 electron11自定义最小/大化/关闭按钮 项目整体采用无边框 frame: false 模式，所以需要自定义顶部导航栏。之前也有个一篇分享，感兴趣的可以去看下。至于使用electron如何快速搭建项目及构建多窗体模式，大家可以去看看之前的这篇分享。基于 vue3 electron 创建多窗口踩坑记 Vue3 Electron实现QQ导航菜单/新开窗口
前段时间有给大家分享两个vue3.0实战项目，vue3仿微信pc版 | vue3仿抖音小视频。今天再给大家分享一个最新开发的vue3 electron跨端仿制QQ聊天应用。
electron-qchat 基于vue3.0 electron11 antdv v3layer v3scroll等技术开发的跨平台模仿QQ桌面端聊天软件。
- 编码 技术：VScode | Vue3.0 Electron11.2.3 Vuex4 VueRouter@4
- UI组件库：Ant-design-vue^2.0.0 (蚂蚁金服桌面端vue3组件库)
- 打包器：vue-cli-plugin-electron-builder
- 按需引入：babel-plugin-import^1.13.3
- 弹窗组件：V3layer（基于vue3自定义dialog组件）
- 滚动条组件：V3scroll（基于vue3自定义虚拟滚动条）
项目中的弹窗分为vue3自定义弹窗和electron构建多窗体弹窗。
vue3.0系列：Vue3自定义PC端弹窗组件V3Layer
至于使用electron如何快速搭建项目及构建多窗体模式，大家可以去看看之前的这篇分享。
基于 vue3 electron 创建多窗口踩坑记
Vue3 Electron实现QQ导航菜单/新开窗口
Electron自定义拖拽|最大/小/关闭按钮
项目整体采用无边框 frame: false 模式，所以需要自定义顶部导航栏。之前也有个一篇分享，感兴趣的可以去看下。
vue3 electron11自定义最小/大化/关闭按钮
vue3 electron项目/打包配置创建项目的时候，根目录有一个vue.config.js配置文件。里面可以配置一些electron-builder打包参数。
/**
* 项目配置文件
*/
const path = require('path')
module.exports = {
// 基本路径
// publicPath: '/'
// 输出文件目录
// outputDir: 'dist'
// assetsDir: ''
// 环境配置
devServer: {
// host: 'localhost'
// port: 8080
// 是否开启https
https: false
// 编译完是否打开网页
open: false
// 代理配置
// proxy: {
// '^/api': {
// target: '<url>'
// ws: true
// changeOrigin: true
// }
// '^/foo': {
// target: '<other_url>'
// }
// }
}
// webpack配置
chainWebpack: config => {
// 配置路径别名
config.resolve.alias
.set('@' path.join(__dirname 'src'))
.set('@assets' path.join(__dirname 'src/assets'))
.set('@components' path.join(__dirname 'src/components'))
.set('@module' path.join(__dirname 'src/module'))
.set('@plugins' path.join(__dirname 'src/plugins'))
.set('@layouts' path.join(__dirname 'src/layouts'))
.set('@views' path.join(__dirname 'src/views'))
}
// 插件配置
pluginOptions: {
electronBuilder: {
// 配置后可以在渲染进程使用ipcRenderer
nodeIntegration: true
// 项目打包参数配置
builderOptions: {
"productName": "electron-qchat" //项目名称 打包生成exe的前缀名
"appId": "com.example.electronqchat" //包名
"compression": "maximum" //store|normal|maximum 打包压缩情况(store速度较快)
"artifactName": "${productName}-${version}-${platform}-${arch}.${ext}" //打包后安装包名称
// "directories": {
// "output": "build" //输出文件夹（默认dist_electron）
// }
"asar": false //asar打包
// 拷贝静态资源目录到指定位置
"extraResources": [
{
"from": "./static"
"to": "static"
}
]
"nsis": {
"oneClick": false //一键安装
"allowToChangeInstallationDirectory": true //允许修改安装目录
"perMachine": true //是否开启安装时权限设置（此电脑或当前用户）
"artifactName": "${productName}-${version}-${platform}-${arch}-setup.${ext}" //打包后安装包名称
"deleteAppDataOnUninstall": true //卸载时删除数据
"createDesktopShortcut": true //创建桌面图标
"createStartMenuShortcut": true //创建开始菜单图标
"shortcutName": "ElectronQChat" //桌面快捷键图标名称
}
"win": {
"icon": "./static/shortcut.ico" //图标路径
}
}
}
}
}electron实现截图功能
聊天应用一般都需要有截图功能，这里使用了Node调用截图dll来实现。
// 屏幕截图
ipcMain.on('win-capture' () => {
console.log('调用微信dll截图...')
let printScr = execFile(path.join(__dirname '../static/screenShot/PrintScr.exe'))
printScr.on('exit' (code) => {
if(code) {
console.log(code)
}
})
})
如果出现打包后截图无效，则需要配置 extraResources 参数。
另外记得创建项目前最好不要设置中文目录，否则打包会出错。
ok，以上就是vue3 electron11开发跨端仿QQ客户端实例。希望大家能喜欢~~
