Vue electron零基础使用教程

需求:给vue项目加一个外壳(electron),顾名思义也就是使用electron应用程序运行vue项目,直接将写好上线的vue项目在线地址放入electron程序中即可

操作步骤:

1、构建:构建应用程序首先要先安装electron相关依赖包以及搭建框架。在这里就不详细赘述了,直接上官网看文档https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

2、打包:此时就到了重要的时候,官方指定的是使用脚手架打包-----Electron Forge

https://www.electronforge.io/

首先安装Electron Forge

使用npm
npm install --save-dev @electron-forge/cli
npx electron-forge import

Checking your system
Initializing Git Repository
Writing modified package.json file
Installing dependencies
Writing modified package.json file
Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

使用yarn
yarn add --dev @electron-forge/cli
npx electron-forge import

Checking your system
Initializing Git Repository
Writing modified package.json file
Installing dependencies
Writing modified package.json file
Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

其次使用make命令来创建可分发的应用程序,官方文档也说的很清楚

3、最后直接赋上具体代码

icon为我所创建应用程序图标,out为输出目录,其打包所有配置均在main.js中进行

展示main.js,个别需注意:

–url为vue项目在线地址

–mainWindow为所创建应用程序打开的弹框

–BrowserWindow为官方api具体操作看这里https://www.electronjs.org/zh/docs/latest/api/browser-window

–图中还自定义了打开应用程序窗口顶部菜单,虽然最后没有使用,但是有需要的也可以打开注释

main.js
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
const url = 'http://xxxxxxxxxx'
//清理缓存
const clearObj = {
  storages: [
    'appcache',
    'filesystem',
    'indexdb',
    'localstorage',
    'shadercache',
    'websql',
    'serviceworkers',
    'cachestorage'
  ],
};
const createWindow = () => {
  // Create the browser window.
  //取消顶部菜单栏
  // Menu.setApplicationMenu(null)
  const mainWindow = new BrowserWindow({
    maximizable: true,
    show: false,
    // frame: false,
    autoHideMenuBar: true,
    webPreferences: {
      // preload: path.join(__dirname, 'preload.js'),
      partition: String(+new Date())
    },
  })
  // 加载 index.html
  // mainWindow.loadFile(url)
  mainWindow.setTitle("名字标题");
  mainWindow.loadURL(url);
  mainWindow.on('close', (event) => {
    mainWindow.webContents.session.clearStorageData(clearObj);
    mainWindow.reload();
  })
  mainWindow.maximize();
  //自定义菜单
  // const template = [
  //   {
  //     label: '重载',
  //     accelerator: 'CmdOrCtrl+R',
  //     click: (item, mainWindow) => {
  //       if (mainWindow) {
  //         // 重载之后, 刷新并关闭所有之前打开的次要窗体
  //         if (mainWindow.id == 1) {
  //           BrowserWindow.getAllWindows().forEach((win) => {
  //             if (win.id > 1) win.close();
  //           });
  //         }
  //         mainWindow.webContents.session.clearStorageData(clearObj, () => {
  //           mainWindow.reload();
  //         })
  //       }
  //     },
  //   },
  //   {
  //     label: '清除缓存数据',
  //     accelerator: 'CmdOrCtrl+Shift+Delete',
  //     click: (item, mainWindow) => {
  //       if (mainWindow) {
  //         mainWindow.webContents.session.clearStorageData(clearObj);
  //         mainWindow.reload();
  //       }
  //     }
  //   },
  // ]
  // const menu = Menu.buildFromTemplate(template)
  // Menu.setApplicationMenu(menu)
  // 打开开发工具
  // mainWindow.webContents.openDevTools()
  mainWindow.webContents.closeDevTools();
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()
  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 (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
// 除了 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', () => {
  if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件,然后用 require 导入。

4、最后就是生成的应用程序的配置信息修改–package.json

在package.json中的config中添加如下代码:

即forge下的packagerConfig中含有版本,名字,创作人,图标等配置信息

"config": {
    "forge": {
      "packagerConfig": {
        "appVersion": "1.1.3",
        "name": "你的应用程序名字",
        "appCopyright": "姓名",
        "icon": "应用程序logo"
      },
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "my_electron_app"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }

5、当然打包electron程序有很多种方法,比如:

electron-packager

electron-builder

Electron-Forge脚手架

Electron-Vue脚手架

等等,选择适合自己项目需求的才是最实用的。

到此这篇关于Vue electron零基础使用教程的文章就介绍到这了,更多相关Vue electron内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue+electron实现创建多窗口及窗口间的通信(实施方案)

    目录 一.前言 二.实施方案 1.创建多窗口 2.多窗口间的通信 三.后记 一.前言 对于一个桌面应用来说,有时候单独一个窗口用户使用起来会不太方便,比方说写日报或者查看文件等,若是在同一窗口内,我只能做一件事,不能边预览文件,边去查看聊天消息内容等.又或者是多个应用间相互关联的需要同步查看的事件,这都是极其不方便的.因此我们可以将某些集成到electron软件中的应用或者某些界面用单独的窗口打开(以下称为独立窗口). 二.实施方案 1.创建多窗口 首先我们从electron官网中找到创建窗口的

  • vue electron实现无边框窗口示例详解

    目录 一.前言 二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件 三.后记 一.前言 无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口 要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro

  • vue与electron实现进程间的通信详情

    目录 一.配置内容 1.进程间的通信 第一种方式引入ipcRenderer 第二种方式引入ipcRenderer 2.渲染进程常用配置 3.将ipcMain封装到一个js中统一处理 三.总结 前言: 本文主要介绍electron渲染进程和主进程间的通信,以及在渲染进程和主进程中常用的配置项. 一.配置内容 1.进程间的通信 渲染进程和主进程间的通信主要通过ipcRenderer和ipcMain这两个模块实现的,其中ipcRenderer是在渲染进程中使用,ipcMain在主进程中使用. 其中,渲

  • Vue electron前端开启局域网接口实现流程详细介绍

    目录 一.主要实现原理 二.获取本机局域网IP 三.开启服务器 四.关闭服务器 五.简单演示 六.整体代码 七.展望 一.主要实现原理 electron本身就集成了Nodejs,简直是不要太舒服.直接用最基本的http模块开接口即可,也可以用express,看个人喜好.下面演示的是http模块. 二.获取本机局域网IP 首先要获取本机局域网的IP,这就是接口的IP地址了. // 获取本机的局域网IP function getServerIp() { let interfaces = os.net

  • 关于electron-vue打包后运行白屏的解决方案

    目录 electron-vue打包后运行白屏的解决 electron-vue打包之后只有空白页问题 原因 electron-vue打包后运行白屏的解决 找到.electron-vue文件夹中的webpack.renderer.config.js文件,注释掉下面这段 然后再重新打包,问题解决. electron-vue打包之后只有空白页问题 原因 使用了history路由导致打包之后 只有空白页面,将路由改成hash之后就有显示了 以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们.

  • 用electron 打包发布集成vue2.0项目的操作过程

    手里有个老项目是基于element admin框架下的,之前写的时候没考虑到要打包成桌面端,后期需要打包成客户端,然后就开始了一些列版本操作,看着百度了都很简单,把electron 加入到自己项目中各种不兼容,升级版本,改代码各种百度,一个国庆假期就搞了这个事情,为了后面大家少踩点坑,打算详细的写写我的踩坑之路还有版本配置(版本配置真的很有必要,不要嫌麻烦,一步一步走哈) 1.大家比较关注的版本配置表 node.js v15.0.0 electron V14.2.9 vue 2.7.8 sass

  • Vue electron零基础使用教程

    需求:给vue项目加一个外壳(electron),顾名思义也就是使用electron应用程序运行vue项目,直接将写好上线的vue项目在线地址放入electron程序中即可 操作步骤: 1.构建:构建应用程序首先要先安装electron相关依赖包以及搭建框架.在这里就不详细赘述了,直接上官网看文档https://www.electronjs.org/zh/docs/latest/tutorial/quick-start 2.打包:此时就到了重要的时候,官方指定的是使用脚手架打包-----Elec

  • Bootstrap零基础入门教程(三)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.

  • Bootstrap零基础入门教程(二)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.

  • Vue+webpack项目基础配置教程

    最近在学习webpack,跟着课程一个单页面应用,在这里记录一下.这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置. 记录比较粗略,后续会更新. 1.开发环境:vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程 使用的IDE是 VScode 2.项目初始化 快捷键ctrl+` 打开vscode控制台 vscode界面 2.1安装webpack vue vue-loader npm init npm i webp

  • react router零基础使用教程

    目录 安装 配置路由 添加一个新页面测试路由 配置未找到的路由 跳转页面 通过 js 通过 dom 嵌套页面 安装 既然学习 react router 就免不了运行 react 安装 react npx create-react-app my-appcd my-appnpm start 安装 react router npm install react-router-dom 如果一切正常,就让我们打开 index.js 文件. 配置路由 引入 react-router-dom 的 RouterP

  • Vue守卫零基础介绍

    目录 1. 全局导航守卫 2. 路由独享守卫 3. 组件内守卫 1. 全局导航守卫 语法: # 守卫参数    + to: Route: 即将要进入的目标 路由对象    + from: Route: 当前导航正要离开的路由    + next: Function: 一定要调用该next方法,否则路由不向下执行,页面空白. # 全局前置守卫,当一个导航触发时,立刻触发前置守卫,router.beforeEach((to, from, next) => {  // ...  next()}) //

  • 零基础易语言入门教程(六)之逻辑型命令

    逻辑型命令,就是非真即假的. 具体方法和步骤如下所示: 1.如果(): 属于逻辑型,不是真就是假,这种时间我们基本在编写程序时,会有两个选择方向,见下图所示: 2.如上图,如果命令属于逻辑型数据,且有两条输出方向,当我们在如果命令里填写的为真,那么我们的系统将会显示输出真的一个,反之则为假. 3.如果()命令在我们编写程序时属于常用命令,他在运行时我们需要给他一个条件,然后才能输出内容,有了条件我们在运行时给他一个输出方向即可, 以上所述是小编给大家介绍的零基础易语言入门教程(六)之逻辑型命令的

  • 零基础易语言入门教程(五)之逻辑型数据类型

    在上篇文章给大家介绍了零基础易语言入门教程(四)之数据类型,上篇针对数值到文本类型知识,今天给大家介绍下逻辑型数据. 具体方法和步骤如下所示: 1.逻辑型数据非真即假: 首先申请一个局部变量(A)类型为:逻辑型,编写代码为:A=1>2,那么输出的结果应为假,因等于1是赋值与1,然后代码中写道1大于2,所以这是假的,见下图所示: 2.关系运算符: 在上图大家需注意的是,A后面的等于号是赋值符号,而后面的≥,≠,<一些符号则是关系运算符. 关系运算符不是非要设置变量给其赋值才可以使用的,同样他可以

  • 零基础易语言入门教程(四)之数据类型

    我们一起了解下易语言的数据类型,跟我们现实生活是一样的,分为文本型和数值型,即是我们所说的文科生和理科生的区别. 参考文章:详解易语言中的数据类型 方法和步骤如下所示: 1.数值型(到数值命令): 使用该命令可将文本型等一类数据更改为数值型:我们来输入一行代码看看其作用: 2.到文本()命令: 我们先输入一行代码试试,见下图 3.小结: 每一行代码前后的数据类型必须转换为同一种,方可进行相连,相加,"+"在数据为文本型时是连接作用,数值型的跟数学里的符号一样. 以上所述是小编给大家介绍

  • 零基础易语言入门教程(三)之了解控制台程序

    易语言简介: 易语言是一门以中文作为程序代码编程语言.以"易"著称.创始人为吴涛.早期版本的名字为E语言.易语言最早的版本的发布可追溯至2000年9月11日.创造易语言的初衷是进行用中文来编写程序的实践.从2000年至今,易语言已经发展到一定的规模,功能上.用户数量上都十分可观. 易语言和其它编程语言一样都有后台程序,它也不一定必须是窗口程序的了,下面小编带大家了解易语言的控制台程序. 方法和步骤如下所示: 1.延时命令: 首先学习一个第一个命令,该命令可将其脚本界面延时.1000毫秒

随机推荐