首页 > 技术文章 > electron安装

tristers 2020-01-10 10:50 原文

Electron是一个能让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的程序。
呃呃,官方话不理解?好吧,说白了就是一个集成nodejs+谷歌浏览器的壳子,支持打包成在windows,OSX系统直接安装使用的桌面程序。
详细介绍看官方,来来来,开撸!
1.安装electron:
git clone https://github.com/electron/electron-quick-start
2.进入electron-quick-start :
cd electron-quick-start
3.安装依赖:
npm install
4.运行electron:
npm start
(git上有资源,要是你想自己敲代码了解一下,往下看)

-------------我是一条尴尬我分界线-----------------------------

1.创建文件夹helloword

2.打开终端 cd helloword

3.创建package.json
npm init

4.改一下启动命令:
{
"name": "electron demo",
"version": "1.0.0",
"description": "",
"main": "main.js", //修改为main.js
"scripts": {
"start": "electron ." //增加start命令
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^3.0.10"
}
}

5.npm安装:
npm i electron --save-dev

6.在helloword目录下创建main.js和index.html
a.创建main.js文件
const { app, BrowserWindow } = require('electron')

function createWindow () {
// 创建浏览器窗口
win = new BrowserWindow({ width: 800, height: 600 })

// 然后加载应用的 index.html。
win.loadFile('index.html')
}

app.on('ready', createWindow)
b.创建index.html文件
(这边html随便写,就是看效果用)
-------------我又是一条尴尬我分界线-----------------------------

到这里,我们所有的准备工作都完成了,接下来就是运行它!

npm run start (sorry,没图)

推荐阅读