不要让自己的上限成为你的底线
本来以为有万字的。。没想到才堪堪近6000字。为了水文的嫌疑，只挑了重点的地方讲，比如component内的组件就挑了右键弹窗去说明，建议在看本文的时候边查看项目，有不懂的可以在下方评论，谢谢。
github
github: https://github.com/heiyehk/electron-vue3-inote
包下载
release: https://github.com/heiyehk/electron-vue3-inote/releases
接上篇配置篇 【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';
import main from '../views/main.vue';
const routes: Array<RouteRecordRaw> = [
{
path: 'http://www.likecs.com/',
name: 'main',
component: main,
children: [
{
path: 'http://www.likecs.com/',
name: 'index',
component: () => import('../views/index.vue'),
meta: {
title: 'I便笺'
}
},
{
path: '/editor',
name: 'editor',
component: () => import('../views/editor.vue'),
meta: {
title: ''
}
},
{
path: '/setting',
name: 'setting',
component: () => import('../views/setting.vue'),
meta: {
title: '设置'
}
}
]
}
];
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 = 'http://www.likecs.com/', 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
<transition>
<keep-alive>
<router-view />
</keep-alive>
</transition>
上面的这种写法在vue3中会在控制台报异常，记不住写法的可以看看控制台
