vueCli3加electron创建项目

最新推荐文章于 2025-06-10 09:02:13 发布
原创 最新推荐文章于 2025-06-10 09:02:13 发布 · 933 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用Vue CLI创建项目，并通过图形界面安装electron-builder插件，实现跨平台桌面应用开发。涵盖项目创建、插件安装、运行及打包全流程。

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

1、项目创建

vue create project

2、运行vue ui打开图形化界面，安装vue-cli-plugin-electron-builder插件

或者

vue add electron-builder

3、运行项目：

yarn electron:serve

打包项目：

yarn electron:build

 

vue-cli3+Electron
hunter_97的博客
04-22 3821
注意：我这里使用的是vuecli3。之前的版本可以参考electron-vue 起步。 一、 创建项目 创建vue项目。 参考我之前的文章vue 之 vue-cli3，创建项目。这里我创建的项目是electron-vue-test。 安装electron,自动安装和手动安装任选其一。 2.1 自动安装，进入到项目根目录，执行：vue add electron-builder，然后选择elec...
已有vue cli项目改成electron
summer942zjb的博客
07-23 366
安装依赖 # npm安装不了的话 换cnpm试一下 npm i -D vue-cli-plugin-electron-builder electron package.json中加入图中红框部分代码 // src/background.js 这个是electron的入口文件 const { app, BrowserWindow } = require('electron') const isProd = process.env.NODE_ENV !== 'development' con.
vue-cli-plugin-electron-builder：使用Electron轻松构建用于桌面的Vue.js应用
01-30
Vue CLI插件电子生成器 使用Electron轻松构建用于桌面的Vue.js应用 生成状态： 顶级支持者 快速开始： 在使用Vue-CLI 3或4创建的应用程序目录中打开一个终端（建议使用4）。 然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器： vue add electron-builder 而已！ 您准备好出发了！ 要启动开发服务器： 如果使用（强烈建议）： yarn electron:serve 或者，如果您使用NPM： npm run electron:serve 要构建您的应用程序： 使用纱线： yarn electron:build 或使用NPM： npm run electron:build 要查看更多文档， 。 支持者 过去的支持者
【2021年】通过vue-cli创建electron项目
夏2同学的博客
07-26 696
1. 创建项目 vue create your-project-name 2. vue-cli添加electron-builder依赖 // 切换工作目录 cd vue3-electron/ // 添加依赖 vue add electron-builder // !!! 请保证node版本>=14.0.0 否则会报错 其官网地址：Vue CLI Plugin Electron Builder (nklayman.github.io) 3. 添加UI依赖 // 这里选择使用的是bootstrap
深入理解vue-cli-plugin-electron-builder插件开发指南
最新发布
gitblog_01178的博客
06-10 298
深入理解vue-cli-plugin-electron-builder插件开发指南 前言 在现代前端开发中，将Vue应用打包为桌面应用已成为一种常见需求。vue-cli-plugin-electron-builder插件为开发者提供了一种无缝集成Electron到Vue CLI项目中的解决方案。本文将深入解析该插件的核心功能和使用技巧，帮助开发者更好地构建跨平台桌面应用。 原生模块支持 基本配置 ...
elementui基于vue-cli@3快速创建electron项目
LLL_liuhui的博客
03-24 1351
使用 vue-cli@3 1、快速地搭建一个基于 Element 的Vue项目。 1)创建vue项目 创建vue3项目之前，确认安装了@vue/cli npm install -g @vue/cli # OR yarn global add @vue/cli 如果已安装，执行如下命令。 vue create my-app cd my-app yarn serve 运...
Electron+vue-cli3开发跨平台桌面应用
EtherealSymbol的博客
07-17 1716
这里写目录标题1.创建项目1.1 安装Nodejs1.2 使用cnpm加速下载1.3 为什么不使用electron-vue搭建呢1.4 安装/升级vue-cli31.5 创建vue项目1.6 自动安装Electron1.7 手动安装Electron1.8 编译并启动APP2.配置项目2.1 配置ESLint代码格式检查工具2.2 配置vue3.项目基本设定3.1 主进程和渲染进程简介3.2 APP窗口大小3.3 取消跨域限制3.4 取消菜单栏3.5 设置APP窗口图标3.6 设置APP窗口标题栏名称4.打包
electron项目搭建使用vue-cli
chuy_young
01-21 317
1.nodejs环境 安装nodejs//不做介绍 2.npm全局安装vue npm install vue@next -g 3.cmd 使用vue创建vue项目 vue create demo(项目名称) 4.集成 electron vue add electron-builder 5.在pageage.json会生成下列指令 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build",
Vue3+Electron创建项目
Continue的博客
01-09 1172
文章目录1.vue cli创建项目2.安装引用electron 1.vue cli创建项目 vue create 项目名 可以选择配置的方式，这里有默认的配置，也可以自己配置 这里我选择自己配置，回车确认，进入配置选项 这里我选择Babel编译、TypeScript编写、router、vuex、linter、formatter代码规范 再选择版本，当vue3 接着连环问： 是否需要class风格的装饰器？一般选择no 使用babel编译ts吗？选择yes，babel是更好的选择 使用history模
vue-cli3+electron构建项目打包踩坑记
qq_41538952的博客
09-01 669
构建项目的过程就不说了,网上一大堆,一搜一大把,主要是讲一下在当前环境下使用electron-builder打包的问题； package.json配置如下： 如图,electron/electron-builder/webpack等都是最新盘本,electron打包是有一个默认安装路径的,并且在不加任何配置的情况下,是直接安装在默认路径下的;目前项目需求打包之后让用户能够自己选择安装路径的;解决过程如下： 1.查看electron官方说明：如下 大概的意思是我们需要配置nsis这一关键项,a
Vue cli3 cli2 项目 创建electron项目多入口，多模块
会飞的小鹿
08-20 2826
情景分析 一个electron项目如果是公司的企业项目，一般包含了开启后台master的功能，这样就会带来一些列的问题： 如果将起master直接放再路由里，在开发的时候，热重载会或者刷新（Ctrl + R）这一类操作会造成master掉线的情况； 当同时存在web环境和electron环境时，路由的切换和准备将是一大麻烦事儿！ 可能存在一个需求需要不影响当前路由的同时，开启另一个页面...
electron-vue-cli3:electron和vue cli3的基础开发示例
05-25
electron-vue-cli3(electron和vue cli3的基础开发示例) electron+cli3 个人博客 :desktop_computer: 运行效果 克隆代码 git clone https://github.com/zjinh/electron-vue-cli3.git 安装依赖 cd electron-vue-cli3 npm i 淘宝的npm源 npm config set registry 'https://registry.npm.taobao.org' npm config set ELECTRON_MIRROR='https://npm.taobao.org/mirrors/electron/' 或者使用安装依赖 运行项目 npm run dev 打包项目 npm run build
创建electron+vue项目（vue 一）
qq_34533703的博客
05-06 373
创建electron+vue项目
electron打包vue-cli项目为桌面程序（三）：开发环境使用electron开发桌面应用
欢迎
07-08 1619
一：引入electron cnpm install electron --save-dev 在开发环境使用electron 二：build文件夹下增加electron-preload.js文件，内容可以为空。 主要用来在创建桌面窗口前定义一些window全局变量。可根据项目自行定义。如：window.isElectron = true 在项目中进行判断是否为桌面程序打开，可以调用electr...
vue-cli3.x+electron安装教程
echo_Ae的博客
06-11 598
前言 这几天想搞个桌面软件玩玩，然后经过各种安装都靠不住，所以还是打算写一篇文章记录自己安装过程遇到的坑，需要对你有帮助。 教程开始 ps：请自行安装好vue环境 vue create my-electron cd 项目名称 我们使用 electron-builder插件 安装主要为了省事 vue add electron-builder 问题开始 node install.js报错 Response code 404 (Not Found) for https://npm.taobao.o
vue3集成electron
I_xuebi的博客
05-17 8551
vue3 vue 集成 electron 白屏 打包
Electron 12 学习（三）Vue 3 安装与配置
05-21 880
全局安装 Vue 3 脚手架： npm i -g @vue/cli Microsoft Windows [版本 10.0.19042.985] (c) Microsoft Corporation。保留所有权利。 D:\WebstormProjects>npm i -g @vue/cli npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi' npm WARN deprecated request@2.88.2: req..
如何正确的安装Electron，并完成vue3+electron的环境搭建
不喜欢BUG，喜欢前端的日子
08-22 4795
本文主要介绍了，如何使用 vue3+electron 的环境搭建配置，其中比较重要的就是在安装 electron 的时候碰到的下载问题如何解决和启动 electron 的时候如何把 vue 内嵌至 electron中，在运行项目的时候正确的启动项目。前人裁树,后人乘凉，希望大家在搭建的时候不会遇到任何bug，欢迎一起交流
vue+electron搭建及打包、打印功能
weixin_46262596的博客
03-20 1832
tip：在vue.config.js文件内配置以下代码，解决electron+vue环境运行下出现__dirname is not defined报错解决方法。4、全局安装后你可以发现background.js文件，electron主进程的代码放在此文件内，渲染进程就交给vue。二、1、可使用 Vue CLI 来添加 Vue.js 到你的 Electron 项目中。先记录到这里，后续遇到问题继续记录！主进程 background.js文件。修改vue.config.js文件。在主进程文件中添加以下代码。
使用Vue CLI3创建Electron模板指南
资源摘要信息: "electron-vuecli:vue cli3创建的电子模板" 1. Electron框架 Electron是一个开源框架，允许开发者使用JavaScript, HTML和CSS等Web技术来创建跨平台的桌面应用程序。它结合了Chromium和Node.js，能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值