Electron环境搭建入门

最新推荐文章于 2024-04-23 13:55:08 发布

天涯问客

最新推荐文章于 2024-04-23 13:55:08 发布

阅读量584

点赞数

分类专栏：前端技术 GUI Electron 文章标签：前端 electron javascript node.js npm

本文链接：https://blog.csdn.net/tianyawenke/article/details/107107436

版权

前端技术同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

GUI

1 篇文章 0 订阅

订阅专栏

Electron

1 篇文章 0 订阅

订阅专栏

最近electron挺火的，用它可以做到：使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序！

别问我它有多火？看星星吧：https://github.com/electron/electron

看它的应用：http://www.electronjs.org/apps

说白了，学会用这个玩意儿，可以让你前端工程师摇身一变，成为GUI桌面级开发，并且天生跨平台！！！

electron官网文档：http://www.electronjs.org/docs

我是一名后端工程师，虽然这技术是前端的，但是它那么牛，弄得我手痒痒啊，忍不住，搭建了一下前端环境，以备我再手痒痒的时候小手那么一敲，一个富有创意的GUI就出来了~~

安装笔记：

1、安装nodejs最新LTS版本；

2、管理员打开命令窗口，依次执行下列命令（主要使用国内淘宝的npm镜像源）：

#使用淘宝源
npm config set registry http://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/mirrors/node
npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
npm config set SASS_BINARY_SITE='https://npm.taobao.org/mirrors/node-sass'
#下面3条是 nrm，可以不装
npm install -g nrm
nrm use taobao
nrm test taobao
#安装cnpm、electron
npm install -g cnpm
npm install -g electron

查看安装效果：

3、从GitHub下载electron-quick-start，git clone https://github.com/electron/electron-quick-start，我本地目录：D:\WorkSpace\Test\Electron\electron-quick-start

cd到electron-quick-start，执行命令：

electron .

打开新窗口表示搭建环境成功：

4、好了，不用它官网的代码了，就一个helloworld，还敲那么多代码，是不是前端工程师都习惯浪费代码啊，我后端脑回路表示可以精简一下，步骤如下（全程不用IDE）：

1）新建一个文件夹，根据需要命名即可，我的demo路径：D:\WorkSpace\JetBrains\WebStorm\demo，

2）在demo目录下，创建index.html，内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
    你好啊！！！
</body>
</html>

3）在demo目录下，创建main.js，内容：

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var win = null;
app.on('ready', function () {
    win = new BrowserWindow({
        width: 800, height: 400
    });
    win.loadFile('index.html');
    win.on('closed', ()=>{
        win = null;
    })
})

4）在demo下，执行npm命令进行初始化：npm init --yes,执行后，会生成package.json文件，内容如下：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5）cmd命令行窗口输入：electron .，弹出窗口表示本地创建成功：

OK，到此已经将基础环境搭建完毕，可以像调试web程序那样调试开发GUI了！

另外，我个人的环境，没法用Electron-Forge脚手架，所以我才用的npm init --yes初始化，大家有啥解决办法没，欢迎留言。

天涯问客

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Electron环境搭建入门

最近electron挺火的，用它可以做到：使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序！别问我它有多火？看星星吧：https://github.com/electron/electron看它的应用：http://www.electronjs.org/apps说白了，学会用这个玩意儿，可以让你前端工程师摇身一变，成为GUI桌面级开发，并且天生跨平台！！！electron官网文档：http://www.electronjs.org/docs1、安装no...
复制链接

扫一扫