Electron使用指南——9环境搭建

1、搭建 Electron 环境

在你认为合适的目录下 创建 readit-vue 目录，在终端命令行里输入命令：

[code]cd 你认为合适的目录/readit-vue
npm init -y
npm install electron@latest -D

2、创建 main.js 文件

在项目根目录下创建 main.js 文件：

[code]// /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 服务

在命令行里输入：

[code]vue create vue-renderer
cd vue-renderer
yarn serve

4、配置 package.json npm 脚本

[code]// /package.json
{
// ...
"scripts": {
"start": "nodemon --exec 'electron .'"
}
}

5、启动应用

[code]npm start