前端时间我的一个朋友为了快速熟悉Vue3开发, 特意使用electron+vue3+ts开发了一个桌面端应用, 并在github上开源了, 接下来我就带大家一起了解一下这个项目, 在文章末尾我会放github的地址, 大家如果想学习vue3 + ts + electron开发, 可以本地clone学习参考一下. image.png 技术栈 以上是我们看到的便签软件使用...
├── classNames.options.ts # 样式名的配置,背景样式都通过这个文件渲染 ├── editorIcons.options.ts # 编辑页面的一些editor图标 ├── index.ts # 导出 └── shortcuts.keys.ts # 禁用的一些快捷键,electron是基于chromium浏览器,所以也存在一些浏览器快捷键比如F5 browser.options 这个文件的主要作用...
前端时间我的一个朋友为了快速熟悉 Vue3 开发, 特意使用 electron+vue3+ts 开发了一个桌面端应用, 并在github上开源了, 接下来我就带大家一起了解一下这个项目, 在文章末尾我会放github的地址, 大家如果想学习vue3 + ts + electron 开发, 可以本地clone学习参考一下. image.png 技术栈 以上是我们看到的便签...
31 8 65 2 独立开发者项目 发现《夜曲》 知识 野生技能协会 桌面 前端 typescript Vue ts electron vue3
// 设置应用主进程的入口mainProcessFile:"src/background.ts",// 设置应用渲染进程的入口rendererProcessFile:"src/main.ts",customFileProtocol:"../",// 打包选项builderOptions:{// 解决的问题:在安装到电脑后,系统通知无法工作appId:"com.zhuhong.vue3",// 软件idproductName:"JSON工具",// 打包后的...
│ │ ├── classNames.options.ts │ │ ├── editorIcons.options.ts │ │ ├── index.ts │ │ └── shortcuts.keys.ts │ ├── inotedb │ │ └── index.ts │ ├── less │ │ └── index.less │ ├── router ...
3.1 先打包vue3项目 yarnbuild # 如果提示错误, 请设置tsconfig.json中 compilerOptions.isolatedModules=falsenode_modules/@vue/reactivity/dist/reactivity.d.ts:26:15- error TS2748: Cannot access ambientconstenumswhenthe'--isolatedModules'flagisprovided. ...
【分享】Vite+Vue3+Electron打包桌面应用_哔哩哔哩_bilibili ⨯ Application entry file "electron\main.js" in the "D:\vs2024proj\electron_vite_ts_demo_sunny\electron-vite-demo-sunny\dist_electron\win-ia32-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration. failedTask=...
app.isPackaged主要是用来判断应用是否已经打包了,打包了我们只需要引用相对路径的html文件即可。 3.2 新建预加载文件 electron中有一个预加载的概念,也就是我们常说的preload,在该文件里面可以在其它脚本文件执行之前运行,它可以调用一些Node API。 在项目根目录新建electron-preload文件夹,然后在其目录下新建index.ts文...
vite.electron.build.ts //打包electron项目 index.html src main.ts App.vue background.ts //手动创建文件用于编写electron package.json tsconfig.json vite.config.ts background.ts import { app, BrowserWindow } from 'electron' // 等待Electron应用就绪后创建BrowserWindow窗口 ...