Electron+vue的使用
現如今前端框架數不勝數,尤其是angular、vue吸引一大批前端開發者,在這個高新技術快速崛起的時代,自然少不了各種框架的結合使用。接下來是介紹electron+vue的結合使用。
2.Electron是什麼??
對於我來說Electron相當於一個瀏覽器的外殼,可以把網頁程式嵌入到殼裡面,可以執行在桌面上的一個程式,可以把網頁打包成一個在桌面執行的程式,通俗來說就是軟體,比如像QQ、優酷、網易音樂等等。功能的強大超出你的想象,可以構建跨平臺桌面程式,本身支援node.js,可以使用node.js的一些模組。想要深入瞭解可以檢視官網的詳細介紹。
Electron官網:https://electronjs.org/
3.Electron+vue的聯合使用
有vue基礎跟nodejs基礎的開發人員使用electron那就更順風順水了,沒有node基礎的,有vue或者angular基礎的也可以學習,學起來可能會吃力些,不過也沒關係,很多東西有大神已經封裝好了,直接使用就行。
接下來教你手把手搭建一個electron+vue的開發環境。
第一步:安裝nodejs
windows下的NodeJS安裝是比較方便的(v0.6.0版本之後,支援windows native),只需要登陸官網(http://nodejs.org/),便可以看到下載頁面。
2、下載完成後雙擊執行進行安裝,安裝過程基本直接“NEXT”就可以了(全部採用預設方式安裝)。(windows的安裝msi檔案在過程中會直接新增path的系統變數,變數值是你的安裝路徑,例如“C:\Program Files\nodejs”)。
3、安裝完成後可以使用cmd(win+r然後輸入cmd進入 )測試下是否安裝成功。方法:在cmd下輸入node -v,出現下圖版本提示就是完成了NodeJS的安裝。
4、npm的安裝。由於新版的NodeJS已經集成了npm,所以之前npm也一併安裝好了。同樣可以使用cmd命令列輸入”npm -v”來測試是否成功安裝。如下圖,出現版本提示便OK了。
5、常規NodeJS的搭建到現在為止已經完成了,急不及待的話你可以在”cmd“輸入”node“進入node開發模式下,輸入你的NodeJS第一句:”hello world“ - 輸入:console.log(‘hello world’)。
第二步:搭建vue開發環境
1.安裝淘寶npm映象
由於在國內使用npm是非常慢的,所以在這裡我們推薦使用淘寶npm映象,使用
淘寶的cnpm命令管理工具可以代替預設的npm管理工具:$ npm install-g cnpm--registry=https://registry.npm.taobao.org;
淘寶映象安裝成功之後,我們就可以全域性vue-cli腳手架,輸入命令:cnpm install--globalvue-cli 回車;驗證是否安裝成功,在命令輸入vue,出來vue的資訊,及說明安裝成功;
第三步:搭建vue專案
使用命令建立專案,一步步選擇之後開始等等專案建立完成
1 |
$ vue init webpack demo
|
完成後如下:
成功之後修改啟動項,開啟demo>config>index.js,具體修改如下:
執行命令,出現如下效果說明專案已經執行成功:
1 |
$ npm run dev
|
執行生成命令:
$ npm run build
注意: 生成的時候一定要修改index.js 中的生成路徑,否則後面程式執行打包頁面會顯示空白,找不到路徑
出現如下效果
專案下回多出一個dist的資料夾,裡面就你打包好的東西
接下來一切操作都在dist資料夾目錄下。
第四步:安裝Electron
執行命令:
1 |
$ npm install electron
|
安裝成功後執行:electron -v 檢視一下是否安裝成功
第五步:建立主程式的入口(main.js),及相關配置 package.json
在dist資料夾內建立main.js檔案及package.json 檔案
檔案內容如下:
main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const {app, BrowserWindow} =require( 'electron' ); //引入electron
let win;
let windowConfig = {
width:800,
height:600
}; //視窗配置程式執行視窗的大小
function createWindow(){
win = new BrowserWindow(windowConfig); //建立一個視窗
win.loadURL(`file: //${__dirname}/index.html`);//在視窗內要展示的內容index.html 就是打包生成的index.html
win.webContents.openDevTools(); //開啟除錯工具
win.on( 'close' ,() => {
//回收BrowserWindow物件
win = null ;
});
win.on( 'resize' ,() => {
win.reload();
})
}
app.on( 'ready' ,createWindow);
app.on( 'window-all-closed' ,() => {
app.quit();
});
app.on( 'activate' ,() => {
if (win == null ){
createWindow();
}
});
|
以上是最基本的程式碼,更復雜的可以自行設計,也可以看官方文件
package.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
{
"name" : "demo" ,
"productName" : "專案名稱" ,
"author" : "作者" ,
"version" : "1.0.4" , //版本號
"main" : "main.js" , //主檔案入口
"description" : "專案描述" ,
"scripts" : {
"pack" : "electron-builder --dir" ,
"dist" : "electron-builder" ,
"postinstall" : "electron-builder install-app-deps"
},
"build" : {
"electronVersion" : "1.8.4" ,
"win" : {
"requestedExecutionLevel" : "highestAvailable" ,
"target" : [
{
"target" : "nsis" ,
"arch" : [
"x64"
]
}
]
},
"appId" : "demo" , //程式id
"artifactName" : "demo-${version}-${arch}.${ext}" ,
"nsis" : {
"artifactName" : "demo-${version}-${arch}.${ext}"
},
"extraResources" : [
{
"from" : "./static/xxxx/" , //需要打包的靜態資源
"to" : "app-server" , //靜態資源存放路徑
"filter" : [
"**/*" //打包靜態資原始檔夾內的所有檔案 如果沒有靜態資源要打包進去,extraResources 這段程式碼去掉
]
}
],
"publish" : [
{
"provider" : "generic" ,
"url" : "http://xxxxx/download/" //自動更新的安裝包地址,初步使用publish這段程式碼不需要
}
]
},
"dependencies" : {
"core-js" : "^2.4.1" ,
"electron-packager" : "^12.1.0" , //不打包成exe程式可以去掉
"electron-updater" : "^2.22.1" , //不打包成exe程式可以去掉
}
}
|
package.json更多配置可檢視官方文件:https://www.electron.build/configuration/configuration
現在萬事俱備只欠東風,
執行命令:electron .
成功後效果如下:
出現如上效果說明你已經成功了。
第五步:打包成軟體包
執行命令
$ npm install electron-builder $ npm install electron-package
執行打包命令:
electron-bulider
以上就是打包成功的效果,demo-1.0.4.exe 就是一個軟體包,可以直接安裝到系統上,不同的作業系統可以打包成不同的安裝包。
vue有一個整合的electron的專案
electron-vue ,
現成專案已經發布到githup上
githup地址:https://github.com/2577662935/electron-vue.git
文件訪問地址:https://github.com/2577662935/electron-vue/tree/master/my-project
如果除錯一個程式讓你很苦惱,千萬不要放棄,成功永遠在拐角之後,除非你走到拐角,否則你永遠不知道你離他多遠,所以,請記住,堅持不懈,直到成功。