1.安装 Electron 首先要安装Node.js     (安装方法:https://www.cnblogs.com/inkwhite/p/9685520.html)

我这里已经安装好了。

2:安装Electron

C:\Users\Administrator>npm install --g electron-prebuilt

安装完成

1、找到你的前端网页项目文件夹,新建 package.json、main.js、index.html 三个文件(注:其中的 index.html 是你的网页首页)

你的项目目录/
├── package.json
├── main.js
└── index.html

2、在 package.json 中添加如下内容

{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"
}

3、在 main.js 中添加下面的内容,这个 main.js 文件就是上面 package.json 中的 "main"键 的值,所以可根据需要修改

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url') // Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
})) // Open the DevTools.
// win.webContents.openDevTools() // Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
} // This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow) // Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
}) app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
}) // In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

4、如果你的网页首页的文件名不是 “index.html”,那么请在 main.js 中将其中的 'index.html' 修改为你的网页首页名

5、打开 DOS,cd 到你的项目目录,执行 npm install electron-packager -g全局安装我们的打包神器

npm install electron-packager -g

6.打包

electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --version-electron 版本号 --overwrite --ignore=node_modules

electron-packager . app --win --out presenterTool --arch=x64 --electron-version 1.4.13 --overwrite --ignore=node_modules

Window10 Electron 开发环境搭建及打包exe程序的更多相关文章

  1. 1、Window10 Electron 开发环境搭建

    1:首先安装nodejs C:\Users\yan>node -v v4.5.0 2:安装Electron C:\Users\yan>npm install --g electron-pr ...

  2. electron开发环境搭建

    开发环境 Node.js Vscode vscode安装Debugger for Chrome 创建开发目录(也是解决方案) 执行初始化命令,创建electronpicture工程,并添加main.j ...

  3. 1. React介绍 React开发环境搭建 React第一个程序

    什么是 React         React 是 Facebook 发布的 JavaScript 库,以其高性能和独特的设计理念受到了广泛关注. React的开发背景         Faceboo ...

  4. spark本地开发环境搭建及打包配置

    在idea中新建工程 删除新项目的src,创建moudle 在父pom中添加spark和scala依赖,我们项目中用scala开发模型,建议scala,开发体验会更好(java.python也可以) ...

  5. Ionic2开发环境搭建、项目创建调试与Android应用的打包、优化

    Ionic2开发环境搭建.项目创建调试与Android应用的打包.优化. windows下ionic2开发环境配置步骤如下: 下载node.js环境,稳定版本:v6.9.5 下载android stu ...

  6. android开发环境搭建日记和嵌入式Android开发环境初探

    非常感谢博客园的各位,按照你们的博文,还有利用百度和谷歌逐渐建立了android的开发环境,只是给自己备份参考查看,看过的人可以忽略这篇文章. 本文章大部分参考了:http://www.cnblogs ...

  7. 五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程

      在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环境的搭 ...

  8. Cocos2dx-3.0版本 从开发环境搭建(Win32)到项目移植Android平台过程详解

    作为重量级的跨平台开发的游戏引擎,Cocos2d-x在现今的手游开发领域占有重要地位.那么问题来了,作为Cocos2dx的学习者,它的可移植特性我们就需要掌握,要不然总觉得少一门技能.然而这个时候各种 ...

  9. Android开发环境搭建(转)

    转载:http://www.cnblogs.com/zoupeiyang/p/4034517.html#1 引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想 ...

随机推荐

  1. 关于YARN的基本结构

  2. 【转】msyql使用-用户创建/权限配置

    MySQL 默认有个root用户,但是这个用户权限太大,一般只在管理数据库时候才用.如果在项目中要连接 MySQL 数据库,则建议新建一个权限较小的用户来连接. 在 MySQL 命令行模式下输入如下命 ...

  3. Hyper-V迁移---委派

    在Hyper-V管理器中-实时迁移,选择“使用kerberos",如图1所示 在AD中,找到Hyper-V宿主,分别设置委派,如图2所示    图1               图2

  4. Docker_1 安装Docker-CE

    安装 免sudo运行docker命令 ustc mirrors service failed 安装 Docker-CE 安装过程参考官网,Ubuntu中如下: ## 1. 从仓库安装 $ sudo a ...

  5. RunDll32.exe 详解及[Windows批处理]清除IE缓存

    Rundll32命令详解 文件作用:执行32位DLL文件中的内部函数 位置:X:(当前系统分区)\windows\system32 命令语法: Rundll32.exe DLLname,Functio ...

  6. with优化妙用

    --语法: /*with   alias_name1 as    (subquery1),  alias_name2 as    (subQuery2),  ……  alias_nameN as   ...

  7. 判断ORACLE启动时使用spfile还是pfile

    自Oracle 9i以后启动的时候默认使用的初始化文件是spfile,我们可以通过如下三种方式来判断是SPFILE还是PFILE方式启动数据库.1.show parameter spfile2.sho ...

  8. 条件独立(conditional independence) 结合贝叶斯网络(Bayesian network) 概率有向图 (PRML8.2总结)

    转:http://www.cnblogs.com/Dzhouqi/p/3204481.html本文会利用到上篇,博客的分解定理,需要的可以查找上篇博客 D-separation对任何用有向图表示的概率 ...

  9. 如何写Paper

    如何写文章,如何写好文章,是每一个科研工作者想弄懂或者已经弄懂了的问题.剑桥大学某研究人员分享了他的写作思路. 我从该视频中学到了以下几点经验: 正确的顺序是:Idea——>Write——> ...

  10. BZOJ3312:[USACO]No Change(状压DP)

    Description Farmer John is at the market to purchase supplies for his farm. He has in his pocket K c ...