一、專案介紹
基於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 協議》，轉載必須註明作者和本文連結