Electron  vue使用详解

Electron是什么？

• Electron 是一个框架，可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序。 然后这些应用程序可以打包在macOS、Windows和Linux上直接运行，或者通过Mac App Store或微软商店分发。

  通常，您使用每个操作系统特定的本地应用程序框架为操作系统 (OS)创建一个桌面应用程序。 Electron 可以在使用您已经知道的技术后写入您的应用程序。

前提条件

• 在使用 Electron 之前，您需要安装 Node.js

• 安装完成node.js 后，需要检查安装是否正确，查看node.js 命令

  • npm -v 查看npm版本

  • node -v 查看node版本

• 命令响应打印Node.js 和 npm 的版本，如果两个命令都成功，就可以安装Electron了

• 执行：npm install electron 安装electron

• 安装完成后执行： electron -v 查看是否安装成功

• 执行：npm install electron-builder

• 执行：npm install electron-packager【打包】

创建基本应用程序

• 从开发的角度来看，Electron应用基本上是一种Node.js应用。 这意味着您的 Electron 应用程序的起点将是一个 package.json 文件，就像在其他的Node.js 应用程序中一样。 最小的 Electron 应用程序具有以下结构：

  • electron-app

    • main.js

    • package.json

    • index.html

创建第一个vue+node.js+ electron应用步骤：

• 创建第一个vue+node.js+ electron应用步骤：

  1. 首先创建vue工程：

     • vue init webpack xxx

     • Project name 【项目名称：不设置默认为创建时xxx】

     • Project description 【项目描述】

     • Author 【作者】

     • Vue build (Use arrow keys)

       • Runtime + Compiler: recommended for most users 【选择】

       • Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

     • Install vue-router? (Y/n) 【是否使用路由：选是】

     • Use ESLint to lint your code? 【ESlint ：代码规范】

     • 完成安装

  2. 执行：npm run dev 启动vue程序

  3. 证明vue项目已运行成功

  4. 修改config文件夹中：index.js

     • 生成的时候一定要修改index.js 中的生成路径，否则后面程序运行打包页面会显示空白，找不到路径

     • 将build：中assetsPublicPath: './', 加点
       

  5. 在vue项目build文件夹中创建：electron.js

     electron.js:

     // Modules to control application life and create native browser window
     const {app, BrowserWindow} = require('electron')
     const path = require('path')
     
     function createWindow () {
       // Create the browser window.
       const mainWindow = new BrowserWindow({
         width: 800,
         height: 600,
         webPreferences: {
           preload: path.join(__dirname, 'preload.js')
         }
       })
     
       // and load the index.html of the app.
       mainWindow.loadFile('../dist/index.html')
     
       // Open the DevTools.
       // mainWindow.webContents.openDevTools()
     }
     
     // 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.whenReady().then(() => {
       createWindow()
       
       app.on('activate', function () {
         // 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 (BrowserWindow.getAllWindows().length === 0) createWindow()
       })
     })
     
     // Quit when all windows are closed, except on macOS. There, it's common
     // for applications and their menu bar to stay active until the user quits
     // explicitly with Cmd + Q.
     app.on('window-all-closed', function () {
       if (process.platform !== 'darwin') app.quit()
     })
     
     // 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.

      

  6.  注意修改：
     

  7.  

     修改package.json:配置
     

     • 配置命令："build:electron": "npm run build && electron build/electron.js",

  8.  

     npm run build:electron：用来启动electron【原始创建项目就可以，项目添加了上传控件】启动成功
      

  9. 在配置打包的package.json

     "build:exe": "electron-packager ./dist/ butel --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite"【上面配置已填加】

     electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

     sourcedir 资源路径，在本例中既是./dist/

     appname 打包出的exe名称

     platform 平台名称（windows是win32）

     arch 版本，本例为x64

     icon 为打包exe图标

  10. 将build中的electron.js、package.json文件复制到dist中【dist文件：执行npm run build生成】
      • 修改electron.js 
        

      • 修改package.json

         

        

  11. 执行：npm run build:exe 打包exe命令
      
      会出现打包成功的文件夹，在里面寻找exe ，

  12. 注意：exe文件不能拿出来单独使用，可以在文件夹中双击使用，也可以使用创建快捷方式 使用