从零开始使用Electron + AngularJS 开发桌面应用 （一） HelloWorld
写在前面：本人技术一般，此文章为本人边学边写而成，难免出现差错与技术方面不完美的情况，仅供参考。如有错误，欢迎指正。
能翻墙就尽量翻墙，国内网络你懂的
本文以Windows开发平台为基础写的，MAC用户仅供参考
1.首先安装 node
安装完成以后在cmd里运行 node -v 检测安装是否成功。
2.安装 Electron
使用npm 安装 Electron:
npm install --g electron-prebuilt 安装完成后运行 electron -v 检查是否安装成功
3.一个简单的Electron程序
首先，切换到应用开发根目录，我的在
D:/LvAllCode/electron/MC 然后创建Electron简单文件结构
在根目录下使用 npm init 命令创建 package.json 文件，根据提示填写就行，
npm install --save-dev electron-prebuilt 最后差不多是这个样子
{ "name": "mclans", "version": "1.0.0", "description": "mc_login_app", "main": "app/main.js", "dependencies": { "electron-prebuilt": "^0.37.3" }, "devDependencies": { "electron-prebuilt": "^0.37.3" }, "scripts": { "test": "hello", "start": "electron ." }, "author": "yupeglv", "license": "ISC" } 然后在根目录下创建 app 文件夹，在 app/ 下创建main.js,内容如下：
// 应用控制模块 var app = require("app") // 创建窗口模块 var BrowserWindow = require('browser-window'), // 主窗口 var mainWindow = null; // 初始化并准备创建主窗口 app.on('ready', function () { // 创建一个宽800px 高700px的窗口 mainWindow = new BrowserWindow({ width: 800, height: 700, }); // 载入应用的inde.html mainWindow.loadUrl('file://' + __dirname + '/html/index.html'); // 打开开发工具界面 mainWindow.openDevTools(); // 窗口关闭时触发 mainWindow.on('closed', function(){ // 想要取消窗口对象的引用， 如果你的应用支持多窗口，你需要将所有的窗口对象存储到一个数组中，然后在这里删除想对应的元素 mainWindow = null }); }); 然后在 app/html 下创建index.html文件，内容如下：
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>我的世界</title> </head> <body> <span style="color:#fff;">Hello World</span> </body> </html>最后，项目整体文件目录大概是这个样子的：
4.启动你的项目
在根目录下，命令行输入 electron . (注意有个点) 或者输入 npm start (需要在 package.json 中配置"
scripts": {"start": "electron ."})
5.配置 VS Code 开发环境
安装 glup ： npm install --save-dev gulp
根目录下创建 gulpfile.js 配置文件,内容如下：
// 获取依赖 var gulp = require('gulp'), childProcess = require('child_process'), electron = require('electron-prebuilt'); // 创建 gulp 任务 gulp.task('run', function () { childProcess.spawn(electron, ['.'], {stdio:'inherit'}); }); 运行 gulp 任务： gulp run
又看到了熟悉的界面了！！
在VS Code里打开你的工程：
摁下快捷键 ctrl+shift+b ,第一次启动的时候会提示你配置 task 文件，点击 Configure Task Runner
之后VS Code会自动在 ./.vscode 目录下创建一个 tasks.json 配置文件，我们来编辑一下这个文件：
{ "version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": [ "--no-color" ], "tasks": [ { "taskName": "run", "args": [], "isBuildCommand": true }] } 保存，之后再摁下 ctrl+shift+b 就可以直接运行我们的程序了。
6.使用VS Code调试
（此部分仅供参考，因为我自己没跑成功o(>﹏<)o，如有知道为什么的还请大神告知）
点击 DEBUG 界面的设置按钮
VS Code自动在 ./.vscode 目录下创建了 launch.json
我们不需要启动 main.js 的配置 所以移除它，现在 launch.json 应该如下所示：
{ "version": "0.2.0", "configurations": [ { "name": "Attach", "type": "node", "request": "attach", "port": 5858, "address": "localhost", "restart": false, "sourceMaps": false, "outDir": null, "localRoot": "${workspaceRoot}", "remoteRoot": null } ] } 更改之前创建的 gulpfile.js 文件
gulp.task('run', function () { childProcess.spawn(electron, ['--debug=5858','.'], {stdio:'inherit'}); }); 在调试面板中选择 Attach 然后点击 RUN 按钮即可开始调试。
至此我们的第一个Electron程序就开发完成了，下一节我们看如何打包成执行程序
正文到此结束
热门推荐
相关文章
近期评论
-
你这基本没有更新呀，最近文章显示还是2019年的文章。不符合要求哈
-
关键词：慕云博客 链接：https://www.lilun.me 描述：分享原创文字的个人博客
-
-
-
可以提供一下源码吗
-
不是商业站，鸡娃学习笔记
-
-
-
-
听他们说很厉害的样子
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
