electron-vue 脚手架 、 打包exe

最新推荐文章于 2024-02-04 20:16:49 发布
最新推荐文章于 2024-02-04 20:16:49 发布
阅读量283 收藏 2
点赞数 2
文章标签： vue.js electron npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hfcaoguilin/article/details/124628569
版权
本文档详细介绍了如何使用Electron-Vue搭建项目，通过npm命令进行项目初始化、安装依赖、运行开发环境及打包应用。关键步骤包括调整build.js文件中的任务避免重名，引入multispinner库，最终成功生成exe可执行文件，该文件位于build目录下。
摘要由CSDN通过智能技术生成

electron-vue 脚手架 、 打包exe

    npm install -g yarn
    npm i -g @vue/cli @vue/cli-init
    vue init simulatedgreg/electron-vue electron-vue-demo-simulatedgreg
    cd .\electron-vue-demo-simulatedgreg 
        npm install
        npm run dev
        npm run build
            .electron-vue/build.js : tasks重名, 共4个tasks名字, 前2个是同一个, 后2个是同一个,  后2个改名字(比如改为tasksB)
            npm i  multispinner --save
                .electron-vue/build.js: 最后一个require语句下一行增加:
                    const Multispinner = require('multispinner')
            此时npm run build将可以打出 exe文件(在build目录下)
ziix
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
electron+vue将项目打包为exe可执行程序
流浪猫之家
10-17 288
手把手教Electron+vue的使用 - *小嘻嘻* - 博客园
Electron-builder 打包exe 安装程序
大英雄不该去雪山打滚
12-11 3065
趁热把博客写了，这几天在把网页套壳做成假C/S，用了electron，先直接说一下怎么把electron项目打包 用yarn装electron-builder，我没有全局装，只在这个electron项目文件夹里装， yarn add electron-builder --save-dev 然后就要对package.json里敲东西配置，下面是我成功打包出来installer.exe的： { "build": { "productName":"我的第一个软件", "appId": "co
vuecli脚手架搭建的项目打包成exe桌面程序步骤
最新发布
qq_59622629的博客
02-04 1035
终于成功了不报错了，其实这个错误依然能得到exe应用程序但是得不到安装程序，所以解决这个错误之后，也能得到安装程序了。exe程序和安装程序在哪呢，dist_electron文件夹下面有，自己查找。这个只是测试项目进行打包，但是实际项目并不一定适用，这个方法挺简单。我在终端输入了npm run electron:build。2024/2/4亲测有效方法，适合小白，因为我也是小白。在这个文件中我写了镜像啥的，反正我不懂粘上去就行了。1.vscode打开项目，然后进入终端，再输入。
将vue项目打包成exe文件
qq_53608274的博客
02-16 1901
将vue项目打包成exe文件
windows 安装 yarn
@木尘的小博客
09-04 3027
windows 安装 yarn 下载node.js http://nodejs.cn/download/ 通过 Chocolatey 安装 以管理员身份打开 cmd.exe @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy...
Electron-vue脚手架改造vue项目的方法
10-17
尽管Electron-vue是为了方便Vue项目构建桌面应用而设计的，但事实上，任何项目都可以通过Electron打包成桌面应用，关键在于理解如何适配Electron的环境，而不局限于使用Electron-vue。 总之，Electron-vue提供了一...
Electron-vue脚手架改造vue项目的方法.docx
01-13
Electron-vue 是一个基于 Vue 和 Electron 的脚手架，旨在帮助开发者快速将 Vue 项目打包成桌面应用。 Electron-vue 项目的核心是 Electron 框架，它允许开发者使用纯 JavaScript 调用丰富的原生 APIs，制造桌面应用...
electronic-vue：具有vue-cli脚手架，常见Vue插件，electron-packagerelectron-builder，unite2e测试，vue-devtools和Webpack的Electron＆Vue.js快速入门样板
02-02
电子VUE需要的优势vue-cli脚手架， webpack与vue-loader ， electron-packager或electron-builder ，以及一些最喜欢使用的插件vue-router ， vuex ，和这么多。 查看详细文档。 您会在此样板中找到的东西... 带有...
electron-vue-investor
04-03
"electron-vue-investor" 是一个基于 Electron 和 Vue.js 的项目，专为电子交易者设计。这个项目利用了这两个强大的技术栈，构建了一个桌面应用，可能用于股票、期货或其他金融产品的交易和分析。 首先，我们来了解...
electron-v2.0.18-win32-x64.zip
07-26
Electron Vue是基于Electron和Vue.js的一个集成开发环境，它为创建 Electron 应用提供了一个方便的脚手架。开发者通常会使用它来构建具有现代前端开发流程的桌面应用。"C:\Users\Administrator\AppData\Local\...
查看Python及库的安装目录
cshy2013的博客
10-20 4735
关于“查看Python安装目录及其库的安装位置”，无意中翻到了以前初学Python时的一篇note，贴出如下： 一、查看Python安装目录 两种简单方法如下： 方法1 在CMD窗口使用windows cmd的where命令： where python 方法2 进入python交互式环境ipython后，输入 import sys sys.executable 二、查看库的安装位置 python 标准库位置： %python安装路径%\Lib 第三方库位置： %python安
VUE 2.x + electron 打包桌面应用exe
鹿的迷雾林的博客
02-12 2万+
0.背景 最近做一个基于 VUE 2 的资产后台管理系统。因为暂时没有后台人员编写数据接口，只把前端页面构建出来了。 突然有一天，领导说有客户来访，需要看一看后台管理系统的界面演示。而当前做的web项目只有纯静态，也木有上线，所以给客户演示时非常不方便，于是领导喊我将其打包成一个桌面应用程序，直接可以离线观看的那种。 当时听着也是一愣，这玩意不是应该是c++或java这种更牛逼的东西干的事情...
打包VSCode源码为安装程序（.exe）
小伊同学的博客
02-13 5362
打包VSCode源码为安装程序
使用electron-vue把vue项目打包成.exe的桌面端程序
博乐110的博客
06-11 8042
由于公司有这方面的需求，之前自己还没接触过，于是花了点时间撸了下electron-vue文档。 首先贴上electron-vue文档地址：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ 接着按照文档的详细步骤一步步来： 1、# 安装 vue-cli 和 脚手架样板代码 npm install -g vue-cli 查看vue版本...
electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)
任磊
10-22 2346
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范 electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(
yarn build 和 npm run build打包的区别
热门推荐
轻风细雨_林木木
03-21 3万+
yarn build 和 npm run build打包有什么区别 结论： 没区别，yarn build === yarn run build === npm run build
Yarn包管理工具
上善若泪
10-03 1104
文章目录1 Yarn简介1.1 速度快1.2 离线模式1.3 可靠可确定性1.4 网络优化1.5 扁平化模式1.6 版本控制2 Yarn安装2.1 常见的NPM安装法 1 Yarn简介 Yarn就是一个类似于npm的包管理工具，它是由facebook推出并开源。 与npm相比，yarn 有着众多的优势，主要的优势在于：速度快、离线模式、版本控制。 1.1 速度快 npm会等一个包完全安装完才跳到下一个包，但yarn会并行执行包，因此速度会快很多。 Yarn会缓存它下载的每个包，所以无需重复下载。它还能并行化
怎样用electron把vue项目打包为桌面应用exe文件
超级婷
11-27 2万+
如果按本文操作遇到一些问题报错，如C:\Users\milyyy\AppData\Roaming\npm-cache\_logs\2018-11-27T07_36_17_406Z-debug.log等等，解决办法可以参见我的另一篇文章：electron打包VUE项目中遇见的报错解决 本篇文章源码请移步我的GitHub地址：简易使用electron打包vue 踩过了无数的坑，碰到了很多问题。终...
linux 编译环境打包,Linux上VsCode编译打包运行
weixin_42394100的博客
05-01 567
前提:最好使用root用户可以排除一些不必要的错误。一、 准备环境Node.js(>= 8.12.0, < 9.0.0)Python2.7Yarn(可以通过npm install yarn -g 命令安装，前提必须安装好nodejs)关于Node.js安装curl -sL https://deb.nodesource.com/setup_8.x -o nodesource_setup....
讲已有vue项目用electron-vue打包
07-27
当将已有的Vue项目使用electron-vue进行打包时，您可以按照以下步骤进行操作： 1. 安装 electron-vue 脚手架工具： ``` npm install -g vue-cli vue init simulatedgreg/electron-vue my-project ``` 2. 进入项目目录： ``` cd my-project ``` 3. 安装依赖： ``` npm install ``` 4. 添加 Vue 项目的主进程代码： 在 `src/main` 目录下创建 `index.js` 文件，并添加以下内容： ```javascript import { app, BrowserWindow } from 'electron' let mainWindow function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) mainWindow.loadURL(process.env.NODE_ENV === 'development' ? 'http://localhost:8080' : `file://${__dirname}/index.html`) mainWindow.on('closed', () => { mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (mainWindow === null) { createWindow() } }) ``` 5. 修改 `package.json` 文件： 在 `scripts` 段中增加以下两行代码： ```json "electron:serve": "cross-env NODE_ENV=development electron .", "electron:build": "vue-cli-service electron:build" ``` 6. 运行开发环境： ``` npm run electron:serve ``` 7. 构建应用程序： ``` npm run electron:build ``` 8. 完成后，您将在 `dist_electron` 目录中找到生成的应用程序。 请注意，上述步骤假设您已经安装了 Vue CLI 和 Node.js。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ziix

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

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

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

打赏作者

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

抵扣说明：

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

余额充值