【Electron-Vue】搭建Electron-Vue前端桌面应用_electron-vue文档-程序员宅基地

技术标签： Vue  Electron  前端  electron  vue.js  

目录

前言

搭建前准备

开始搭建

第一步：全局安装vue脚手架（如果已安装，就不必进行这一步了）

第二步：通过vue脚手架，创建一个vue项目

第三步：进入创建好的vue项目文件，安装electron

第四步：配置package.json文件和main.js文件

第五步：加载vue项目

第六步：运行electron命令，弹出应用框。

前言

最近准备写一个前端桌面应用，了解到了一个新的框架——Electron，它是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。接下来，我们就来搭建一个基于vue的electron应用吧。

搭建前准备

1、安装nodejs   nodeJS官网

给大家推荐一篇超详细的安装教程：Node.js下载安装及环境配置教程【超详细】

2、设置npm淘宝源

npm install --registry=https://registry.npm.taobao.org

3、安装cnpm淘宝镜像

npm install cnpm -g --registry=https://registry.npm.taobao.org

开始搭建

第一步：全局安装vue脚手架（如果已安装，就不必进行这一步了）

1、通过win+R打开黑窗口，输入以下命令，安装vue脚手架

npm install -g @vue/cli

2、安装以后可以通过以下命令，查看脚手架版本

vue --version

第二步：通过vue脚手架，创建一个vue项目

在黑窗口输入以下命令，创建vue项目

vue create 项目名

过程中可以选择vue2或vue3版本，根据需要选择，因为我们这个项目打算用vue3来实现，所以我选择的是vue3。

第三步：进入创建好的vue项目文件，安装electron

1、在黑窗口执行以下命令进入vue项目文件。

cd 项目名

 2、执行以下命令安装electron（如果用npm可能下载不上）

cnpm i electron -S

 如图所示electron安装成功，显示版本是24.1.2。

第四步：配置package.json文件和main.js文件

1、在编译器中打开该项目， 在package.json文件中添加以下内容，并创建main.js文件（任何 Electron 应用程序的入口都是 main 文件）：

{
  "name": "electron-demo",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron": "electron ."
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "electron": "^24.1.2",
    "vue": "^3.2.13"
  },
...
}

2、在main.js文件中引入electron

/**
 * app 模块，它控制应用程序的事件生命周期。
 * BrowserWindow 模块，它创建和管理应用程序 窗口。
 */
const { app, BrowserWindow } = require('electron')

// 添加一个createWindow()方法来加载vue项目文件
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  //此处需要填写需要加载的项目文件，官网案例写的是win.loadFile('index.html')
}
/**
 * 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 
 * 可以通过使用 app.whenReady() API来监听此事件。 
 * 在whenReady()成功后调用createWindow()函数来打开窗口。
 */
app.whenReady().then(() => {
  createWindow()
})

第五步：加载vue项目

1、在终端输入以下命令，运行vue项目。

npm run serve

 2、在 main.js 中添加需要加载的 vue项目路径，也就是vue项目运行地址。

第六步：运行electron命令，弹出应用框。

在终端输入以下命令，弹出electron桌面应用窗口。

npm run electron

以上就是整个项目的搭建过程，项目搭建完成就可以写项目啦！后续可能会更新一些在项目中遇到的问题和vue-electron项目打包的文章。

如有误，请指正！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aDiaoYa_/article/details/130307349

智能推荐

CNN典型模型及pytorch实现 —— GoogleNet_多尺度卷积代码-程序员宅基地

文章浏览阅读1.1k次。14年的冠军 model；GoogleNet（把网络结构增加到了22层）证明了用更多的卷积、更深的层次，可以得到更好的效果；但是纯粹增大网络也有一些缺点：参数太多，容易过拟合； 网络越大，计算的复杂度越大； 网络越深，越容易出现梯度消失或梯度弥散；为了在增加网络深度和宽度的同时减少参数，提出了 Inception；GoogleNet 和 AlexNet 结构的区别在于中间有好..._多尺度卷积代码

【一】微服务技术栈导学-程序员宅基地

文章浏览阅读952次。微服务是什么。微服务技术栈组成。_微服务技术栈

Java网络编程——NIO的阻塞IO模式、非阻塞IO模式、IO多路复用模式的使用_nio io模式-程序员宅基地

文章浏览阅读1k次，点赞3次，收藏6次。NIO虽然称为Non-Blocking IO（非阻塞IO），但它支持阻塞IO、非阻塞IO和IO多路复用模式这几种方式的使用。_nio io模式

整数规划蒙特卡洛模拟（Matlab实现）(1)-程序员宅基地

文章浏览阅读283次，点赞3次，收藏3次。matlab生成的随机数是伪随机数，因此可生成时间相关的随机数，总之和当前时间相关。%产生一行三列的区间在【0，99】上的随机整数。%设置该命令是因为每次产生随机数的时候，随机数生成器触发器的状态都会翻转一次。if p0

Python:求最大公约数与最小公倍数（辗转相除与递归两种方法）_python求最大公约数和最小公倍数-程序员宅基地

文章浏览阅读1.2w次，点赞3次，收藏50次。导读 最大公因数，也称最大公约数、最大公因子，指两个或多个整数共有约数中最大的一个。a，b的最大公约数记为（a，b），同样的，a，b，c的最大公约数记为（a，b，c），多个整数的最大公约数也有同样的记号。求最大公约数有多种方法，常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数，a，b的最小公倍数记为[a，b]欧几里得算法 _python求最大公约数和最小公倍数

AndroidStudio插件 GsonFormatPlus使用_android studio gsonformatplus怎么用-程序员宅基地

文章浏览阅读8.9k次，点赞4次，收藏24次。How to use lombok plugin in Android Studio?https://stackoverflow.com/questions/37991892/how-to-use-lombok-plugin-in-android-studio_android studio gsonformatplus怎么用

随便推点

Spring基于XML配置AOP_spring aop xml配置-程序员宅基地

文章浏览阅读326次。......在切面内使用来定义切点，然后在通知中使用来指定切点。切点表达式用来匹配切入的目标类和方法。目标类只能是 Spring 容器管理的类，切面只能切入 Bean 中的方法。_spring aop xml配置

【C语言回顾】数组-程序员宅基地

文章浏览阅读1.6k次，点赞32次，收藏34次。各位小伙伴，大家好！话不多说，我们直接进入正题。以下是C语言数组的讲解。以上就是小编对C语言数组的讲解。如果觉得小编讲的还可以，还请一键三连！互三必回！持续更新中~！

tf.data.Dataset函数-程序员宅基地

文章浏览阅读2.4k次，点赞2次，收藏11次。函数原型tf.data.Dataset( variant_tensor)函数说明通常使用tf.data.Dataset.from_tensor_slices函数来创建一个Dataset对象，Dataset用于表示一个数据集，这个数据集是可以迭代的。from_tensor_slices函数的原型为：from_tensor_slices(tensors, name=None)，该函数的作用是将tensor张量在第一个维度上切分并转换成Dataset对象，包含多个元素。还有个类似的函数from_tf.data.dataset

Windows下 VSCode配置cuda编译环境_code runner cuda编程 windows-程序员宅基地

文章浏览阅读1.6w次，点赞16次，收藏51次。Windows系统下，在Visual Studio 里配置CUDA环境网上已经有很多资料了，而在轻量级IDE VScode上编译CUDA的材料不是很多，本篇博文将简要介绍在Windows 系统下配置CUDA环境的方法。一、VScode插件 code-runner法在VScode里安装插件——coder-runner，在settings.json里添加（win10下的）"code-runner.executorMap": { "cu": "cd $dir; nvcc $fileN_code runner cuda编程 windows

iOS常见问题之苹果证书无法导出p12格式的文件_development 证书 无法选择 p12-程序员宅基地

文章浏览阅读1.4w次。本文介绍了苹果证书无法导出p12格式的文件的解决方法.一.打开钥匙串导出证书的默认界面,发现p12选项为灰色,无法选择.说明: 我对这种情况的证书进行测试,将直接导出.cer的证书,拷贝到其他电脑上并安装,打包项目时,提示:No valid signing identities matching the team ID "xxx" were found.在项目中,快捷键 command + ,选择_development 证书 无法选择 p12

[精品毕设]Python考务监考管理系统-程序员宅基地

文章浏览阅读19次。该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功！

推荐文章

热门文章

相关标签