首页electron vue示例

electron vue示例

时间: 2023-09-16 08:16:21 浏览: 88

以下是一个简单的 Electron Vue 示例： 1. 创建一个新的 Vue 项目 ``` vue create my-electron-app ``` 2. 安装 electron 和 electron-builder ``` cd my-electron-app npm install electron electron-builder --save-dev ``` 3. 在 `package.json` 文件中添加以下脚本 ```json "electron": "electron .", "electron-build": "electron-builder" ``` 4. 创建 `main.js` 文件 ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: 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() } }) ``` 5. 创建 `index.html` 文件 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Electron Vue App</title> </head> <body> <div id="app"></div> <script src="./dist/js/app.js"></script> </body> </html> ``` 6. 修改 `vue.config.js` 文件 ```javascript module.exports = { pluginOptions: { electronBuilder: { builderOptions: { appId: 'com.example.my-electron-app', productName: 'My Electron Vue App', win: { icon: 'public/favicon.ico' } } } } } ``` 7. 运行 Electron ``` npm run electron ``` 以上就是一个简单的 Electron Vue 示例，可以根据需要对其进行修改和扩展。

阅读全文