Electron+Vue3+Vite搭建桌面应用的示例代码

 更新时间:2023年07月23日 12:23:16   作者:阿虎儿  
本文主要介绍了Electron+Vue3+Vite搭建桌面应用的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1. 现实问题

得益于 Vite 卓越的前端开发体验,越来越多的 Electron 项目也开始应用它来构建开发。翻阅各种社区资源可以发现很多基于 Vite 搭建的 Electron 开发模板,但都存在着一些共同的问题:

  • 配置相对复杂,繁琐
  • 需要辅助脚本来配合编译开发
  • 无法举一反三,自主选择前端框架(Vue、React 和 Svelte 等)
  • 无法保护源代码

electron-vite旨在解决这些问题,为 Electron 提供更快、更精简的开发体验。

这个脚手架虽然说的很厉害,但是还是有一些不足,比如对vue项目初始化时的配置不如官方的精细。还需要自己手动配置自己喜爱的开发方式。但是瑕不掩瑜,它依然是目前我认为搭建electron配置最少的方式了。

2. 开始

# npm
npm create @quick-start/electron
# yarn
yarn create @quick-start/electron
# pnpm
pnpm create @quick-start/electron
✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes
Scaffolding project in ./<electron-app>...
Done.

接下来 npm install安装就可以了

3. 开发调试

script脚本中有两个比较像npm run startnpm run dev

  • start先打包成静态文件,再启动electron加载本地文件,预打包前的预览
  • dev先启动本地服务器,再启动electron加载服务页面,开发时使用
{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "An Electron application with Vue",
  "main": "./out/main/index.js",
  "author": "example.com",
  "homepage": "https://www.electronjs.org",
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win --config",
    "build:mac": "npm run build && electron-builder --mac --config",
    "build:linux": "npm run build && electron-builder --linux --config"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^2.0.0",
    "@electron-toolkit/utils": "^1.0.2",
    "electron-updater": "^5.3.0"
  },
  "devDependencies": {
    "@electron/notarize": "^1.2.3",
    "@rushstack/eslint-patch": "^1.3.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-prettier": "^7.1.0",
    "electron": "^24.4.1",
    "electron-builder": "^23.6.0",
    "electron-vite": "^1.0.23",
    "eslint": "^8.42.0",
    "eslint-plugin-vue": "^9.14.1",
    "less": "^4.1.3",
    "prettier": "^2.8.8",
    "vite": "^4.3.9",
    "vue": "^3.3.4"
  }
}

执行npm run dev 会看到

4. 打包exe

执行npm run build:win就会开始打包,打包前会从github下载必要的3个资源文件,这三个文件虽然不大,但是大概率要下载失败,所以手动点击报错信息上的网址手动下载下来。

  • winCodeSign-2.6.0.7z
  • nsis-3.0.4.1.7z
  • nsis-resources-3.4.1.7z

下载下来以后,将他们拷贝到C:\Users\[your name]\AppData\Local\electron-builder\Cache目录下,新建两个文件夹winCodeSignnsis,将压缩包解压到对应的目录,结构如下

  • winCodeSign\winCodeSing-2.6.0
  • nsis\nsis-3.0.4.1
  • nsis\nsis-resources-3.4.0

然后再执行npm run build:win

 *  正在执行任务: npm run build:win 
> electron-app@1.0.0 build:win
> npm run build && electron-builder --win --config
> electron-app@1.0.0 build
> electron-vite build
vite v4.3.9 building for production...
✓ 2 modules transformed.
out/main/index.js  1.43 kB
✓ built in 147ms
vite v4.3.9 building for production...
✓ 1 modules transformed.
out/preload/index.js  0.42 kB
✓ built in 18ms
vite v4.3.9 building for production...
✓ 11 modules transformed.
../../out/renderer/index.html                   0.52 kB
../../out/renderer/assets/icons-e5112e1e.svg    9.06 kB
../../out/renderer/assets/index-4b0e6ae1.css    2.74 kB
../../out/renderer/assets/index-1a29896b.js   150.63 kB
✓ built in 1.25s
  • electron-builder  version=23.6.0 os=10.0.22621
  • loaded configuration  file=D:\leehoo2\electron-app\electron-builder.yml
  • writing effective config  file=dist\builder-effective-config.yaml
  • skipped dependencies rebuild  reason=npmRebuild is set to false
  • packaging       platform=win32 arch=x64 electron=24.5.1 appOutDir=dist\win-unpacked
  • building        target=nsis file=dist\electron-app-1.0.0-setup.exe archs=x64 oneClick=true perMachine=false
  • building block map  blockMapFile=dist\electron-app-1.0.0-setup.exe.blockmap
 *  终端将被任务重用,按任意键关闭。 

打包后的exe文件就在项目的dist目录,双击后直接安装了,也没有提示安装目录等提示。

具体个性化的需求还需要自行查看官网进行调整。

到此这篇关于Electron+Vue3+Vite搭建桌面应用的示例代码的文章就介绍到这了,更多相关Electron+Vue3+Vite搭建桌面应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • el-table 树形数据 tree-props 多层级使用避坑

    el-table 树形数据 tree-props 多层级使用避坑

    本文主要介绍了el-table 树形数据 tree-props 多层级使用避坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • 基于Vue的延迟加载插件vue-view-lazy

    基于Vue的延迟加载插件vue-view-lazy

    这篇文章主要介绍了基于Vue的延迟加载插件vue-view-lazy,可以使图片或者其他资源进入可视区域后加载,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 教你使用vue3写Json-Preview的示例代码

    教你使用vue3写Json-Preview的示例代码

    这篇文章主要介绍了用vue3写了一个Json-Preview的相关知识,引入后直接<json-preview v-model="jsonData"></json-preview>就可以使用了,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • avue实现自定义搜索栏及清空搜索事件的实践

    avue实现自定义搜索栏及清空搜索事件的实践

    本文主要介绍了avue实现自定义搜索栏及清空搜索事件的实践,主要包括对搜索栏进行自定义,并通过按钮实现折叠搜索栏效果,具有一定的参考价值,感兴趣的可以了解一下
    2021-12-12
  • vue+element表格实现多层数据的嵌套方式

    vue+element表格实现多层数据的嵌套方式

    这篇文章主要介绍了vue+element表格实现多层数据的嵌套方式,具有很好的参考价值。希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue3中<script setup> 和 setup函数的区别对比

    vue3中<script setup> 和 setup函数的区别对比

    这篇文章主要介绍了vue3中<script setup> 和 setup函数的区别,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue组件详解之使用slot分发内容

    vue组件详解之使用slot分发内容

    这篇文章主要介绍了vue组件详解之使用slot分发内容及Vue组件中slot的用法,需要的朋友可以参考下
    2018-04-04
  • vue等两个接口都返回结果再执行下一步的实例

    vue等两个接口都返回结果再执行下一步的实例

    这篇文章主要介绍了vue等两个接口都返回结果再执行下一步的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue.js通用应用框架-Nuxt.js的上手教程

    Vue.js通用应用框架-Nuxt.js的上手教程

    本篇文章主要介绍了Vue.js通用应用框架-Nuxt.js的上手教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue开发中遇到的跨域问题及解决方法

    Vue开发中遇到的跨域问题及解决方法

    在本篇文章里小编给大家整理的是关于Vue开发中遇到的跨域问题及解决方法,需要的朋友们可以学习下。
    2020-02-02

最新评论