# 前提

这篇文章写的时候代码还比较粗糙，在Windows端可能无法使用，会有路径问题，最新版本已经将代码重构，解决了很多问题，不过主要思想变化不是很大，想要查看代码的可以前往仓库

# 起因

趁着学习 Vscode 插件开发的机会，我将之前使用 Electron 技术构建的 Subversion小助手 再重构一遍，由于 Electron 构建出的包体积太大，优化过后仍然有 85M 左右，同时我自己平时开发项目也比较喜欢用 Vscode 进行，能够统一起来自然是最好不过的了。

# 项目地址

GitHub - cloudhao1999/biangengdan

# 开始

先来看一下插件的最终效果：

首先是配置页面，该插件允许用户配置一个前置的路径前缀，用于路径拼接与文件夹的生成

# 缘由

自己写了一个督促下班的Vscode插件下班了吗，下班了吗 - Visual Studio Marketplace

插件可以读取用户的配置，实现例如上下班时间、下班前几分钟提醒等

:has()CSS 伪类代表一个元素，其给定的选择器参数（相对于该元素的 :scope）至少匹配一个元素。+号代表只会匹配紧跟着当前元素的元素。

现在可以通过:has 在必填项的前面加上红色的星号

label:has(+input:required)::before {
  content: "*";
  color: red;
}

# 组件介绍

这是一个基于el-table封装，使用json数据配置式的表格组件，支持表格列排序、列筛选、新增、刷新、删除等常用操作，可传入插槽。

# 引入组件

import { App } from "vue";
import CTable from "./CTable.vue";

export function setupRegisterGlobComp(app: App) {
  app.component("CTable", CTable);
}

# 参数配置

# 一、开发环境与打包后的不一致问题

在开发环境跑的好好的，但是打包完会出现找不到模块的问题，我这里使用的pnpm作为包管理器，electron似乎和它不是很适配，所以需要新建一个.npmrc文件，在里面加上一行

shamefully-hoist=true

# 二、Mac环境执行脚本运行路径问题

我在开发Electron应用的过程中需要使用node执行shell脚本，但是在打包后执行环境会出现问题，提示找不到path环境变量，这个时候就需要一个包fix-path，它能够正确的矫正执行环境错误的问题，值得一提的是，它的4.0版本抛弃了CommonJS的导入导出方式，如果需要在渲染进程使用require语法导入的话，需要降级到3.0.0版本使用

# 为什么需要通讯

Electron 使用 IPC (interprocess communication） 在进程之间进行通讯，主进程有渲染进程做不到的能力，他们能使用的API也是完全不一样的。主进程需要通知渲染进程更新，同时渲染进程在进行点击操作时需要主进程进行应用消息通知，所以他们需要沟通。Electron的通知类似于DOM的事件机制，它的底层是基于NodeJS的Emiter实例构造。

# 使用IPC进行通信

首先在index.html中定义一个button按钮和显示消息的span标签

# 组件介绍

这是一个基于c-form封装，使用json数据配置式的搜索组件，支持表单项自动布局，内置多种type，可传入插槽与自定义组件，支持form表单校验与双向绑定v-model

# 引入组件

import { App } from "vue";
import SearchFilter from "./SearchFilter.vue";

export function setupRegisterGlobComp(app: App) {
  app.component("SearchFilter", SearchFilter);
}

# 参数配置

# 组件介绍

这是一个基于el-form封装，使用json数据配置式的表单组件，支持表单项自动布局，内置多种type，可传入插槽与自定义组件，支持form表单校验与双向绑定v-model

# 引入组件

import { App } from "vue";
import CForm from "./CForm.vue";

export function setupRegisterGlobComp(app: App) {
  app.component("CForm", CForm);
}

# 参数配置

# 认识BrowserWindow

在Electron中，我们借助它内置的BrowserWindow 方法来实现窗口的开启

const { app, BrowserWindow } = require('electron')

app.on('ready', () => {
  let mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  })

  mainWindow.loadFile('index.html')

  let secondWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true
    },
    parent: mainWindow
  })

  secondWindow.loadFile('second.html')
})

在main.js中，app监听ready状态，开启一个新的窗口，加载index.html文件，这里还开启了第二个窗口，它是主窗口的子窗口，根据parent属性指定，nodeIntegration属性指定在js文件中可以使用node环境提供的API，不过在最新的20版本中，还需要把contextIsolation选项置为false才可以使用。

# 什么是进程

根据维基百科的介绍，进程是指计算机中已执行的程序，理解一下，通常情况下，你每开启一个程序，计算机中就会多出一个进程，每个进程之间都是相互独立的，就像淘宝的进程不会去读区抖音进程里的数据，但是进程之间也是可以通过一些特殊的方法进行通信，例如IPC。

# 什么是线程

线程是操作系统能够进行运算调度的最小单位。大部分情况下，它被包含在进程之中，是进程中的实际运作单位。如果我们把进程比作一个大车间的话，线程就好比车间中的一个个的工人，他们是可以共享车间内的资源。