Electron使用指南 - [09] 环境搭建
环境 搭建 使用指南 09 electron
2023-09-14 09:02:36 时间
1、搭建 Electron 环境
在你认为合适的目录下 创建 readit-vue 目录,在终端命令行里输入命令:
cd 你认为合适的目录/readit-vue
npm init -y
npm install electron@latest -D
2、创建 main.js 文件
在项目根目录下创建 main.js 文件:
// /main.js
// Modules
const {app, BrowserWindow} = require('electron')
const windowStateKeeper = require('electron-window-state')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
// Create a new BrowserWindow when `app` is ready
function createWindow () {
// Win state keeper
let state = windowStateKeeper({
defaultWidth: 500, defaultHeight: 650
})
mainWindow = new BrowserWindow({
x: state.x,
y: state.y,
width: state.width,
height: state.height,
minWidth: 350,
maxWidth: 650,
minHeight: 300,
webPreferences: {
nodeIntegration: true
}
})
// Load local vue server into the new BrowserWindow
mainWindow.loadURL('http://localhost:8080')
// Manage new window state
state.manage(mainWindow)
// Open DevTools - Remove for PRODUCTION!
mainWindow.webContents.openDevTools();
// Listen for window being closed
mainWindow.on('closed', () => {
mainWindow = null
})
}
// Electron `app` is ready
app.on('ready', createWindow)
// Quit when all windows are closed - (Not macOS - Darwin)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// When app icon is clicked and app is running, (macOS) recreate the BrowserWindow
app.on('activate', () => {
if (mainWindow === null) createWindow()
})
3、搭建 Vue 环境, 启动 Vue 服务
在命令行里输入:
vue create vue-renderer
cd vue-renderer
yarn serve
4、配置 package.json npm 脚本
// /package.json
{
// ...
"scripts": {
"start": "nodemon --exec 'electron .'"
}
}
5、启动应用
npm start
相关文章
- Qt环境搭建(Qt Creator)
- jenkins+git+maven搭建自动化部署项目环境
- hadoop实战--搭建开发环境及编写Hello World
- R语言环境变量的设置 环境设置函数为options()
- 1. 搭建NDK集成开发环境
- JSF环境搭建web.xml和faces-config.xml配置
- day01 计算机基础和环境搭建
- [转]windows7X64环境下wamp开启PHP_Curl组件
- 如何在SAP云平台的Cloud Foundry环境下添加新的Service(服务)
- 我的Go+语言初体验——ubuntu安装Go+环境问题锦集(二)
- qt交叉编译环境搭建_qt socket
- 自动搭建openEuler虚拟机QEMU运行环境
- 【Android 逆向】Android 系统文件分析 ( Android 系统 root 环境准备 | 查看 Android 根目录信息 )
- 【K8S】基于Docker+K8S+GitLab/SVN+Jenkins+Harbor搭建持续集成交付环境(环境搭建篇)
- 【云原生之kubernetes实战】在k8s环境下部署Laverna笔记工具
- App自动化测试介绍和环境搭建
- 一文3500字手把手教你基于Android系统的自动化环境搭建
- 【云原生 • Docker】mysql、tomcat、nginx、redis 环境部署
- mac flutter开发环境 flutter环境变量的配置
- 【长篇博文】Docker学习笔记与深度学习环境的搭建和部署(一)
- HTML5开发环境搭建 VSCODE安装与配置
- Halide 环境配置--ubuntu