# 前提
这篇文章写的时候代码还比较粗糙，在Windows端可能无法使用，会有路径问题，最新版本已经将代码重构，解决了很多问题，不过主要思想变化不是很大，想要查看代码的可以前往仓库
# 起因
趁着学习 Vscode 插件开发的机会，我将之前使用 Electron 技术构建的 Subversion小助手 再重构一遍，由于 Electron 构建出的包体积太大，优化过后仍然有 85M 左右，同时我自己平时开发项目也比较喜欢用 Vscode 进行，能够统一起来自然是最好不过的了。
# 项目地址
GitHub - cloudhao1999/biangengdan
# 开始
先来看一下插件的最终效果：
首先是配置页面，该插件允许用户配置一个前置的路径前缀，用于路径拼接与文件夹的生成
:has()CSS 伪类代表一个元素，其给定的选择器参数（相对于该元素的 :scope）至少匹配一个元素。+号代表只会匹配紧跟着当前元素的元素。
现在可以通过:has 在必填项的前面加上红色的星号
label:has(+input:required)::before {
content: "*";
color: red;
}
2
3
4
# 组件介绍
这是一个基于el-table封装，使用json数据配置式的表格组件，支持表格列排序、列筛选、新增、刷新、删除等常用操作，可传入插槽。
# 引入组件
import { App } from "vue";
import CTable from "./CTable.vue";
export function setupRegisterGlobComp(app: App) {
app.component("CTable", CTable);
}
2
3
4
5
6
# 参数配置
| 额外参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| columns | CTableColumn | 必填 | 表格核心配置项 |
| tableData | Any | 必填 | 表格数据 |
| showHeader | Boolean | 非必填 | 用于展示顶部操作栏 |
# 一、开发环境与打包后的不一致问题
在开发环境跑的好好的，但是打包完会出现找不到模块的问题，我这里使用的pnpm作为包管理器，electron似乎和它不是很适配，所以需要新建一个.npmrc文件，在里面加上一行
shamefully-hoist=true
# 二、Mac环境执行脚本运行路径问题
我在开发Electron应用的过程中需要使用node执行shell脚本，但是在打包后执行环境会出现问题，提示找不到path环境变量，这个时候就需要一个包fix-path，它能够正确的矫正执行环境错误的问题，值得一提的是，它的4.0版本抛弃了CommonJS的导入导出方式，如果需要在渲染进程使用require语法导入的话，需要降级到3.0.0版本使用
# 组件介绍
这是一个基于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);
}
2
3
4
5
6
# 参数配置
| 额外参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| options | CFormProps | 必填 | 表单核心配置项 |
| searchDisabled | Boolean | 非必填 | 是否禁用搜索按钮 |
| resetDisabled | Boolean | 非必填 | 是否禁用重置按钮 |
| model(v-model) | Object | 必填 | 表单内容双向绑定 |
| loading | Boolean | 非必填 | 用于加载 |
| showExpand | Boolean | 非必填 | 用于选项过多开启折叠 |
| showReset | Boolean | 非必填 | 是否启用重置按钮 |
# 组件介绍
这是一个基于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);
}
2
3
4
5
6
# 参数配置
| 额外参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| options | CFormProps | 必填 | 表单核心配置项 |
| gutter | Number | 非必填 | 间距 |
| colSpan | Object | 非必填 | 用于表单布局 |
| value(v-model) | Object | 必填 | 表单内容双向绑定 |
| loading | Boolean | 非必填 | 用于加载 |
# 认识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')
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
在main.js中，app监听ready状态，开启一个新的窗口，加载index.html文件，这里还开启了第二个窗口，它是主窗口的子窗口，根据parent属性指定，nodeIntegration属性指定在js文件中可以使用node环境提供的API，不过在最新的20版本中，还需要把contextIsolation选项置为false才可以使用。
上一页
下一页