vue+iview+electron實現桌面應用程序

創建electron：

1. 安裝 electron      用 cnpm 命令安裝 electron                                                                                                                             npm 會幫助你創建一個基本的 package.json 文件。 其中的 main 字段所表示的腳本爲應用的啓動腳本，它將會在主進程中執行。 如下片段是一個 package.json 的示例：

   {
     "name"    : "your-app",
     "version" : "0.1.0",
     "main"    : "main.js"
   }

        注意：如果 main 字段沒有在 package.json 聲明，Electron會優先加載 index.js。

2. 創建main.js文件

   const {app, BrowserWindow} = require('electron')
   const path = require('path')
   const url = require('url')
   
   // Keep a global reference of the window object, if you don't, the window will
   // be closed automatically when the JavaScript object is garbage collected.
   let win
   
   function createWindow () {
     // Create the browser window.
     win = new BrowserWindow({width: 800, height: 600})
   
     // and load the index.html of the app.
     win.loadURL(url.format({
       pathname: path.join(__dirname, 'index.html'),
       protocol: 'file:',
       slashes: true
     }))
   
     // Open the DevTools.
     // win.webContents.openDevTools()
   
     // Emitted when the window is closed.
     win.on('closed', () => {
       // Dereference the window object, usually you would store windows
       // in an array if your app supports multi windows, this is the time
       // when you should delete the corresponding element.
       win = null
     })
   }
   
   // This method will be called when Electron has finished
   // initialization and is ready to create browser windows.
   // Some APIs can only be used after this event occurs.
   app.on('ready', createWindow)
   
   // Quit when all windows are closed.
   app.on('window-all-closed', () => {
     // On macOS it is common for applications and their menu bar
     // to stay active until the user quits explicitly with Cmd + Q
     if (process.platform !== 'darwin') {
       app.quit()
     }
   })
   
   app.on('activate', () => {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.
     if (win === null) {
       createWindow()
     }
   })
   
   // In this file you can include the rest of your app's specific main process
   // code. You can also put them in separate files and require them here.
   

    

3. 在dist文件夾下，複製粘貼下面的 package.json 和 main.js文件，最終目錄如圖

4.  

   安裝 electron-packager

   npm install electron-packager -g

    

5. 在package.json中配置打包命令

   "scripts": {
       "start": "electron .",
       "pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0 --icon=static/favicon.ico"
     }

   命令結構如下（根據實際情況修改）：

   “.”：需要打包的應用目錄（即當前目錄），

   “myClient”：應用名稱，

   “--win”：打包平臺（以Windows爲例），

   “--out ../myClient”：輸出目錄，

   “--arch=64”：64位，

   “--app-version=0.0.1”：應用版本，

   “--electron-version=2.0.0”：electron版本                                                                                                                                   “--icon=static/favicon.ico”：electron圖標

6. 運行打包命令：

   npm run pack

    

7. 打包完成：