【electron+vue3+ts实战便笺exe】二、electron+vue3开发内容

不要让自己的上限成为你的底线

本来以为有万字的。。没想到才堪堪近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: '/',
    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: {
          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 = '/', 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 name="fade">
  <keep-alive>
    <router-view />
  </keep-alive>
</transition>

上面的这种写法在vue3中会在控制台报异常，记不住写法的可以看看控制台