初始化项目
npm init
修改package.json
{ “name”: “trans”, “version”: “1.0.0”, “main”: “main.js”, “license”: “MIT”, “scripts”: { “start”: “electron .”, “build”:“electron-packager . --overwrite --icon=./favicon.ico” }, “devDependencies”: { “electron”: “^9.0.5” } }
安装electron依赖
因为之前我们在package.json已经编辑过了devDependencies，所以我们直接。
npm install
创建编辑文件
分别创建两个文件index.html和main.js。 appid 与 key 需要自己去申请。这是网址：百度翻译编辑平台
index.html
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>翻译小工具</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<style>
input,textarea,select{ border: 1px solid #ccc;border-radius: 4px;font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif; }
input { width: 100%; padding: 10px;box-sizing: border-box; margin: 20px 0;}
textarea { display: block;padding: 10px ; margin-top: 20px; width: 100%; height: 200px; text-align: left; resize: none; box-sizing: border-box; overflow: auto; }
button{ width: 80px; height: 40px;border: none; background: #FFB90F; color: white; font-size: 14px; text-align: center; line-height: 40px; border-radius: 4px; cursor: pointer; margin-bottom:20px; }
button:hover{ filter:brightness(110%); }
button:active{ filter:brightness(60%); }
select{padding: 10px;}
.box { width: 750px; height: 600px; margin: 0 auto; }
</style>
</head>更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119815937
