electron-vue和electron的區(qū)別

項(xiàng)目不同、性質(zhì)不同。
1、項(xiàng)目不同。electron-vue是vue-cli和electron結(jié)合的項(xiàng)目，electron是單獨(dú)使用vue構(gòu)建的項(xiàng)目，項(xiàng)目不同。
2、性質(zhì)不同。Electron-vue是基于Vue來(lái)構(gòu)造Electron應(yīng)用程序的模板代碼，Electron是使用JavaScript、HTML和CSS構(gòu)建跨平臺(tái)桌面的應(yīng)用程序，性質(zhì)不同。

在Webpack中如何構(gòu)建Electron應(yīng)用

本篇文章主要介紹了Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用，現(xiàn)在分享給大家，也給大家做個(gè)參考。
Electron 可以讓你使用開發(fā) Web 的技術(shù)去開發(fā)跨平臺(tái)的桌面端應(yīng)用，由 Github 主導(dǎo)和開源，大家熟悉的 Atom 和 VSCode 編輯器就是使用 Electron 開發(fā)的。
Electron 是 Node.js 和 Chromium 瀏覽器的結(jié)合體，用 Chromium 瀏覽器顯示出的 Web 頁(yè)面作為應(yīng)用的 GUI，通過(guò) Node.js 去和操作系統(tǒng)交互。 當(dāng)你在 Electron 應(yīng)用中的一個(gè)窗口操作時(shí)，實(shí)際上是在操作一個(gè)網(wǎng)頁(yè)。當(dāng)你的操作需要通過(guò)操作系統(tǒng)去完成時(shí)，網(wǎng)頁(yè)會(huì)通過(guò) Node.js 去和操作系統(tǒng)交互。
采用這種方式開發(fā)桌面端應(yīng)用的優(yōu)點(diǎn)有：
降低開發(fā)門檻，只需掌握網(wǎng)頁(yè)開發(fā)技術(shù)和 Node.js 即可，大量的 Web 開發(fā)技術(shù)和現(xiàn)成庫(kù)可以復(fù)用于 Electron；
由于 Chromium 瀏覽器和 Node.js 都是跨平臺(tái)的，Electron 能做到寫一份代碼在不同的操作系統(tǒng)運(yùn)行。
在運(yùn)行 Electron 應(yīng)用時(shí)，會(huì)從啟動(dòng)一個(gè)主進(jìn)程開始。主進(jìn)程的啟動(dòng)是通過(guò) Node.js 去執(zhí)行一個(gè)入口 JavaScript 文件實(shí)現(xiàn)的，這個(gè)入口文件 main.js 內(nèi)容如下：
const { app, BrowserWindow } = require('electron')
// 保持一個(gè)對(duì)于 window 對(duì)象的全局引用，如果你不這樣做，
// 當(dāng) JavaScript 對(duì)象被垃圾回收， window 會(huì)被自動(dòng)地關(guān)閉
let win
// 打開主窗口
function createWindow() {
// 創(chuàng)建瀏覽器窗口
win = new BrowserWindow({ width: 800, height: 600 })
// 加載應(yīng)用的 index.html
const indexPageURL = `file://${__dirname}/dist/index.html`;
win.loadURL(indexPageURL);
// 當(dāng) window 被關(guān)閉，這個(gè)事件會(huì)被觸發(fā)
win.on('closed', () => {
// 取消引用 window 對(duì)象
win = null
})
}
// Electron 會(huì)在創(chuàng)建瀏覽器窗口時(shí)調(diào)用這個(gè)函數(shù)。
app.on('ready', createWindow)
// 當(dāng)全部窗口關(guān)閉時(shí)退出
app.on('window-all-closed', () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出
// 否則絕大部分應(yīng)用會(huì)保持激活
if (process.platform !== 'darwin') {
app.quit()
}
})主進(jìn)程啟動(dòng)后會(huì)一直駐留在后臺(tái)運(yùn)行，你眼睛所看得的和操作的窗口并不是主進(jìn)程，而是由主進(jìn)程新啟動(dòng)的窗口子進(jìn)程。
應(yīng)用從啟動(dòng)到退出有一系列生命周期事件，通過(guò) electron.app.on() 函數(shù)去監(jiān)聽生命周期事件，在特定的時(shí)刻做出反應(yīng)。 例如在 app.on('ready') 事件中通過(guò) BrowserWindow 去展示應(yīng)用的主窗口。
啟動(dòng)的窗口其實(shí)是一個(gè)網(wǎng)頁(yè)，啟動(dòng)時(shí)會(huì)去加載在 loadURL 中傳入的網(wǎng)頁(yè)地址。 每個(gè)窗口都是一個(gè)單獨(dú)的網(wǎng)頁(yè)進(jìn)程，窗口之間的通信需要借助主進(jìn)程傳遞消息。
總體來(lái)說(shuō)開發(fā) Electron 應(yīng)用和開發(fā) Web 應(yīng)用很相似，區(qū)別在于 Electron 的運(yùn)行環(huán)境同時(shí)內(nèi)置了瀏覽器和 Node.js 的 API，在開發(fā)網(wǎng)頁(yè)時(shí)除了可以使用瀏覽器提供的 API 外，還可以使用 Node.js 提供的 API。
接入 Webpack
接下來(lái)做一個(gè)簡(jiǎn)單的 Electron 應(yīng)用，要求為應(yīng)用啟動(dòng)后顯示一個(gè)主窗口，在主窗口里有一個(gè)按鈕，點(diǎn)擊這個(gè)按鈕后新顯示一個(gè)窗口，且使用 React 開發(fā)網(wǎng)頁(yè)。
由于 Electron 應(yīng)用中的每一個(gè)窗口對(duì)應(yīng)一個(gè)網(wǎng)頁(yè)，所以需要開發(fā)2個(gè)網(wǎng)頁(yè)，分別是主窗口的 index.html 和新打開的窗口 login.html 。 也就是說(shuō)項(xiàng)目由2個(gè)單頁(yè)應(yīng)用組成，這和3-10管理多個(gè)單頁(yè)應(yīng)用 中的項(xiàng)目非常相似，讓我們來(lái)把它改造成一個(gè) Electron 應(yīng)用。
需要改動(dòng)的地方如下：
在項(xiàng)目根目錄下新建主進(jìn)程的入口文件 main.js ，內(nèi)容和上面提到的一致；
主窗口網(wǎng)頁(yè)的代碼如下：
import React, { Component } from 'react';
import { render } from 'react-dom';
import { remote } from 'electron';
import path from 'path';
import './index.css';
class App extends Component {
// 在按鈕被點(diǎn)擊時(shí)
handleBtnClick() {
// 新窗口對(duì)應(yīng)的頁(yè)面的 URI 地址
const modalPath = path.join('file://', remote.app.getAppPath(), 'dist/login.html');
// 新窗口的大小
let win = new remote.BrowserWindow({ width: 400, height: 320 })
win.on('close', function () {
// 窗口被關(guān)閉時(shí)清空資源
win = null
})
// 加載網(wǎng)頁(yè)
win.loadURL(modalPath)
// 顯示窗口
win.show()
}
render() {
return (

Page Index