下面詳細(xì)給大家介紹Electron+vue的使用，具體內(nèi)容如下所示：

.現(xiàn)如今前端框架數(shù)不勝數(shù)，尤其是angular、vue吸引一大批前端開(kāi)發(fā)者，在這個(gè)高新技術(shù)快速崛起的時(shí)代，自然少不了各種框架的結(jié)合使用。接下來(lái)是介紹electron+vue的結(jié)合使用。

2.Electron是什么？？

對(duì)于我來(lái)說(shuō)Electron相當(dāng)于一個(gè)瀏覽器的外殼，可以把網(wǎng)頁(yè)程序嵌入到殼里面，可以運(yùn)行在桌面上的一個(gè)程序，可以把網(wǎng)頁(yè)打包成一個(gè)在桌面運(yùn)行的程序，通俗來(lái)說(shuō)就是軟件，比如像QQ、優(yōu)酷、網(wǎng)易音樂(lè)等等。功能的強(qiáng)大超出你的想象，可以構(gòu)建跨平臺(tái)桌面程序，本身支持node.js，可以使用node.js的一些模塊。想要深入了解可以查看官網(wǎng)的詳細(xì)介紹。

Electron官網(wǎng)：https://electronjs.org/

3.Electron+vue的聯(lián)合使用

有vue基礎(chǔ)跟nodejs基礎(chǔ)的開(kāi)發(fā)人員使用electron那就更順風(fēng)順?biāo)?，沒(méi)有node基礎(chǔ)的，有vue或者angular基礎(chǔ)的也可以學(xué)習(xí)，學(xué)起來(lái)可能會(huì)吃力些，不過(guò)也沒(méi)關(guān)系，很多東西有大神已經(jīng)封裝好了，直接使用就行。

接下來(lái)教你手把手搭建一個(gè)electron+vue的開(kāi)發(fā)環(huán)境。

第一步：安裝nodejs

windows下的NodeJS安裝是比較方便的（v0.6.0版本之后，支持windows native），只需要登陸官網(wǎng)（http://nodejs.org/），便可以看到下載頁(yè)面。

2、下載完成后雙擊運(yùn)行進(jìn)行安裝，安裝過(guò)程基本直接“NEXT”就可以了（全部采用默認(rèn)方式安裝）。（windows的安裝msi文件在過(guò)程中會(huì)直接添加path的系統(tǒng)變量，變量值是你的安裝路徑，例如“C:\Program Files\nodejs”）。

3、安裝完成后可以使用cmd（win+r然后輸入cmd進(jìn)入 ）測(cè)試下是否安裝成功。方法：在cmd下輸入node -v，出現(xiàn)下圖版本提示就是完成了NodeJS的安裝。

4、npm的安裝。由于新版的NodeJS已經(jīng)集成了npm，所以之前npm也一并安裝好了。同樣可以使用cmd命令行輸入”npm -v”來(lái)測(cè)試是否成功安裝。如下圖，出現(xiàn)版本提示便OK了。

5、常規(guī)NodeJS的搭建到現(xiàn)在為止已經(jīng)完成了，急不及待的話你可以在”cmd“輸入”node“進(jìn)入node開(kāi)發(fā)模式下，輸入你的NodeJS第一句：”hello world“ - 輸入：console.log(‘hello world')。

第二步:搭建vue開(kāi)發(fā)環(huán)境

1.安裝淘寶npm鏡像

由于在國(guó)內(nèi)使用npm是非常慢的，所以在這里我們推薦使用淘寶npm鏡像，使用

淘寶的cnpm命令管理工具可以代替默認(rèn)的npm管理工具：$ npm install-g cnpm--registry=https://registry.npm.taobao.org；

淘寶鏡像安裝成功之后，我們就可以全局vue-cli腳手架，輸入命令：cnpm install--globalvue-cli 回車(chē)；驗(yàn)證是否安裝成功，在命令輸入vue，出來(lái)vue的信息，及說(shuō)明安裝成功；

第三步：搭建vue項(xiàng)目

使用命令創(chuàng)建項(xiàng)目，一步步選擇之后開(kāi)始等等項(xiàng)目創(chuàng)建完成

完成后如下：

成功之后修改啟動(dòng)項(xiàng)，打開(kāi)demo>config>index.js,具體修改如下：

執(zhí)行命令，出現(xiàn)如下效果說(shuō)明項(xiàng)目已經(jīng)運(yùn)行成功：

執(zhí)行生成命令：

$ npm run build

注意： 生成的時(shí)候一定要修改index.js 中的生成路徑，否則后面程序運(yùn)行打包頁(yè)面會(huì)顯示空白，找不到路徑

出現(xiàn)如下效果

項(xiàng)目下回多出一個(gè)dist的文件夾，里面就你打包好的東西

接下來(lái)一切操作都在dist文件夾目錄下。

第四步：安裝Electron

執(zhí)行命令：

　安裝成功后執(zhí)行：electron -v 查看一下是否安裝成功

第五步：創(chuàng)建主程序的入口（main.js）,及相關(guān)配置 package.json

在dist文件夾內(nèi)創(chuàng)建main.js文件及package.json 文件

文件內(nèi)容如下：

main.js

　以上是最基本的代碼，更復(fù)雜的可以自行設(shè)計(jì)，也可以看官方文檔

package.json

　package.json更多配置可查看官方文檔：https://www.electron.build/configuration/configuration

現(xiàn)在萬(wàn)事俱備只欠東風(fēng)，

執(zhí)行命令： electron .

成功后效果如下：

出現(xiàn)如上效果說(shuō)明你已經(jīng)成功了。

第五步：打包成軟件包

執(zhí)行命令

$ npm install electron-builder$ npm install electron-package

執(zhí)行打包命令：

electron-bulider

以上就是打包成功的效果，demo-1.0.4.exe 就是一個(gè)軟件包，可以直接安裝到系統(tǒng)上，不同的操作系統(tǒng)可以打包成不同的安裝包。

vue有一個(gè)集成的electron的項(xiàng)目

electron-vue ,

現(xiàn)成項(xiàng)目已經(jīng)發(fā)布到githup上

githup地址：https://github.com/2577662935/electron-vue.git

文檔訪問(wèn)地址：https://github.com/2577662935/electron-vue/tree/master/my-project

如果調(diào)試一個(gè)程序讓你很苦惱，千萬(wàn)不要放棄，成功永遠(yuǎn)在拐角之后，除非你走到拐角，否則你永遠(yuǎn)不知道你離他多遠(yuǎn)，所以，請(qǐng)記住，堅(jiān)持不懈，直到成功。

ps：下面給大家介紹下electron-vue多顯示屏下將新窗口投放至其他屏幕 ，具體內(nèi)容如下所示：

display對(duì)象可以獲取所有顯示屏

此處演示程序啟動(dòng)是投放新窗口至另一屏幕

import { app, BrowserWindow } from 'electron'
const electron = require('electron') //獲取electron對(duì)象
let newWindow
function createWindow () {
　　/**
　　　*主窗口省略
　　　*/
　　let displays = electron.screen.getAllDisplays()
　　let externalDisplay = displays.find((display) => {
 　　return display.bounds.x !== 0 || display.bounds.y !== 0
　　})
　　if (externalDisplay) {
 　　newWindow = new BrowserWindow({
  　　fullscreen:false,
  　　 x: externalDisplay.bounds.x + 500,
  　　y: externalDisplay.bounds.y + 50,
  　　width: 1000,
  　　height: 800
 　　})
 　　newWindow.loadURL(newURL)
　　}
　　newWindow.on('closed', () => {
 　　newWindow = null
　　})
}
app.on('ready', createWindow)

總結(jié)

以上所述是小編給大家介紹的Electron vue的使用教程 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！