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. 打包完成：