返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue electron零基础使用教程
  • 968
分享到

Vue electron零基础使用教程

Vue electronVue electron 2022-11-13 18:11:35 968人浏览 独家记忆
摘要

需求:给Vue项目加一个外壳(electron),顾名思义也就是使用electron应用程序运行vue项目,直接将写好上线的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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue electron零基础使用教程

本文链接: https://lsjlt.com/news/169775.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue electron零基础使用教程
    需求:给vue项目加一个外壳(electron),顾名思义也就是使用electron应用程序运行vue项目,直接将写好上线的vue项目在线地址放入electron程序中即可 操作步骤...
    99+
    2022-11-13
    Vue electron Vue electron
  • reactrouter零基础使用教程
    目录安装配置路由添加一个新页面测试路由配置未找到的路由跳转页面通过 js通过 dom嵌套页面安装 既然学习 react router 就免不了运行 react 安装 react np...
    99+
    2024-04-02
  • OpenMV零基础教程
    一、资料导航         “工欲善其事,必先利其器”。在正式学习OpenMV之前,你必须知道一条或几条OpenMV的学习途径。这里推荐星瞳科技的中文官网教程,这个教程里面包括了OpenMV IDE的下载和安装、OpenMV上手教程、Op...
    99+
    2023-08-31
    python stm32
  • Wireshark零基础使用教程(超详细)
    Wireshark 是一款开源的网络抓包工具,用于分析网络中的数据包。它可以帮助你深入了解网络通信过程,发现问题和解决网络故障。本教...
    99+
    2023-09-23
    Wireshark
  • JavaStream流零基础教程
    目录一、Stream流介绍二、Stream流实现与传统方式实现对比2.1、传统方式实现2.2、Stream流方式实现三、Stream流的常用API3.1、stream流的获取3.2、...
    99+
    2022-11-13
    Java Stream流 Java Stream
  • SQL 零基础入门教程
    目录一、了解 SQL二、检索数据三、排序检索数据四、过滤数据五、高级数据过滤六、用通配符进行过滤七、创建计算字段八、使用函数处理数据九、汇总数据十、分组数据十一、使用子查询十二、联结表十三、创建高级联结十四、组合查询十五、插入数据十六、更...
    99+
    2014-09-15
    SQL 零基础入门教程
  • Swaggo零基础入门教程
    目录配置流程注意区分下载swaggo初始化快速上手gin-swagger简单测试详细配置配置流程 注意区分 go-swagger != swaggo 二者功能差不多,都是生成接口文档...
    99+
    2023-01-28
    Swaggo入门 Golang Swaggo入门
  • VUE零基础入门axios的使用
    目录一.axios是什么二.axios的特点三.axios怎么安装四.在VUE全局挂载导入挂载使用五.axios便捷方法六.axios基础方法七.axios执行结果八.config ...
    99+
    2024-04-02
  • Android使用JetpackCompose开发零基础起步教程
    目录永远的Hello World分解的HelloWorld代码预览函数先搭建好之后呢,我们就来做第1个例子。 永远的Hello World 先搭建好之后呢,我们就来做第1个例子,编程...
    99+
    2023-05-15
    Android Jetpack Compose Jetpack Compose入门
  • Windows10安装MySQL教程(零基础)
    1、下载MySQL 官网:https://www.mysql.com/cn/ 点击下载 选择社区版 ...
    99+
    2023-09-07
    mysql 数据库 Powered by 金山文档
  • HTML入门零基础教程(四)
    嗨,大家好,我是异星球的小怪同志 一个想法有点乱七八糟的小怪 如果觉得对你有帮助,请支持一波。 希望未来可以一起学习交流。 通过前三篇的学习,相信你们对HTML有了一些基础的了解,那么我们就来先做一个小练习,巩固一下之前所学习的知识。 目...
    99+
    2023-08-31
    html 前端 css javascript vscode
  • Python零基础教程系列:“Hello World!”
    做了这么多准备,环境也搭建好了,辅助知识也掌握了,是到了编写我们第一个Python程序的时候了。在IDLE里或Pycharm里输入:print("Hello World!")...
    99+
    2023-06-01
  • JavaScriptTypescript基础使用教程
    目录简介安装安装命令使用原因TypeScript类型概述JS原有的类型TS新增的类型类型别名泛型简介 typescript是微软公司开发的开源编程语言,Type+Javascript...
    99+
    2022-12-08
    JavaScript Typescript JS Typescript基本使用
  • Vue守卫零基础介绍
    目录1. 全局导航守卫2. 路由独享守卫3. 组件内守卫1. 全局导航守卫 语法: # 守卫参数    + to: Route: 即将要进入的目标 路由...
    99+
    2024-04-02
  • Java Swing基础使用教程
    Java Swing是Java语言中的一个GUI工具包,它提供了一系列的组件和容器,可以用于创建各种桌面应用程序。本教程将介绍Java Swing的基本概念、组件和容器,以及如何使用它们来创建一个简单...
    99+
    2023-09-02
    java
  • 零基础搭建boot+MybatisPlus的详细教程
    目录1.准备工作1.1 创建数据库表1.2 创建boot项目1.3 创建实体类(映射数据库表)2.使用mybatisPlus(操作数据库)2.1 添加mybatisPlus依赖2.2...
    99+
    2024-04-02
  • Vue和React中快速使用Electron的简单教程
    目录提示:前言一、前提二、在Vue和React中快速使用1. 安装Electron2. 运行成功后,打包成软件总结提示: 本篇文章只是教你简单上手,Electron本身功能是非常强大...
    99+
    2024-04-02
  • Vue CLI 新手宝典:零基础打造 Vue 应用
    什么是 Vue CLI? Vue CLI 是一个脚手架工具,可简化 Vue.js 应用程序的创建和开发过程。它提供了预先配置的项目模板、构建工具和命令,使你无需手动设置即可快速开始。 安装 Vue CLI 确保已安装 Node.js 和...
    99+
    2024-03-13
    前言 欢迎来到 Vue CLI 新手宝典!本指南将指导你使用 Vue CLI 从头开始构建一个 Vue 应用程序。
  • Python零基础教程系列:代码编辑器
    Python解释器、pip工具箱和virtuanlenv虚拟环境都安装好了后,基本的Python环境就搭建好了,可以开始我们的“搬砖”之旅了。但是,等等,“工欲善其事,必先利其器”,我们还差一个很多小伙伴都非常喜欢的环节,那就是代码编辑器的...
    99+
    2023-06-01
  • 前端架构vue动态组件使用基础教程
    目录1、基本使用2、配合 keep-alive 使用1、基本使用 新建组件 Article.vue <template> <div> ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作