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>


vue3+electron实现自定义顶部导航菜单

底部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打包配置文件。
Electron12+Vite2整合vue3.0直播/聊天/小视频|vue3+vant3+electron跨平台应用

/**
 * @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 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 1

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
25
粉丝
29
喜欢
73
收藏
42
排名:233
访问:1.9 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
1
vue聊天室
2
vue仿微信
1
vue即时通讯
1
vue聊天IM
1
vue网页版
1
vue仿微信网页端
1
vue聊天pc端
1
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
1
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1