程序员就得会偷懒，重写了一个electron小工具，解放美女运营老师！
前言
之前只是写了一个脚本，本地运行，通过读取文件流获取文件数据，格式化对应数据，运营老师也不会安装node，还是需要我去操作。现在我用electron生成一个桌面应用直接生成后复制json，去配置，全程不需要我参与了。
之前的脚本
const fs = require('fs')
const csv = require('csv-parser');
const csvfilePath = './xxx.csv';
const uidsfilePath = './uids.json';
const results = [];
let newarr = [];
let lineCount = 0;
fs.createReadStream(csvfilePath)
.pipe(csv({ headers: true }))
.on('data', (data) => {
results.push(data);
lineCount++;
})
.on('end',async () => {
console.log(results[0])
await format(results);
fs.writeFile(uidsfilePath, JSON.stringify(newarr), () => {
console.log('done')
})
});
const format = (results) => {
newarr = results.map(item => {
if(item._0 === 'key' || item._1 === 'value') {
return {}
}
return {
label: `${item._1}-${item._0}`,
value: item._1
}
})
}
electron
简介
Electron 是一个用于使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发，基于 Chromium 和 Node.js。这意味着开发者可以利用他们熟悉的 Web 开发技术来创建桌面应用。
优势
- 跨平台开发
- 快速开发迭代
- 丰富的生态系统
架构与核心概念
- 主进程和渲染进程：
主进程：主进程是整个 Electron 应用的核心，它负责创建和管理应用程序的窗口。主进程通过BrowserWindow模块来创建浏览器窗口，这个窗口就是用户看到的应用界面的载体。
渲染进程：渲染进程主要负责渲染应用的用户界面。每个BrowserWindow都有自己独立的渲染进程，它使用 Chromium 浏览器内核来解析 HTML 和 CSS 文件，执行 JavaScript 代码。
- 进程间通信（IPC）：
由于 Electron 应用有主进程和渲染进程之分，进程间通信就显得尤为重要。Electron 提供了ipcMain（用于主进程）和ipcRenderer（用于渲染进程）模块来实现进程间的消息传递。
使用vue3和vite创建vue的项目然后引入electron
安装vite
npm create vite@latest electron-desktop-tool
安装 引入electron&插件
npm install -D electron // electron
npm install -D electron-builder //用于打包可安装exe程序和绿色版免安装exe程序
npm install -D electron-devtools-installer // 调试
npm install -D vite-plugin-electron // vite构建插件
创建主进程
在vue 同级src目录下，创建src-electron 文件夹 新建main.js
// src-electron/main.js
const { app, BrowserWindow } = require('electron')
const { join } = require('path')
// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
// 创建浏览器窗口时，调用这个函数。
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
title: 'electron-vite',
// icon: join(__dirname, '../public/logo.ico'),
})
// win.loadURL('http://localhost:3000')
// development模式
if(process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL)
// 开启调试台
win.webContents.openDevTools()
}else {
win.loadFile(join(__dirname, '../dist/index.html'))
}
}
// Electron 会在初始化后并准备
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
配置插件入口
在vite.config.ts中配置vite-plugin-electron 插件入口
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
electron({
// 主进程入口文件
entry: './src-electron/main.js'
})
],
/*开发服务器选项*/
server: {
// 端口
port: 3000,
}
})
配置package.json
在package.json 新增入口文件 "main": "./src-electron/main.js",
原神启动 emmm electron启动
运行 npm run dev 启动项目
打包配置
首先配置一下打包的命令,在package.json "scripts"里面配置这个打包命令
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"postinstall": "patch-package",
"electron:build": "vite build && electron-builder",
"pack32": "vite build && electron-builder --win --ia32",
"pack64": "vite build && electron-builder --win --x64"
},
同样package.json 需要添加打包配置
"scripts": {
...
},
"build": {
"productName": "ElectronDeskTopTool",
"appId": "dyy.dongyuanwai",
"copyright": "dyy.dongyuanwai © 2024",
"compression": "maximum",
"asar": true,
"directories": {
"output": "release/"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"perMachine": true,
"deleteAppDataOnUninstall": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "ElectronDeskTopTool"
},
"win": {
"icon": "./public/logo.ico",
"artifactName": "${productName}-v${version}-${platform}-setup.${ext}",
"target": [
{
"target": "nsis"
}
]
},
"mac": {
"icon": "./public/logo.ico",
"artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
},
"linux": {
"icon": "./public/logo.ico",
"artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
}
},
然后npm run electron:build
页面效果
后续还会继续更新~
作者：一起重学前端
来源：juejin.cn/post/7445289957893259327
来源：juejin.cn/post/7445289957893259327
