手把手教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/），即可以看到下載頁面。 

 

二、下載完成後雙擊運行進行安裝，安裝過程基本直接「NEXT」就能夠了（所有采用默認方式安裝）。（windows的安裝msi文件在過程當中會直接添加path的系統變量，變量值是你的安裝路徑，例如「C:\Program Files\nodejs」）。

三、安裝完成後可使用cmd（win+r而後輸入cmd進入 ）測試下是否安裝成功。方法：在cmd下輸入node -v，出現下圖版本提示就是完成了NodeJS的安裝。 

 

 

四、npm的安裝。因爲新版的NodeJS已經集成了npm，因此以前npm也一併安裝好了。一樣可使用cmd命令行輸入」npm -v」來測試是否成功安裝。以下圖，出現版本提示便OK了。 

 

五、常規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項目

 使用命令建立項目，一步步選擇以後開始等等項目建立完成

$  vue init webpack demo

完成後以下：

成功以後修改啓動項，打開demo>config>index.js,具體修改以下：

 

    執行命令，出現以下效果說明項目已經運行成功：

$  npm run dev

　　

執行生成命令：

$ npm run build

 注意： 生成的時候必定要修改index.js 中的生成路徑，不然後面程序運行打包頁面會顯示空白，找不到路徑

 

出現以下效果

項目下回多出一個dist的文件夾，裏面就你打包好的東西

接下來一切操做都在dist文件夾目錄下。

第四步：安裝Electron

執行命令：

$ npm install electron

　安裝成功後執行：electron -v 查看一下是否安裝成功

第五步：建立主程序的入口（main.js）,及相關配置 package.json

在dist文件夾內建立main.js文件及package.json 文件

文件內容以下：

main.js

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

{
  "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

 

 

 

 

    若是調試一個程序讓你很苦惱，千萬不要放棄，成功永遠在拐角以後，除非你走到拐角，不然你永遠不知道你離他多遠，因此，請記住，堅持不懈，直到成功。