1蒜魄、搭建 Electron 環(huán)境
在你認為合適的目錄下 創(chuàng)建 readit-vue 目錄锉罐，在終端命令行里輸入命令：
cd 你認為合適的目錄/readit-vue
npm init -y
npm install electron@latest -D
2、創(chuàng)建 main.js 文件
在項目根目錄下創(chuàng)建 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 環(huán)境, 啟動 Vue 服務
在命令行里輸入：
vue create vue-renderer
cd vue-renderer
yarn serve
4、配置 package.json npm 腳本
// /package.json
{
// ...
"scripts": {
"start": "nodemon --exec 'electron .'"
}
}
5璃赡、啟動應用
npm start
