.現如今前端框架數不勝數，尤其是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 --global vue-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