Electron12+Vite2整合vue3.0直播/聊天/小视频|vue3+vant3+electron跨平台应用
一、项目介绍
基于vite.js构建工具
和electron12跨端技术
集成开发vue3仿抖音桌面端项目。使用了vite2+electron12+vant3+swiper+v3popup
等技术开发实现短视频+聊天+直播程序。
二、技术栈
- 编码器:vscode
- 构建工具:vite.js
- Vue3全家桶:vue3.0+vuex4+vue-router@4
- 跨端框架:electron12.0.1
- 打包工具:vue-cli-plugin-electron-builder
- UI 组件库:vant3.0.10 (有赞vue3移动端组件库)
- 弹框组件:v3popup (vue3 移动端弹窗组件)
- 环境配置:nodejs + npm/yarn
三、项目结构
四、效果预览
vue3+electron自定义弹窗
项目中使用到的弹窗功能,分为vue3自定义组件和electron新开窗口两种实现方式。
<v3-popup v-model="isShowLogoutSys" anim="footer" type="actionsheet"
content="<span><i class='iconfont icon-info c-46b6ef'></i> 确定要退出当前账号吗?</span>"
:btns="[
{text: '退出登录', style: 'color:#fa367a;', click: logoutSys},
{text: '取消', click: () => isShowLogoutSys=false},
]"
>
</v3-popup>
const handleAboutWin = () => {
data.isShowSideMenu= false
createWin({
title: '关于',
route: '/about',
width: 420,
height: 320,
resize: false,
parent: winCfg.window.id,
modal: true,
})
}
之前有过一些相关的技术分享文章,感兴趣的可以去看看。
vue3.0封装移动端弹窗组件v3popup
electron新建多窗口模式|父子Modal窗体
electron12自定义顶部导航器+Tabbar
项目整体采用了无边框风格frame:false
,通过-webkit-app-region:drag
即可实现任意区域拖拽功能。
调用非常简单,只需通过如下方式,即可快速生成一个带最大/最小/关闭按钮组的可拖拽导航菜单。
<WinBar :bgcolor="headerBg" transparent>
<template #wbtn>
<a class="wbtn" title="二维码名片" @click="isShowPersonalCard=true"><i class="iconfont icon-erweima"></i></a>
<a class="wbtn" title="设置" @click="isShowSideMenu=true"><i class="iconfont icon-menu"></i></a>
</template>
</WinBar>
<WinBar bgcolor="linear-gradient(to right, #36384a, #36384a)">
<template #title>视频预览</template>
<template #wbtn>
<a class="wbtn" title="另存为" @click="handleDownLoad"><i class="iconfont icon-down"></i></a>
</template>
</WinBar>
底部tabbar组件,则是采用了沉浸式透明风格,加上视频播放进度条。
<tabbar
bgcolor="linear-gradient(to bottom, transparent, rgba(0,0,0,.75))"
color="rgba(245,255,235,.75)"
activeColor="#fa367a"
fixed
/>
vite.js配置文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// base: '/',
// mode: 'development' //production
build: {
/**
* 输出文件目录
* @default dist(默认)
*/
// outDir: 'target',
},
// 环境配置
server: {
// 端口
port: 3000,
// 是否浏览器自动打开
open: false,
// 开启https
https: false,
// 代理配置
proxy: {
// ...
}
},
resolve: {
// 设置路径别名
alias: {
'@': path.resolve(__dirname, '../src'),
}
}
})
vite2+electron打包配置文件
在项目根目录新建一个electron-builder.json
打包配置文件。
/**
* @Desc vite2+electron打包配置
* @Time andy by 2021-03
* @About Q:282310962 wx:xy190310
*/
{
"productName": "electron-douyin", //项目名称 打包生成exe的前缀名
"appId": "com.example.electrondouyin", //包名
"compression": "maximum", //store|normal|maximum 打包压缩情况(store速度较快)
"artifactName": "${productName}-${version}-${platform}-${arch}.${ext}", //打包后安装包名称
// "directories": {
// "output": "build", //输出文件夹(默认dist_electron)
// },
"asar": false, //asar打包
// 拷贝静态资源目录到指定位置(如根目录下的static文件夹会拷贝至打包后的dist_electron/win-unpacked/resources/static目录)
"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": "ElectronDouYin", //桌面快捷键图标名称
},
"win": {
"icon": "/static/shortcut.ico", //图标路径
}
}
okey,基于vite2/vue3+electron12跨平台仿抖音短视频应用实例就分享到这里。
electron+vue3.x聊天室|electron跨端仿QQ聊天实例
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: