electron-vue初探

最新推荐文章于 2024-08-27 17:41:49 发布
最新推荐文章于 2024-08-27 17:41:49 发布
阅读量5.4k 收藏 7
点赞数
分类专栏： electron 文章标签： electron electron-vue electron打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37446753/article/details/88422698
版权
本文介绍了使用electron-vue框架开发跨平台桌面应用的过程。从介绍electron的基本概念开始，包括主进程和渲染进程，然后讲解了开发环境的搭建、安装electron以及基于electron-vue模板的项目结构。在开发中，主要关注渲染进程，并展示了如何在项目中引入element-ui。最后，讨论了使用electron-packager和electron-builder进行打包发布时的注意事项，特别是避免在路径中使用中文。
摘要由CSDN通过智能技术生成

前端技术发展迅速，各种框架层出不穷，不外乎要借助浏览器去实现渲染。

最近一朋友想让我帮他做个打印机的插件，实现打印特定内容的功能，但又不接受网页的形式，于是技术选型我选择了electron，正好我之前也没玩过electron，就决定搞个桌面端demo试试。

什么是electron?

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

也就是说，你只要懂前端开发的一些技术，便可以构建开发出跨平台的桌面应用。可以运行于windows、linux、macOS等不同的操作系统。

Electron官网

开发环境

开发环境为node.js，请至node.js官网安装

安装electron

笔者使用的是yarn进行安装，其他用户也可以自行选择npm、cnpm等其他包管理工具进行安装

yarn global add electron

因笔者平时接触Vue较多，所以直接选择了electron-vue模版，该模版使用了vue-cli脚手架，webpack配置包括了vue-loader、electron-packager、electron-builder和一些常用的插件&#x

最低0.47元/天 解锁文章
汉堡会有的
关注
专栏目录
electron-vue-print-demo:electron+vuecli3 实现打印小票功能
05-25
electron-vue-print-demo electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作思路 1.用户点击打印 2.查询本地 electron-store(用来向本地存储，读取数据)是否存打印机名称 3.已经设置，直接打印 4.没有设置，弹出设置打印机框 5.用户设置好确认后打印 问题反馈 有什么问题可以提 issue 或扫描微信二维码跟我联系，项目持续优化，加群获取最新更新消息 关于我 您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。 如果对你有帮助送我一颗小星星（づ￣3￣）づ╭:red_heart:～
electron 学习笔记（二）—— electron-vue
娃哈哈_的博客
10-30 777
electron学习记录 第一章 基础知识点 第二章 electron-vue 文章目录electron学习记录一、electron-vue项目搭建二、启动常见错误1.process is not defined解决方案 一、electron-vue项目搭建 [electron-vue]是用vue-cli+electron框架搭建的项目架子。可帮助前端开发者，快速上手学习electron 官网地址 根据官网步骤搭建即可： # 安装 vue-cli 和 脚手架样板代码 npm install -g vu
【vue、Electron】搭建一个Electron vue项目过程、将前端页面打包成exe 桌面应用
最新发布
amoureux555的博客
08-27 1941
【vue、Electron】搭建一个Electron vue项目过程、解决Electron vue首次启动巨慢无法加载、执行npm run electron:build打包慢、如何设置打包的logo、设置exe图标、 设置页面程序的大小、窗口大小、如何设置打开窗口的名称/标题、如何设置打包后exe的名称、将前端页面打包成exe 桌面应用
Electron-Vue入门Demo
玩火的稻草人的博客
11-20 2218
前提条件，Electron框架能够正常的运行（electron环境的配置不是本文要说明的部分） 1，安装vue的环境模块 npm install -g vue-cli 2，初始化vue工程 vue init webpack demo 下面几个选项注意 Install vue-router? yes Use ESLint to lint your code? no Set up unit tes...
Electron开发 —— 简单demo之整合vue
qq_16670995的博客
08-25 1132
总得有个开始 前置条件： Electron开发 —— 简单demo vue开发 —— 简单demo vscore编辑器（非必须，自选喜欢即可） 本系列始终以win系统描述、mac和linux各大发行版操作基本相同，命令或许不同，请自行查阅官网 一：步骤： 1. 利用上一章节的demo，以及之前的vue开发系列，vue项目开发有2种模式，一种脚手架CLI生成，一种直接js引用，此处因为利用上一章...
electron-vue 介绍以及基础使用
qq_42783610的博客
12-24 3461
 electron-vue 介绍以及基础使用   Electron是一个基于node.js的跨平台桌面应用 它最大的有点在于可以使用JavaScript 和 HTML来构建跨平台的桌面应用。 我们常见的文本编辑器 atom，vscode就是基于Electron开发的。 electron-vue使用前需要一定的vue和vue-cli使用基础 安装生成项目: 最好不要选择eslint。 ...
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
本项目利用`electron-vue`、`electron-builder`和`electron-updater`这三款强大的工具，实现了一个完整的远程更新流程，包括检查更新、下载更新以及自动安装更新。以下将详细介绍这三个组件的功能和实现方式。 **1....
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了...
基于 electron-vue 开发的音乐播放器，界面模仿QQ音乐，技术栈electron-vue+vue+vuex+vue-r
05-25
【标题】基于 electron-vue 开发的音乐播放器是一个利用现代前端技术构建的桌面应用程序，其设计灵感来源于QQ音乐，提供了类似的功能和用户体验。这个项目采用的技术栈包括 electron-vue、vue、vuex、vue-router 和 ...
electron-vue-vite-webpack:Electron、vue3、vite2、webpack5、ant-design-vue2 整合
05-17
Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架 在开发期间使用“拜访”以保持快速启动的优势 使用“ webpack”解决包装期间的包装问题 命令 npm run dev npm运行构建 ...
electron安装+vue实现录屏的的demo
Z网球的博客
05-09 7695
github地址：https://github.com/zengwangqiu/electron-vue 安装electron最好采用cnpm 主进程 main/index.ts import path from "path"; import window from "./window"; import { dialog, app, ipcMain, globalShortcut, Notification, shell, screen } from "electron"; let mainWindow:
electron打包window应用.exe文件demo
11-30
electron.js打包成window应用的具体方法和案例，附带代码以及简约操作文档。
vue-electron-demo构建
凉酱的博客
01-22 518
官方的electron-vue文档????这种方法试了好多次一直网络超时下载不了，没找到原因，也可能单纯的网络原因？最后找了一种先构建vue项目再用electron-builder的方式，实现了，记录一下。 1.创建vue项目可以参考文章????搭建环境，这里不赘述了。 vue create vue-demo 2.进入创建好的vue项目cd vue-demo 然后下载 vue add electron-builder 这里遇见了一直一直下载不成功的问题，加sudo也还是不行 最后是su进入管理员权限，然
【electron-vue/vue】新手十万个为什么？
践行终生成长
01-20 495
前言：项目里需要用electron-vue框架，之前没学过vue相关语法。尝试直接撸vue官网，感觉vue语法很多都没在electron-vue里体现出来，很多东西依旧看不懂，还是不会什么搜什么比较适合我。 Q：.vue里为什么用exportdefault{} A：.vue的文件可以看成是一个组件，exportdefault只是为了导出去，说明这个.vue是可以被别的组件impo...
Electron-vue基本介绍及demo代码
日常笔记/总结/系列知识梳理
12-22 532
Electron-vue 是一个基于 Electron 和 Vue.js 的框架，用于开发桌面应用程序。它结合了 Electron 的跨平台能力和 Vue.js 的灵活性和易用性，使开发人员可以使用常见的前端技术来构建功能丰富的桌面应用程序。使用 Electron-vue，开发人员可以利用 Vue.js 的开发模式和组件化架构来构建桌面应用程序。它提供了一些预设的配置和工具，使开发人员可以更快地启动项目，并轻松地集成 Electron 和 Vue.js。你可以根据自己的需求进一步开发和定制化。
Electron集成vue开发
地理信息技术杂谈 博客，欢迎技术交流
10-26 1535
“如果你可以建一个网站，你就可以建一个桌面应用程序。Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可”。 “Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。” “Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。” 官方网站： http://www.elect
【Electron-Vue】入门学习笔记之一：搭建 Node.js 开发环境
亮出锋芒，剑指苍穹
08-20 653
Electron 可以使用纯 JS 来创建桌面应用，使用 Web 页面作为 GUI，相当于一个被 JS 控制的，精简版的 Chromium 浏览器。 Electron 基于 Chromium 和 Node.js ，所以使用之前需要搭建 Node.js 开发环境。 安装 Node.js，访问 https://nodejs.org/en/download/ 下载最新版本的 Node.js 安装包。 在安装过程中的配置界面，勾选 Node.js runtime 、npm package manager 和 Ad
Electron+vue 做一个桌面应用
meixinmeifei__的博客
03-14 304
Electron+vue
使用electron与vue搭建起步项目，并定制化窗口
pocher的博客
02-27 5553
话不多说，先上最终成果 第一步：安装node.js 首先确保你安装了node.js  没有安装的话去官网下载安装https://nodejs.org/zh-cn/  不推荐使用最新版本，因为有可能electron还不支持最新版的node.js，建议从8.0以上的版本开始 （注意：npm 命令被集成到了node.js里，安装node的时候已经自动将npm安装了。） 以往各个版本下载链...
electron-vue electron-log
12-15
electron-vue 是一个基于 electron 构建的 vue.js 框架。它结合了 vue.js 和 electron，可以让开发者使用 vue.js 的组件化开发方式来构建跨平台的桌面应用程序。使用 electron-vue 可以快速搭建 electron 应用的基础结构，并且利用 vue.js 的特性来开发界面和逻辑。 而 electron-log 是一个专为 electron 应用程序设计的日志模块。它为 electron 应用提供了方便的日志记录功能，可以将日志输出到文件或控制台，并且支持日志的级别和格式设置。electron-log 还可以方便地集成到 electron-vue 项目中，帮助开发者更好地管理和记录应用程序的日志信息。 electron-vue 和 electron-log 的结合使用，可以让开发者更加轻松地构建和管理 electron 应用程序。开发者可以利用 electron-vue 来快速搭建应用的界面和逻辑，同时使用 electron-log 来记录和管理应用程序的日志信息。这种组合可以提高开发效率，让开发者更加专注于应用程序的功能和用户体验。同时，electron-log 也可以帮助开发者更好地监测应用程序的运行状态，及时发现和解决问题，从而提高应用程序的稳定性和可靠性。因此，electron-vue 和 electron-log 是非常适合 electron 应用开发的工具，可以帮助开发者更好地完成应用程序的开发和维护工作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值