electron跳坑指南 1(electron的安裝)

時間 2019-11-07

標籤 electron 指南安裝简体版

原文原文鏈接

前言:

對於electron的介紹你們能夠本身百度,這個使用寫客戶端軟件很爽,寫下心得以便於你們學習和使用!php

我本地開發環境爲:Mac OS
目錄在 :/Volumes/lee/electron/
開發工具:phpstormcss

第一章介紹`electron`的安裝:

對於electron 的安裝方式有不少html

第1種方式:

很是的簡單就是使用npm安裝git

npm install -g electron //全局安裝 electron

第2種方式:

git clone一個倉庫github

# 克隆項目:
git clone https://github.com/electron/electron-quick-start.git

# 進入項目:
cd ./electron-quick-start

# 安裝依賴而且運行:
npm install

npm start

第3種方式:

手動建立electron項目
咱們在 /Volumes/lee/electron/目錄下面建立一個 electron01目錄
能夠使用IDE建立也能夠使用 mkdir electron01建立項目目錄
以後使用IDE打開該項目
爲了更好的使用代碼提示,咱們能夠在改項目下執行:npm

npm install electron

在該項目目錄中建立 index.html main.js 2個文件
index.html 咱們暫且稱做爲頁面文件吧能夠在裏面寫css html 等
在main.js中建立如下代碼:json

var electron = require('electron'); //electron 對象的引用

const app = electron.app;   //BrowserWindow 類的引用

const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;

/**
 * 監聽應用準備完成的事件
 */
app.on('ready', function () {
    //建立窗口
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    mainWindow.loadFile('index.html');
    mainWindow.on('closed', function () {
        mainWindow = null;
    })
});

/**
 * 監聽全部窗口關閉的事件
 */
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

以後使用 npm init 建立package.json 的文件
package.json 爲:app

{
  "name": "electron01",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "electron": "^2.0.7"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.html 的代碼爲:electron

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
這是一個頁面
</body>
</html>

以後使用 electron . 來啓動項目就能夠運行了phpstorm

第4種方式:

使用官方提供的腳手架工具 electron-forge建立項目
electron-forge至關於electron的一個腳手架，能夠讓咱們更方便的建立、運行、打包electron項目。
咱們在 /Volumes/lee/electron/執行

首先全局安裝 electron-forge

npm install -g electron-forge    

#或者能夠用
cnpm install -g electron-forge

建立項目:

electron-forge init electron02

進入到項目裏面

cd ./electron02

運行項目

npm start

這樣就完成了!

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。