electron + vue3 + element-plus + blockly项目记录

目录

项目背景

框架版本

框架的个人理解

项目搭建 

electron搭建

blockly(大坑)

开发

blockly

吐槽 

electron

loadFile和loadURL

BrowserWindow.getAllWindows()


项目背景

笔者之前主要是做后端,前端只了解一点点,用的也是vue2,但是工作需求要去做前端。虽然需求说使用的是vue3,奈何不会ts,vue3当vue2用。¯\_(ツ)_/¯

electron官方文档:简介 | Electron (electronjs.org) 

element-plus官方文档:Button 按钮 | Element Plus (element-plus.org)

blockly官方文档:Blockly 简介 | Blockly 中文文档 (tortorse.com) 

框架版本

vue:

electron:

blockly:8.0.5

element-plus:

electron-vite:

框架的个人理解

electron是一个使用前端三件套搭建桌面应用的框架,本身内容并不复杂,更多的是用来将你写出来的网页与操作系统建立联系,这么说不太严谨,官方一点的话语叫做“深化与操作系统和 Node.js 的集成”,至于页面的具体内容,你使用vue、react等框架都不会有任何影响,因此,在要求不高的情况下,你甚至可以只参照官网文档提供的教程去完成项目的electron框架部分。

blockly是Google提供的一个开源的库,有点类似低代码平台,但是是纯JavaScript开发的,100%客户端,不会与服务器有任何接触,可以用它去做可视化编程软件。

至于element-plus,也是比较常用的一个ui库了,不再过多介绍。

项目搭建 

electron搭建

笔者用的是electron-vite搭建项目,官方文档在这:快速开始 | electron-vite (cn-evite.netlify.app)

 因为是个前端小白,按照官方文档的步骤走的时候出了个糗。跟着官方文档安装electron-vite,然后去创建项目,官方文档里只贴了几种方式的创建语句:

yarn create @quick-start/electron

笔者小白想知道@quick-start/electron里的quick-start是不是项目名,于是将@quick-start换成了test,执行!

yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...warning "create-test@1.0.0" has no binaries
[1G[##] 2/2'C:\Users\XXX\AppData\Local\Yarn\bin\create-test' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
error Command failed.
Exit code: 1
Command: C:\Users\XXX\AppData\Local\Yarn\bin\create-test
Arguments:
Directory: C:\Users\XXX\Desktop\test
Output:info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.

???

这一下直接给笔者整蒙了,研究了一下报错信息(然后发现看不懂)。又换回去执行,这次没有任何问题,接着就是和官方文档贴出来的一样,一路往下进行配置,最后运行,畅通无阻。笔者好奇心被勾起来了,正常来讲项目名一定是可以更改的,并且执行创建语句后还有一次提示输入项目名,为什么会有两个项目名?为什么不能改项目名?带着这些疑问笔者询问了做前端的朋友。。。然后就出糗了。。。

@quick-start/electron并不是什么项目名,而是一个模块包!它提供了一个 Electron 项目的基础模板。豁然开朗,难怪执行后还要输入项目名,难怪改了“项目名”后执行报错。如果不想使用这个模板的创建语句应该是下面这样:

npm create my-electron-app-name

这里的my-electron-app-name才是项目名

blockly(大坑)

根据笔者的经验,blockly库绝对是Google某个或某些员工的kpi产物。整个官方文档观感体验极差,所谓的中文文档纯机翻,而且整篇文档示例极少,大部分都只有概念介绍

官方文档入门假设用户已经熟悉了是吧?真有你的

机翻内容

机翻内容

 而且不止是机翻的问题,有些地方介绍含糊不清

 这里的参考是官方提供的api吗?是模块还是什么?完全不知道用法,而且你需要科学上网才能点进具体内容然后才知道“哦哦哦,原来是这么用的”

还有,整个官方文档的示例代码都是基于纯JavaScript开发,没有其它任何使用框架的示例,这一点非常令人头疼,这年头谁还纯js开发

如果是个人开发,强烈建议不要使用blockly!

开发

开发内容主要是vue+blockly,electron基本只是个项目运行的壳子,只用到了和Windows系统的交互

blockly

blockly有个功能代码生成器,将工作区中的块转换成你想要的代码,按照官方文档的步骤,这只是个三四行代码的小问题,但是折磨了笔者一天半,中间咨询了前端朋友和ChatGPT,最后还是自己去翻源码才试出来了正确写法

官方文档写法:

1. 引入相关语言的生成器,注意要先引入blockly_compressed.js。不同的语言引入不同的js文件,具体参考官方文档

<script src="blockly_compressed.js"></script>
<script src="python_compressed.js"></script>

2. 使用代码生成器

var code = Blockly.Python.workspaceToCode(workspace);

很简单对吧,但是笔者用的是vue,肯定不是这么写的,于是笔者前往百度,得到以下写法

vue写法:

import Blockly from "blockly";
import 'blockly/python';var code = Blockly.Python.workspaceToCode(workspace);

还是很简单对吧!好!保存!执行!

 (꒪⌓꒪)

笔者随后咨询了ChatGPT,也是这种写法,询问前端朋友,被告知肯定是方法调用错了,报错信息是workspaceToCode未被定义,这个方法肯定不是这种方式调用,但是笔者手上还有一个能正确启动运行的项目,也是这种写法。笔者试过换版本等方法,但就是两个项目一个报错,一个没问题。随后开始研究源码。

成功写法:

import { pythonGenerator } from "blockly/python";var code= pythonGenerator.workspaceToCode(workspace);

两个写法读者都可以试一下,看一下哪个能正确使用,具体导致报错的原因笔者也不清楚

吐槽 

这垃圾库真有点毛病,笔者上周使用下面的写法成功运行之后就没动了,这周一回来一跑又报错,改成上面的写法后又成功了。。。建议读者两个都试一下

electron

由于electron框架是运行在Node和浏览器两个环境中的,所以划分出了主进程和渲染进程两个概念,主进程的运行环境是Node,渲染进程是浏览器。笔者项目的需求是通过electron的Node环境进行文件的读写操作,两个进程各有各的操作,这就涉及到electron的进程通信

进程间通信 | Electron (electronjs.org)

没有什么很复杂的东西,按照示例就可以实现。但是如果是读写文件需要注意一点,调用的方法是Node的fs.readFile和fs.writeFile,这两个方法都是异步操作的!如果需要获取数据返回值,可以使用promise封装方法。主要就是搞清楚主进程写哪些东西,渲染进程写哪些东西,然后通过官方提供的api调用进程间的通信就可以了。

读文件操作示例:

main.js(主进程):

async function load() {const readF = () => {return new Promise((res, rej) => {fs.readFile('./code.json', 'utf-8', (err, data) => {if (!err) {res(data)} else {rej(err)throw err}})})}const JSONData = await readF()return JSONData
}//创建窗口前加入主进程的监听
app.whenReady().then(() => {ipcMain.handle('load', () => load())createWindow()
})

preload.js(预加载):

contextBridge.exposeInMainWorld('file', {//向渲染进程暴露通知主进程读取文件的方法load: () => ipcRenderer.invoke('load')})

renderer.vue(渲染进程):

<template>
<button @click="load()">读取</button>
<p v-text="code"></p>
</template><script setup>
const code = ref();
async function load() {//调用预加载暴露的方法const data = await window.file.load()code.value = JSON.parse(data)
}
</script>

路径问题

另外,关于在main和preload文件夹下文件中写到的相对路径,都是基于out目录下对应的main和preload下的对应文件,这点需要注意

loadFile和loadURL

loadURL可以加载外部资源,也就是包括网站等非你项目包里的资源

loadFile只能加载包里有的文件

两个方法读取本地资源时都无法识别vue文件,会将内容全部作为文本显示在页面上,只能识别html文件并渲染

BrowserWindow.getAllWindows()

这个方法返回的窗口数组需要注意的是,新创建的窗口是从数组头部插入的,也即是如果你需要实现这种场景:打开一个新窗口并关闭原来的窗口,应该使用

// 在此之前是new BrowserWindow操作
const wins = BrowserWindow.getAllWindows()
wins[1].close()

而不是wins[length - 2].close()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/20228.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ MFC 学习笔记+小型通讯录系统实现

MFC 最详细入门教程 [MFC常用函数总结]&#xff08;https://www.cnblogs.com/jiu0821/p/4606639.html&#xff09; [C & MFC]https://www.cnblogs.com/gaohongchen01/p/4176963.html [MFC入门&#xff08;一&#xff09;]https://www.cnblogs.com/yangyuqing/p/10283641…

古月居《ROS入门21讲》零基础学习笔记

文章目录 前言1.课程简介2.Linux系统介绍及安装3.Linux基础操作&#xff08;操作集&#xff09;命令结构常用命令快捷操作 4.cpp&python极简基础&#xff08;操作集&#xff09;简单对比安装编译器编译和运行 5.安装ROS6.ROS是什么7.ROS的核心概念节点与节点管理器节点&…

【对话ChatGPT】如何看待java行业内卷的问题?

本文首发自「慕课网」&#xff0c;想了解更多IT干货内容&#xff0c;程序员圈内热闻&#xff0c;欢迎关注"慕课网"&#xff01; 作者&#xff1a;ccLoveStudy 当今大环境&#xff0c;编程行业火热&#xff0c;而java行业更是首当其冲&#xff0c;但是为此&#xff0…

Windows 11的最新人工智能应用Windows Copilot面世!

Windows Copilot是Windows 11预览版中的一项AI辅助功能。 Windows 11还包括设置应用程序的更改&#xff0c;更广泛的支持压缩文件格式。 上个月&#xff0c;微软宣布将继续其将ChatGPT应用于所有产品的冒险之旅&#xff0c;推出了名为Copilot的新Windows 11功能。几个月前&…

State of GPT:大神Andrej揭秘OpenAI大模型原理和训练过程

来自&#xff1a;Web3天空之城 进NLP群—>加入NLP交流群 前言 OpenAI的创始人之一&#xff0c;大神Andrej Karpthy刚在微软Build 2023开发者大会上做了专题演讲&#xff1a;State of GPT&#xff08;GPT的现状&#xff09;。 在这个朴实无华的题目之下&#xff0c;Andrej带来…

OpenAI大神Andrej爆火演讲,官方第一次揭秘大模型原理和训练过程!

来源 | Web3天空之城 作者 | 天空之城城主 OpenAI的创始人之一&#xff0c;大神Andrej Karpthy刚在微软Build 2023开发者大会上做了专题演讲&#xff1a;State of GPT&#xff08;GPT的现状&#xff09;。 在这个朴实无华的题目之下&#xff0c;Andrej带来的是一场超级精彩的分…

Huntly: 一款超强大的自托管信息管理工具,支持管理RSS、自动保存网页、稍后阅读...

公众号关注 「奇妙的 Linux 世界」 设为「星标」&#xff0c;每天带你玩转 Linux &#xff01; ​ 今天推荐的这个项目是「Huntly」&#xff0c;一个自托管的信息管理工具。 简单来说&#xff0c;它包含以下功能&#xff1a; RSS 订阅和阅读&#xff1b;自动保存浏览过的网页&a…

带你从零开始入门AI绘画神器Stable Diffusion

一、本地部署 Stable diffusion 1. 前言 目前市面上比较权威&#xff0c;并能用于工作中的 AI 绘画软件其实就两款。一个叫 Midjourney&#xff08;简称 MJ&#xff09;&#xff0c;另一个叫 Stable-Diffusion&#xff08;简称 SD&#xff09;。MJ 需要付费使用&#xff0c;而…

记一次iOS微信恢复聊天记录的尝试

最近手机坏了&#xff0c;为了到天才吧维修手机&#xff0c;为手机做了一个爱思助手的全备份。结果手机修好之后爱思助手无法恢复备份到手机。之前从来没有想到过iOS备份会失效&#xff0c;所以没有对微信聊天记录做单独的备份。尝试了2次无法恢复&#xff0c;确认不是偶然无法…

跨越时空的对话:如何使用AI阅读工具ChatDOC快速建立数字化身?

跨越时空的对话&#xff1a;如何使用 ChatDOC 快速建立数字化身&#xff1f;以史蒂夫乔布斯 AI 为例 开门见山&#xff0c;这篇文章主要介绍如何将 AI 改造为靠谱、好用、基于某个人物的数字化身。比如&#xff0c;乔布斯 AI、马斯克 AI、张一鸣 AI、王兴 AI、佛陀 AI、孔子 A…

《花雕学AI》16:BingGPT桌面端的另外一个惊喜—完美整合了新Bing的AI作画功能

你是否曾经想过&#xff0c;如果你能用语言描述你想要的画面&#xff0c;就能让AI为你生成一幅美丽的图画&#xff0c;那该有多好&#xff1f;你是否曾经想过&#xff0c;如果你能在桌面端直接与新Bing进行智能、流畅、有趣的对话&#xff0c;而不需要打开浏览器或安装插件&…

“上4休3”公司不建议新公司模仿;甲骨文组队,欲挑战微软OpenAI组合;Qt Creator 11 Beta发布|极客头条...

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&#…

我给Chat GPT写了个记忆系统

ChatGPT-LifeTime OpenAI 的模型有一个固定的 Token 限制&#xff0c;例如 GPT-3 的 Davinci 模型最多可以处理2049 个 Token&#xff0c;大约 1500 个英文单词。最新 Turbo 模型大约是 4,096 个 Token&#xff0c;大约是 3000 个英文单词&#xff0c;也就是意味着Chat GPT它会…

微软Copilot“杀疯了”:Windows引入AI助手、Bing接入ChatGPT,弯道超车的机会来了?...

来源&#xff1a;大数据文摘授权转载自AI前线 作者&#xff1a;刘燕、冬梅、核子可乐 5 月 23 日消息&#xff0c;微软在刚刚举办的 Build 大会上宣布了一项令人振奋的消息。毫无疑问&#xff0c;本届大会的重点落在了 AI 上&#xff0c;包括 Copilots for Windows 11 及其他一…

[使用指南]在使用MyEclipse时如何添加 更新插件

MyEclipse v2022.1.0正式版下载 通过Eclipse市场目录或各种更新站点类型添加插件&#xff0c;可以定制你的MyEclipse IDE(或Angular IDE)。 一、从目录中添加插件 添加额外插件最简单方法是通过Eclipse Marketplace目录。 1. 要打开目录&#xff0c;请从Catalog中选择Help&…

HackTheBox - TartarSauce Write Up

IP&#xff1a;10.10.10.88 OS&#xff1a;Linux DIFFICULT&#xff1a;Medium 0x01 Information Gathering 端口扫描指纹识别 rustscan -a 10.10.10.88 -r 1-65535 --ulimit 1000 -- -sV -sC -sT --min-rate 5000.----. .-. .-. .----..---. .----. .---. .--. .-. .…

项目准备工作、笔试题目讲解

目录 讲一下冯诺依曼体系结构输入的处理 查bug基本步骤 我希望你重点可以讲一讲处理的这个过程&#xff0c;该如何处理呢&#xff1f; 介绍一下Maven Maven如何配置阿里云镜像&#xff1f; 介绍一下springboot 介绍一下mybatis 为什么有些人说mybatis不是很好&#xff1f…

vscode IDE 能用的上的扩展工具功能介绍

记录分享vscode扩展&#xff0c;包括提升开发效率。必备。主题美化。ChatGPT等。 参考 vscode-extensions [Best] 记录分享方式&#xff0c;整理自己用的扩展&#xff0c;还有一键备份和还原方法。 ⭐快速下载和使用扩展 后面会介绍很多vscode扩展.这裡有一个技巧&#xff0c;…

vscode中文乱码解决方法总结

第一种方法&#xff1a;直接点下面的 找到GB18030(其实GB都可以&#xff0c;我也不懂&#xff0c;一个一个试吧) 运行就可以了 第二种方法&#xff1a;点击设置&#xff0c; 在上面搜索 编码 &#xff0c;点击utf8 下拉找到GB 第三种方法&#xff1a; 这种方法我也不会&#xf…

CodeWhisperer的正确使用

重点1&#xff1a;推出Amazon Bedrock。这项新服务允许用户通过API访问来自AI21 Labs、Anthropic、Stability AI和亚马逊的基础模型。&#xff08;Anthropic 就是之前跟 ChatGPT 掰手腕的 Claude 的模型。Stability AI 就是 Stable Diffusion 背后的公司。&#xff09; 重点2&…