Electron集成React和Vue流程方法講解
集成React
1. 熱調試
在React項目目錄下安裝Electron
npm install electron
修改package.json文件,增加或將已有的main屬性值修改為main.js,在scriptes中添加"electron-start": "electron .",最終配置文件如下:
{ "name": "electron-react", "version": "0.1.0", "main": "main.js", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "electron": "^20.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "electron-start": "electron ." }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
打開main.js,將
const { app, BrowserWindow, globalShortcut } = require("electron"); const path = require("path"); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webContents: { openDevTools: true, //不想要控制臺直接把這段刪除 } }); win.loadFile("index.html"); } app.whenReady().then(() => { createWindow(); app.on("activate", () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }); app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); } });
中的
win.loadFile("index.html");
修改為
win.loadURL("http://localhost:3000/")
打開兩個終端,一個運行React
npm start
另一個執(zhí)行
npm run electron-start
程序運行正常
2. 打包
默認情況下,homepage 是 http://localhost:3000,build 后,所有資源文件路徑都是 /static,而 Electron 調用的入口是 file :協(xié)議,/static 就會定位到根目錄去,所以找不到靜態(tài)文件。在 package.json 文件中添加 homepage 字段并設置為"."后,靜態(tài)文件的路徑就變成了相對路徑,就能正確地找到了添加如下配置:
"homepage":".",
隨后運行build構建項目,構建完成后可以在build文件夾下執(zhí)行index.html看看網(wǎng)站是否可以正確運行。
npm run build
如果可以。在main.js中將代碼
win.loadURL("http://localhost:3000/")
更改為,即載入靜態(tài)文件,載入URL可以作為熱調試,打包時修改為靜態(tài)文件。
win.loadFile("./build/index.html");
最終的文件
main.js為:
const { app, BrowserWindow, globalShortcut } = require("electron"); const path = require("path"); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webContents: { openDevTools: true, //不想要控制臺直接把這段刪除 } }); win.loadFile("./build/index.html"); } app.whenReady().then(() => { createWindow(); app.on("activate", () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }); app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); } });
package.json為:
{ "name": "electron-react", "version": "0.1.0", "main": "main.js", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "electron": "^20.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "electron-start": "electron ." }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "homepage":".", "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
目錄結構為
之后的打包和平時的打包一樣即可。
集成Vue
原理和集成React類似
到此這篇關于Electron集成React和Vue流程方法講解的文章就介紹到這了,更多相關Electron集成React和Vue內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
基于VuePress 輕量級靜態(tài)網(wǎng)站生成器的實現(xiàn)方法
VuePress是一個基于Vue的輕量級靜態(tài)網(wǎng)站生成器以及為編寫技術文檔而優(yōu)化的默認主題。這么文章給大家詳細介紹了vuepress 靜態(tài)網(wǎng)站生成器的方法,需要的朋友參考下吧2018-04-04vue el-tree 默認展開第一個節(jié)點的實現(xiàn)代碼
這篇文章主要介紹了vue el-tree 默認展開第一個節(jié)點的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05vue使用showdown并實現(xiàn)代碼區(qū)域高亮的示例代碼
這篇文章主要介紹了vue使用showdown并實現(xiàn)代碼區(qū)域高亮的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-10-10vue-treeselect及el-tree點擊節(jié)點獲取上級節(jié)點的數(shù)據(jù)方式
這篇文章主要介紹了vue-treeselect及el-tree點擊節(jié)點獲取上級節(jié)點的數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07vue中使用unity3D如何實現(xiàn)webGL將要呈現(xiàn)的效果
這篇文章主要介紹了vue中使用unity3D如何實現(xiàn)webGL將要呈現(xiàn)的效果,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07