【Electron】使用vue-electron+electron-store创建项目，NSIS打包为exe可安装文件

最新推荐文章于 2024-08-10 08:20:55 发布
最新推荐文章于 2024-08-10 08:20:55 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： Vue 文章标签： electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23334071/article/details/115044772
版权
这篇博客介绍了如何利用electron-vue构建一个包含vue-router和vuex的Electron应用，并使用electron-store进行数据存储。详细步骤包括设置文件存储路径，以及如何借助NSIS将项目打包成exe可安装文件。解决项目启动中可能出现的问题，是开发者学习和实践Electron应用开发的实用指南。
摘要由CSDN通过智能技术生成

【Electron配置文档】https://www.electronjs.org/docs/api/browser-window

1、electron-vue

vue init simulatedgreg/electron-vue my-project

// 安装依赖请使用npm，yarn会出现未知的错误，可以改为cnpm或改为淘宝镜像
npm install cnpm -g --registry=http://registry.npm.taobao.org

就可以拥有一个 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等的脚手架。

2、electron数据存储 electron-store

npm install electron-store@4.0.0
or
yarn add electron-store@4.0.0
// 注意，高版本会有问题


// 使用方式
const Store = requir
最低0.47元/天 解锁文章
兵腾傲宇
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue3+ts+vite+electron electron-builder等文件打包参数配置说明
Missxu1895的博客
04-29 456
前端vue3+ts+vite+electron 打包electron-builder.json、electron-builder.yml等配置文件参数说明
vue-cli3+Electron
hunter_97的博客
04-22 3727
注意：我这里使用的是vuecli3。之前的版本可以参考electron-vue 起步。 一、 创建项目 创建vue项目。 参考我之前的文章vue 之 vue-cli3，创建项目。这里我创建的项目是electron-vue-test。 安装electron,自动安装和手动安装任选其一。 2.1 自动安装，进入到项目根目录，执行：vue add electron-builder，然后选择elec...
ElectronVue系列 -- 5.使用electron-store存储信息到本地磁盘
Tomonkey的专栏
10-03 6325
由于需要持久化存储一些信息到磁盘上，信息比较简单，无需过多设计。经过搜索发现electron-store比较好用 1. 引入插件 Electron-Store https://github.com/sindresorhus/electron-store $ npm install electron-store 2. 修改配置 修改文件vue.config.js文件进行配置 module.exports={ pluginOptions: { electronBuilder: {
electron+原生js 开发跨多平台Mac、Windows 和 Linux的electron store持久化数据存储（七）
斗师——Ace
11-20 1054
数据持久化的方法：1.存储在mysql等数据库中。2.存储在浏览器的localstorage中。3.存储在本地文件夹中。 electron store的git地址：https://www.npmjs.com/package/electron-store。 安装electron store： npm install electron-store 1. electron store的实例化...
Vue Unicons 使用教程
最新发布
gitblog_00208的博客
08-10 362
Vue Unicons 使用教程 vue-unicons1000+ Pixel-perfect svg icons for your next project as Vue components项目地址:https://gitcode.com/gh_mirrors/vu/vue-unicons 项目介绍 Vue Unicons 是一个基于 Vue.js 的开源图标库，由 Anton Reshet...
electron-vue使用electron-store判断应用是否是第一次打开
qq_59599812的博客
09-23 983
1.安装electron-store，它是Electron应用程序中持久化存储数据的模块。3.引入electron-store，在background.js中使用。4.在渲染进程中的created中监听，也可以在其他钩子中监听，根据需求。2.如果出现版本问题。
electron+vue3全家桶+vite项目搭建【16.1】electron多窗口,pinia状态同步，扩展store方法，主动同步pinia的状态【推荐】
个人网站：https://www.longzipeng.online
08-22 2309
electron多窗口,pinia状态同步，扩展store方法，主动同步pinia的状态【推荐】
electron-vue 使用vuex的方法
qq_37530404的博客
04-02 6905
在electron-vue中，使用vuex，调用this.$store.dispatch()发现函数并没有执行 原因：是因为electron-vue脚手架引入了vuex-electron这个插件，其中使用了createSharedMutations用于多进程之间数据共享，插件详见：https://github.com/vue-electron/vuex-electron#installation...
electron-store存储数据
李剑一
03-10 2476
存储数据我并没有采用数据库方案，仅仅存储数量不多的简单数据也不至于动用数据库。这里选择的是electron-store作为主要存储工具，这个工具即使不作为主要存储工具仅存储用户启动项也是极好的。 安装electron-store，如果使用npm安装不成功则使用cnpm安装，总有一款适合你。 使用方法： const Store = require('electron-store'); const store = new Store(); //如果需要加密存储 就用下面的 //const store = n
electron框架+打包vue+react 成exe 安装下一步客户端桌面程序
08-28
在开发桌面应用时，`Electron`框架是...通过解决上述问题，可以成功将项目打包为可执行的`.exe`文件，实现客户端桌面程序的部署。同时，持续关注官方更新和社区资源，可以有效地解决新出现的问题，保证项目的顺利进行。
electron-vue 打包所需文件
03-23
3. **免安装版本**：如果不需要安装过程，可以选择创建便携式版本，这将使打包过程更简单。 4. **自动更新**：利用 electron-builder 的内置更新机制，可以轻松实现应用的自动更新。 总之，使用 Electron-Vue 结合...
electron-vue-print-demo:electron+vuecli3 实现打印小票功能
05-25
electron-vue-print-demo electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作思路 1.用户点击打印 2.查询本地 electron-store(用来向本地存储，读取数据)是否存打印机名称 3.已经设置，直接打印 4.没有设置，弹出设置打印机框 5.用户设置好确认后打印 问题反馈 有什么问题可以提 issue 或扫描微信二维码跟我联系，项目持续优化，加群获取最新更新消息 关于我 您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。 如果对你有帮助送我一颗小星星（づ￣3￣）づ╭:red_heart:～
electron-store的了解使用
qq_44041514的博客
08-10 7890
介绍 以文件形式缓存数据，保存Electron应用程序或模块的简单数据持久性-保存和加载用户首选项，应用程序状态，缓存等 数据保存在app.getPath（'userData'）中的JSON文件中。您可以在主进程和渲染器进程中直接使用此模块。 app.getPath(name)-储存你应用程序设置文件的文件夹，默认是appData文件夹附加应用的名称。 appData-当前用户的应用数据文件夹，默认对应： %APPDATA%Windows 中 $XDG_CONFIG_HOME...
electron-store 本地储存数据
言小溪 的博客
03-22 3077
elelctron-store elelctron-store 是很好的本地储存库 https://www.npmjs.com/package/electron-store 使用 npm i elelctron-store 设置 electron-vue 的运行环境 在项目根路径下新增 vue.config.js module.exports={ pluginOptions: { electronBuilder: { nodeIntegration: true
使用 electron-store 报错
qq_43477721的博客
01-30 1383
时间为 2021 年 1 月 30日 项目运行环境参数： "electron": "^9.1.0", "electron-store": "^7.0.0", 解决方法：降版本 "electron-store": "^4.0.0" 就这么简单粗暴
electron-store存储信息到本地磁盘
老电影故事的博客
02-20 4588
以文件形式缓存数据，保存Electron应用程序或模块的简单数据持久性-保存和加载用户首选项，应用程序状态，缓存等数据保存在app.getPath（‘userData’）中的JSON文件中。您可以在主进程和渲染器进程中直接使用此模块。app.getPath(name)-储存你应用程序设置文件的文件夹，默认是 appData 文件夹附加应用的名称。
ruoyi-vue | electron打包教程（超详细）
我这孩子从小记性就不好，什么东西都要写下来才放心
07-03 8389
公司项目由于来不及单独做客户端了，所以想到用electron直接将前端打包程exe,dmg等格式的安装包。由于使用的ruoyi-vue框架开发，所以这篇教程以ruoyi-vue为基础的。
Electron 数据存储详细教程 Electron-store使用
吉法师的博客
02-15 8701
Electron如何进行数据存储？ 首先不是通过数据库的存储方式，因为一般的软件不会在本地建立数据库，而且这样也有数据丢失的风险，这篇教程主要是讨论轻量化的数据存储。 Electron的特殊性 Electron运行的时候似乎封装了一些东西，导致它读取文件不像Java，Python或者Nodejs那样简单，会出现权限的问题，这个时候就需要通过工具来解决了。 Electron-store的使用) npm地址 const Store = require('electron-store'); const stor
使用vue-cli创建electron项目
03-30
1. 安装Vue CLI 首先，需要确保已经安装了Node.js和npm。然后在终端中输入以下命令来安装Vue CLI： ``` npm install -g @vue/cli ``` 2. 创建Vue项目 在终端中输入以下命令来创建一个新的Vue项目： ``` vue create my-electron-app ``` 在创建过程中，可以选择使用默认配置或手动选择插件和配置。 3. 安装electron-builder 在终端中输入以下命令来安装electron-builder： ``` npm install electron-builder --save-dev ``` 4. 配置package.json 在package.json文件中添加以下内容： ``` "build": { "productName": "MyElectronApp", "appId": "com.example.my-electron-app", "directories": { "output": "build" }, "files": [ "dist/**/*", "node_modules/**/*", "package.json" ], "win": { "icon": "public/icon.ico", "target": "nsis" }, "nsis": { "oneClick": false, "allowElevation": true, "installerIcon": "public/icon.ico", "uninstallerIcon": "public/icon.ico", "installerHeaderIcon": "public/icon.ico", "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "MyElectronApp" } } ``` 其中，productName、appId、icon等可以根据实际情况进行修改。 5. 修改main.js 在src/main.js文件中添加以下内容： ``` const { app, BrowserWindow } = require('electron') let win function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('dist/index.html') win.on('closed', () => { win = null }) } app.on('ready', createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (win === null) { createWindow() } }) ``` 6. 编译打包 在终端中输入以下命令来编译打包应用： ``` npm run build ``` 打包后的应用程序将保存在build目录中。 7. 运行应用 在终端中输入以下命令来启动应用： ``` npm start ``` 应用程序将在Electron中运行。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

兵腾傲宇

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

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

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

打赏作者

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

抵扣说明：

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

余额充值