Electron + Vue + Ant Design Vue：构建和发布桌面应用

最新推荐文章于 2025-01-06 20:38:04 发布

XwyMysql

最新推荐文章于 2025-01-06 20:38:04 发布

阅读量466

点赞数

CC 4.0 BY-SA版权

文章标签： electron vue.js javascript

本文链接：https://blog.youkuaiyun.com/XwyMysql/article/details/132933515

Electron 专栏收录该内容

56 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详细介绍了如何结合Electron、Vue.js和Ant Design Vue来创建和发布跨平台的桌面应用程序。从环境设置开始，通过Vue CLI创建项目，然后安装和配置Electron依赖，设置Vue和Electron的入口文件，引入Ant Design Vue组件，创建和修改Vue组件。最后，讲解了如何启动应用及打包发布的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Electron是一个流行的框架，可用于将Web技术（HTML、CSS和JavaScript）打包成跨平台的桌面应用程序。Vue.js是一个灵活且易于使用的JavaScript框架，而Ant Design Vue是一个基于Vue.js的UI组件库。结合使用这三个工具，我们可以轻松地构建和发布功能强大的桌面应用程序。本文将详细介绍如何从项目搭建到打包发布Electron + Vue + Ant Design Vue桌面应用。

环境设置

首先，确保您的开发环境中安装了Node.js和npm。使用以下命令检查它们是否已安装：

node -v
npm -v

创建Vue项目

使用Vue CLI创建一个新的Vue项目。打开终端并运行以下命令：

vue create electron-vue-app

按照提示进行配置选择，选择配置项时可以选择默认选项或根据您的需求进行自定义配置。

安装Electron依赖

进入项目目

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

XwyMysql

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

electron+vue3+vite+antdesign

yr123456654321的博客

05-07

867

首先在我的项目vue3+vite+antdesign 基础上使用electron，两者并不冲突，只需要在我原先项目基础上安装electron就行，需要安装一些包以及配置就可以了，本次记录一下怎么使用，以及当时遇到的问题。注意electron时，"type": "commonjs"，用vite项目的时候是"type": "module",(当时这个地方没注意，报错了)在项目根目录新建electron文件夹，再里面再新建electron.js。前提是vue3+vite+antdesign 没问题哈！

electron ant-design-vue 不能用_Electron入门指北 - 沉迷代码的萌新

weixin_39987313的博客

11-14

451

最近几年最火的桌面化技术，无疑是Qt+和Electron。两者都有跨平台桌面化技术，并不局限于Windows系统。前者因嵌入式而诞生，在演变过程中，逐步完善了生态以及工具链。后者则是依托于和CCM(Chromium Content Module),支持和原生以及自主封装的Electron API。因为项目考虑跨平台的技术选型，研究过长达一年的Electron，并且做了很多尝试，所以想与诸君分享El...

参与评论您还未登录，请先登录后发表或查看评论

Electron+vue3+vite+antd-vue,前端Vue开发桌面程序

qq_43326668的博客

05-22

1075

当您想要创建一个具有良好用户界面的跨平台桌面应用程序时，可能会选择使用 Vue.js、Electron 和 Ant Design Vue。Vue.js 是一个流行的 JavaScript 框架，使用它可以轻松地创建动态的用户界面。Electron 是一个基于 Chromium 和 Node.js 的框架，用于构建跨平台桌面应用程序。Ant Design Vue 是一款基于 Vue.js 的 UI 组件库，提供了许多易于使用的 UI 组件。

electron ant-design-vue 不能用_Vue结合Electron构建跨平台应用（TDD）

weixin_39523887的博客

11-20

503

现已更新vue3+electron源码，本教程源码已删除。https://github.com/nofacer/vue3-electrongithub.com前言我只学了1天的Vue，如果有说错的地方请多多包涵并且最好可以给我反馈。教程源码：https://github.com/nofacer/Electron-Vue-TDD（已删除）这篇教程主要是介绍如何将Electron和Vue相结合来...

Electron + antdesignPro + electron-builder 开发及打包

weixin_45259457的博客

08-22

463

之前用的electron-package 打包比较麻烦还通过 nsis 打出的安装包，配置图标。这一版用的 electron-builder。

Vue3+Electron+AntV 从项目构建到打包发布

weixin_44220328的博客

08-31

850

vue+electron项目，从项目构建到打包全过程

electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合

05-02

Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题项目打包后仍有问题待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了，想试试新功能 ...

2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享

weixin_45013937的博客

09-10

6074

特点拖拽播放桌面歌词 mini模式自定义托盘右键菜单任务栏缩略图，歌曲操作音频可视化自动/手动检查更新 Nedb数据库持久化自定义安装路径，安装界面美化浏览器中启动客户端 Travis CL，AppVeyor自动构建换肤，下载，本地歌曲匹配，网络变化桌面通知，分享歌曲/歌单/MV/视频等到QQ空间登录，私人Fm，歌单，专辑，歌手，排行榜，MV，视频，评论，搜索，用户，动态，...

记录 Vue 3 + TypeScript + Vite + Ant-design + Electron构建桌面App开发模板

最新发布

hi 有缘人

01-06

321

【代码】记录 Vue 3 + TypeScript + Vite + Ant-design + Electron构建桌面App开发模板。

electron 打包_electron + ant design pro + electron-builder初尝试

weixin_39683172的博客

11-30

700

electron 客户端前言&需求公司最近一个项目不适合B端访问，产品经理在需求评审时提高最理想的是做一个PC的客户端，但是公司没得做PC客户端的人，咋办？来了，是时候装B了。咳咳，那个，那个，我来，我来搞定。正文1.涉及技术公司的技术栈是react, 项目是后台，框架必然选择阿里的ant design pro,打包工具electron-builder。2.创建项目创建一个ant desi...

基于 umijs + electron + ant-design-pro 的项目模板开发代码

03-12

基于 umijs + electron + ant-design-pro 的项目模板开发代码

electron ant-design-vue 不能用_桌面端跨平台解决方案之Electron简介与快速上手

weixin_39849930的博客

11-11

575

本文涉及到的概念会很多，为了控制篇幅，这里更多的是抛砖引玉，更多资料需要大家到参考资料中自行补充相关知识概念。Electron简介Electron（最初名为Atom Shell）是GitHub开发的一个开源框架。它允许使用Node.js（作为后端）和Chromium[^chromium]（作为前端）完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发，著名...

Electron+React+Ant-Design 构建初始化应用

刘岩的专栏

10-16

5369

参考： https://www.imooc.com/article/39978 https://www.jianshu.com/p/20817ba6041d Electron：作为Native支持的项目搭建 React：作为前端界面框架 Ant-Design作为UI库安装Electron 使用npm的方式进行全局安装，因为electron有自己的命令行工具，所以使用全局安装 electron安装...

【Electron-vue】构建桌面应用（8）- antd组件绑定到原型上无法使用

chenqk_123的专栏

09-27

990

1.前言前面关于electron打包可安装程序的准备工作已经基本完成了，除了Mac os下没有环境，暂时无法测试打包情况，但是package.json中既然支持Mac os的打包，那就应该问题不大。完成了前面的准备工作，现在终于开始着手开发的心心念念vue。之前是获取到exe文件返回的数据，需要根据返回信息来告诉用户启动成功或者失败。就需要将获取的信息通过message组件，notification组件等组件给出提示信息。由于之前用惯了react+antd的开发，所以索性在vue项目中也使用antd来

electron elctron-vue集成antd设置按需加载

weixin_43294560的博客

09-12

673

1、下载 cnpm install ant-design-vue --save cnpm install babel-plugin-import --save 2、按需加载在.babelrc文件中的最后plugins内添加 ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件(先下载less编译器) 3、使用方式

Electron-Vue + Ant desigin vue

Mu_Soul的博客

05-09

926

cd vue项目：cd app_name 安装环境： npm i --save ant-design-vue main.js中 import ‘anti’ from ‘anti-desigin-vue’ Vue.use(anti)

用TypeScript编写Electron + React + Ant-Design 项目

11-22

940

1、首先安装React脚手架 npm install create-react-app -g 2、用create-react-app脚手架创建typescript模板 create-react-app my-app --template typescript 3、安装react-app-rewired以及cross-env npm install react-app-rewired cross-env 4、引入Ant-Design yarn add antd 修改src/App.t.

在vue项目中使用electron,生成桌面图标，快速打开系统

fang0321的博客

09-07

2212

在vue项目中使用electron,生成桌面图标，快速打开系统

vite配置electron、ElementPlus或者AntDesignVue

读心悦

08-23

1469

就暂时不描述，只可意会不可言传了。