vue3.0+electron+element-plus项目搭从0开始建教程（2）

最新推荐文章于 2025-03-07 00:34:20 发布

AngerJava

最新推荐文章于 2025-03-07 00:34:20 发布

阅读量1.2k

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/AngerJava/article/details/124301086

版权

本文介绍了如何从零开始构建一个Vue3.0结合Electron和Element-Plus的项目。在集成Element-Plus后，会生成lock文件，并在package.json中增加相关配置。需要注意设置Element的z-index以避免组件层级问题。解决Vue类型的报错，通过删除type并添加声明文件，最后通过运行npm run serve验证项目整合成功。

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

集成element-plus

// 集成element-plus
F:\创建vue项目\yourporject>npm install element-plus --save

集成完成后会生成一个lock文件，package.json 里会多如下截图

引入

备注：官方推荐的方式就是在引入Element时进行设置，z-index的初始值，如果不设置默认是2000 很多组件库的层级是大于2000的使用默认的话会产生遮罩情况以下是官方说法：

如果有这个报错

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AngerJava

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3.0+electron+element-plus项目搭从0开始建教程（1）

AngerJava的博客

04-20

2176

vue3项目搭建

VUE3+Electron+Element-plus初始化创建项目流程

zhaoyabhui2011的博客

12-30

314

创建VUE3 + Electron + Element-plus基础项目

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

Electron + Vue3 + ElementPlus (一)

qq_41355366的博客

07-07

1232

Electron + Vue3 + Element-Plus,使用vue-cli-plugin-electron-builder插件

最新发布

duihao的专栏

03-07

961

在拿 Tauri2开发了两套PC桌面软件，对号直播助力和对号JoChat、JoCall后，还是决定改回到Electron，这次决定全新从零将各个所用框架用官方最新版进行重构。之所以改回到Electron，原因主要是Tauri兼容性问题调起来太费劲，而且学习成本太高，对于团队现有前端技术人员来讲难度较大，只能向现实妥协了。这次新的任务要求比较紧，要将Duihao Jo!

electron + vue3 + element-plus + blockly项目搭建与踩坑

qq_44402992的博客

04-19

2505

前端小白初次接触electron+blockly

【Electron】总结：如何创建Electron+Element Plus的项目

ftm_csdn的博客

11-14

1059

我将结合官网手册与AI问到的信息，直接给出步骤，与命令。

Electron - #002 集成Element Plus

AlanL的专栏

09-08

518

集成Element Plus

electron+vue3+element-plus模板，带登录功能及菜单边栏

湘中小霸王的博客

08-11

786

该项目开发使用的node环境为 16.14.2。

管理系统系列-- Vue 3 + Vite 2 + Vue-Router 4 + Element-Plus + Ec.zip

02-25

综上所述，这个压缩包文件提供了基于Vue 3、Vite 2、Vue-Router 4和Element-Plus的前端项目基础，可能还涵盖了Electron用于构建桌面应用。开发者可以借此快速搭建一个功能完善的后台管理系统，或者学习这些前沿技术...

electron 项目第二篇引入element-plus 布局页面

倔强的钢蛋

03-25

1388

element-plus 布局vue3项目

electron-vue搭建（三）添加element-plus、vue-router

wz121341的博客

08-13

963

3、src下创建views/Home.vue及router/index.js。1、安装element-plus、vue-router。5、启动项目后显示Home页面。4、app.vue添加。2、main.js引入。

vue3+electron+element-plus+ts手把手搭建教程

数据大牛的博客

04-19

1861

vue3+electron+element-plus+ts手把手搭建可用项目

超详细！！！electron-vite-vue开发桌面应用之引入UI组件库element-plus（四）

qq_43206280的博客

08-14

1323

unplugin-auto-import是一个用于Vue.js的插件，它可以自动导入Vue.js的相关API，如Vue自身，Vue的RFC(响应式)，Composition API，以及其他一些常用的Vue功能。unplugin-vue-components是一个用于Vue.js的插件，它允许你导入Vue组件，而不需要在你的代码中显式地导入它们。这个插件可以让你按需导入组件，从而减少初始加载大小。

解决electron设置透明背景后，引入element-plus样式问题

m0_62475892的博客

06-11

731

app.vue文件中引入使用，这个时候会出现一个问题，el-button按钮的hover样式没有了，同时绑定的点击事件也无法触发。添加如下代码，则按钮的hover样式可以正常触发。首先给当前窗口设置自定义窗口以及背景色。然后自定义一个头部并引入。

electron+vue3全家桶+vite项目搭建【二】vite自动引入插件，按需引入element-plus

个人网站：https://www.longzipeng.online

03-31

2728

electron+vue3全家桶+vite项目搭建【二】vite自动引入插件，按需引入element-plus

快速搭建Vue3+element-Plus+electron桌面应用

DDDHL_的博客

04-28

4970

从0开始快速搭建 vue3 + electron 桌面级应用，快来康康~

electron实战之Electron+Vue+Vite+ElementPlus操作本地配置文件

BDawn的专栏

10-19

1678

使用Vue+Vite+ElementPlus搭建页面，然后通过electron将页面的表单信息保存到本地config.properties文件中。

Electron + Vue + ElementUI 之HelloWorld

my blog

12-28

632

sudo npm install @vue/cli -g sudo npm install @vue/cli-service -g sudo npm install -g electron node -v vue -V electron -v vue create vue-electron-demo cd vue-electron-demo npm run serve 添加Electron sudo vue add electron-builder 运行electron npm run

electron+vue3全家桶+vite项目搭建【三】按需引入element-plus图标

个人网站：https://www.longzipeng.online

04-01

2376

按需引入element-plus的图标

Vue3、Electron、Element-Plus 构建学习用聊天工作室指南

本资源是关于使用Vue3、Electron、Element-Plus和腾讯IM即时通讯服务搭建聊天工作室的项目文件。这个项目可以作为学习参考，适合那些想要了解如何结合现代前端技术和桌面应用程序开发的开发者。以下是对项目中所涉及...