title: 手动搭建electron项目
author: lamente
tags: vue
入门式跨平台桌面应用开发
手动搭建Electron项目
渲染进程
首先文件夹里新建生成渲染进程 index.html,使用命令:
输入 html:5回车
在<body> </body>里写入想要的内容
主进程
其次新建主进程main.js文件,在此项目目录中打开cmd,输入命令
npm init --yes
由此生成package.json文件,注意此时json的入口要与主进程一致,因此最后生成json文件,正确入口如下:
"main": "main.js"
css
新建一个.css文件。例如 base.css,在css中可改写信息参数如颜色等,注意此时要在.html中引入link模块以关联到.css。如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css"><!----关联引用index.css文件-->
</head>
<body>
<h2>This is a electron item</h2>
</body>
</html>
方便书写
在main.js里写命令时,为方便书写提示,可在下方的终端窗口再次安装electron,虽然全局已经安装过,命令如下:
cnpm i electron --save-dev
集成 Eslint:
为有代码报错提示在cmd中安装eslint,全局安装,只需要一次,代码是
cnpm install -g eslint
而后在项目中打开cmd输入:
eslint --init
选择默认第二项>To check syntax and find problems,回车选择commonjs,回车选择第三项None of these,回车默认选no,回车选node(也可broswer),回车默认javascript,回车选择no(也可yes)
创建完毕
调用node.js
关于在渲染进程(.html)中直接使用node.js,主进程(.js)原本就可以调用
在实例化的window下添加如下命令
webPreferences: {
nodeIntegration: true
}//没有集成node的话,require这样的关键字就无法使用
添加
在渲染进程中添加按钮和文本框:
<button id="btn">获取随机题库</button>
<textarea id="textarea" cols="40" rows="20"></textarea>>
<script src="./renderer/index.js"></script><!---renderer文件夹下的index.js文件(可替换)--->
与此同时在index.html中添加能实现按钮,文本框功能的代码。以点击按钮后文本框中显示json文件为例:
const fs =require("fs");
<!--Node.js 文件系统封装在 fs 模块是中,它提供了文件的读取、写入、更名、删除、遍历目录、链接等POSIX 文件系统操作-->
window.onload=()=>{
var btnDom=document.querySelector("#btn"); <!---获取节点--->
var textareaDom = document.querySelector("#textarea");
btnDom.onclick=()=>{ <!---接听事件--->
//alert("确定生成?")
fs.readFile('package.json',(err,data)=>{ <!--接听正误-->
if(err){ <!--判段是否读取错误-->
console.log(err)
return;
}
textareaDom.innerHTML=data
})
}
}
使用第三方模块 [^以MD5为例]
cnpm install MD5 --save //模块类 保存在Dependencies
cnpm install MD5 --save -dev //工具类 保存在devDependencies
在main.js里使用模块,在main.js中添加 const md5=require(“md5”);在createwindow语句下添加console.log(md5(“123456”));注意在主进程中打印的要在当前终端查看
在index.js里使用,首先在渲染进程中
webPreferences: {
nodeIntegration: true
}
而后直接在渲染进程中添加 const md5=require(“md5”),在window,onload中加上console.log(md5(“123456”));渲染进程中的打印要在运行跳出的窗口中看,在网页源码中