[[344654]]

 使用electron
本身項目是使用vue-cli開發的，在使用electron之前，需要先將開發好的vue的項目打包生成打包之后的html文件及其他靜態資源文件。然后就可以直接拿官方demo進行打包了。

克隆官方demo

git clone https://github.com/electron/electron-quick-start 

啟動項目

cd electron-quick-start->npm install->npm start   到這就能運行demo了 

效果圖如下：

放入自己項目
將自己項目打包好的dist文件中的index.html和其他文件放入electron-quick-start（根目錄）文件夾中，重新start一下，運行結果如圖

這樣一個現有的vue項目就已經集成到了electron中。

打包生成exe文件
項目集成到了electron中，下一步就是打包生成我們需要的桌面端exe文件。

安裝插件

npm install electron-packager --save-dev 

添加命令行
在package.json中增加以下代碼命令：

"pack":"electron-packager . testexe --platform=win32 --arch=x64  --out=./out --asar --app-version=0.0.1" 

• testexe是打包生成的exe文件名字
• ./out是輸出路徑
• app-version=0.0.1 是版本號

打包
運行命令打包成功

npm run pack 

打包之后文件結構：

雙擊exe文件既可運行。

注意在electron中進行網絡請求時，因為本身項目使用了反向代理，打包后請求路徑前面會增加本地路徑“file:e/”，解決方式：

在項目中添加請求地址全路徑，可以根據自己需求修改

隱藏菜單欄
electron中默認帶有頂部菜單欄，有時候我們的應用不需要。可以在main.js中設置，隱藏菜單。代碼如下：

// Modules to control application life and create native browser window 
const {app, BrowserWindow,Menu} = require('electron') 
const path = require('path') 
 
function createWindow () { 
  //隱藏菜單 
  Menu.setApplicationMenu(null) 
  // Create the browser window. 
  const mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: { 
      preload: path.join(__dirname, 'preload.js') 
    } 
  }) 
 
  // and load the index.html of the app. 
  mainWindow.loadFile('index.html') 
 
  // Open the DevTools. 
  // mainWindow.webContents.openDevTools() 
} 

這樣默認的菜單欄就隱藏了，下面提供一些常用的配置項：

在main.js 當中通過配置 BrowserWindow 來改變外觀 
 
width Integer - 窗口寬度,單位像素. 默認是 800 . 
 
height Integer - 窗口高度,單位像素. 默認是 600 . 
 
x Integer - 窗口相對于屏幕的左偏移位置.默認居中. y Integer - 窗口相對于屏幕的頂部偏移位置.默認居中. useContentSize Boolean - width 和 height 使用web網頁size, 這意味著實際窗口的size應該包括窗口框架的 size，稍微會大一點，默認為 false . center 
 
Boolean - 窗口屏幕居中. minWidth Integer - 窗口最小寬度，默認為 0 . 
 
minHeight Integer - 窗口最小高度，默認為 0 . 
 
maxWidth Integer - 窗口最大寬度，默認無限制. 
 
maxHeight Integer - 窗口最大高度，默認無限制. 
 
resizable Boolean - 是否可以改變窗口size，默認為 true . 
 
movable Boolean - 窗口是否可以拖動. 在 Linux 上無效. 默認為 true . 
 
minimizable Boolean - 窗口是否可以最小化. 在 Linux 上無效. 默認為 true . 
 
maximizable Boolean - 窗口是否可以最大化. 在 Linux 上無效. 默認為 true . 
 
closable Boolean - 窗口是否可以關閉. 在 Linux上無效. 默認為 true . 
 
alwaysOnTop Boolean - 窗口是否總是顯示在其他窗口之前. 在 Linux上無效. 默認為 false . 
 
fullscreen Boolean - 窗口是否可以全屏幕. 當明確設置值為When false ，全屏化按鈕將會隱藏，在 macOS 將禁用. 默認 false . 
 
fullscreenable Boolean - 在 macOS 上，全屏化按鈕是否可用，默認為 true . skipTaskbar Boolean - 是否在任務欄中顯示窗口. 默認是 false . 
 
kiosk Boolean - kiosk 方式. 默認為 false . title String - 窗口默認title. 默認 "Electron" . 
 
icon NativeImage - 窗口圖標, 如果不設置，窗口將使用可用的默認圖標. 
 
show Boolean - 窗口創建的時候是否顯示. 默認為 true . 
 
frame Boolean - 指定 false 來創建一個 Frameless Window. 默認為 true . 
 
acceptFirstMouse Boolean - 是否允許單擊web view來激活窗口 . 默認為 false . 
 
disableAutoHideCursor Boolean - 當 typing 時是否隱藏鼠標.默認 false . 
 
autoHideMenuBar Boolean - 除非點擊 Alt ，否則隱藏菜單欄.默認為 false . 
 
enableLargerThanScreen Boolean - 是否允許允許改變窗口大小大于屏幕. 默認是 false . 
 
backgroundColor String -窗口的 background color 值為十六進制,如 #66CD00 或 #FFF 或 #80FFFFFF (支持透明 度). 默認為在 Linux和 Windows 上為 #000 (黑色) , Mac上為 #FFF (或透明). 
 
hasShadow Boolean - 窗口是否有陰影. 只在 macOS 上有效. 默認為 true . 
 
darkTheme Boolean - 為窗口使用 dark 主題, 只在一些擁有 GTK+3 桌面環境上有效. 默認為 false . 
 
transparent Boolean - 窗口 透明. 默認為 false . 
 
type String - 窗口type, 默認普通窗口. 下面查看更多. titleBarStyle String - 窗口標題欄樣式. 下面查看更多. 
 
webPreferences Object - 設置界面特性. 下面查看更多.