使用electron將單頁面vue webapp 打包成 PC端應用


在看張鑫旭博客得時候看到了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 - 設置界面特性. 下面查看更多.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM