在看張鑫旭博客得時候看到了electron這個東西,來了興趣,就按照上面寫的將已經做好得vue項目拿來試了試,出乎意料得順利
electron簡單說下electron,就是把 chrome內核和你的項目文件打包成一個程序,和移動端得混合應用有點類似。當然實現起來肯定沒有說得這么簡單得。
那么怎么做呢?
首先,你電腦上面要有git 和 node ,git可以不要,不過最好安裝了,Node必須要。
第二步 使用git clone https://github.com/electron/electron-quick-start 或者直接去github上面下載
第三步 npm install 或 安裝淘寶源下載速度快點,安裝好之后 cnpm install 將必要得模塊下載下來
第四步 將你做好得 vue 項目所需得文件放在 electron 項目得根目錄下面,理論下你得 vue項目能直接在瀏覽器下面跑起來就沒問題 注意路徑問題,項目得路徑必須要是相對路徑,不要用絕對路徑
第五步 運行 npm start 就可以跑起來了,有沒有很酷

第六步 全局安裝打包工具,安裝命令npm install electron-packager -g
第七步 打包 electron-packager . test --out ../electron . 表示將當前目錄所有文件打包 test表示打包之后得名字 --out表示輸出 ../electron 表示輸出路徑
打包完之后運行效果

關於界面配置
在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 - 設置界面特性. 下面查看更多.
