部落格園Logo
首頁
新聞
博問
專區
快閃記憶體
班級

程式碼改變世界
搜尋
註冊
登入
heiyehk 葉子
部落格園 首頁 新隨筆 聯絡 管理 訂閱訂閱 隨筆- 2 文章- 0 評論- 1
【electron+vue3+ts實戰便箋exe】二、electron+vue3開發內容
不要讓自己的上限成為你的底線

本來以為有萬字的。。沒想到才堪堪近6000字。為了水文的嫌疑，只挑了重點的地方講，比如component內的元件就挑了右鍵彈窗去說明，建議在看本文的時候邊檢視專案，有不懂的可以在下方評論，謝謝。

github
github: https://github.com/heiyehk/electron-vue3-inote

接上篇配置篇 【electron+vue3+ts實戰便箋exe】一、搭建框架配置，這裡更新了一下vue3的版本3.0.4，本篇文章只講開發內容，主要還是vue3方面，長文警告。ps:smartblue這個主題好好看。。。

router
增加meta中的title屬性，顯示在軟體上方頭部

import { createRouter, createWebHashHistory } from ‘vue-router’;
import { RouteRecordRaw } from ‘vue-router’;

const routes: Array = [
{
path: ‘/’,
name: ‘main’,
component: main,
children: [
{
path: ‘/’,
name: ‘index’,
component: () => import(’…/views/index.vue’),
meta: {
title: ‘I便箋’
}
},
{
path: ‘/editor’,
name: ‘editor’,
component: () => import(’…/views/editor.vue’),
meta: {

const router = createRouter({
history: createWebHashHistory(process.env.BASE_URL),
routes
});

export default router;
utils
/* eslint-disable @typescript-eslint/ban-types */

import { winURL } from ‘@/config’;
import { BrowserWindow, remote } from ‘electron’;

type FunctionalControl = (this: any, fn: any, delay?: number) => (…args: any) => void;
type DebounceEvent = FunctionalControl;
type ThrottleEvent = FunctionalControl;

// 防抖函式
export const debounce: DebounceEvent = function(fn, delay = 1000) {
let timer: NodeJS.Timeout | null = null;
return (…args: any) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
};

// 節流函式
export const throttle: ThrottleEvent = function(fn, delay = 500) {
let flag = true;
return (…args: any) => {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, args);
flag = true;
}, delay);
};
};

// 建立視窗
export const createBrowserWindow = (bwopt = {}, url = ‘/’, devTools = true): BrowserWindow | null => {
let childrenWindow: BrowserWindow | null;
childrenWindow = new remote.BrowserWindow(bwopt);

if (process.env.NODE_ENV === ‘development’ && devTools) {
childrenWindow.webContents.openDevTools();
}
childrenWindow.loadURL(${winURL}/#${url});
childrenWindow.on(‘closed’, () => {
childrenWindow = null;
});
return childrenWindow;
};

// 過渡關閉視窗
export const transitCloseWindow = (): void => {
document.querySelector(’#app’)?.classList.remove(‘app-show’);
document.querySelector(’#app’)?.classList.add(‘app-hide’);
remote.getCurrentWindow().close();
};

// uuid
export const uuid = (): string => {
const S4 = () => {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return S4() + S4() + ‘-’ + S4() + ‘-’ + S4() + ‘-’ + S4() + ‘-’ + S4() + S4() + S4();
};
main.vue
main.vue檔案主要是作為一個整體框架，考慮到頁面切換時候的動效，分為頭部和主體部分，頭部作為一個單獨的元件處理，內容區域使用router-view渲染。
html部分，這裡和vue2.x有點區別的是，在vue2.x中可以直接

// bad





上面的這種寫法在vue3中會在控制檯報異常，記不住寫法的可以看看控制檯