Electron vue使用详解

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文件不能拿出来单独使用,可以在文件夹中双击使用,也可以使用创建快捷方式 使用

       

       

  • 1
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值