您好!欢迎来到源码码网

源码码网

热门搜索: 淘宝客    点赞系统    虚拟商城源码    小程序源码   

Electron+Vue搭建跨平台桌面应用Hello World

  • 软件教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2021-07-17 10:51
  • 阅读:507

介绍

        Electron是一个基于Chromium和 Node.js的跨平台的桌面应用开发框架,可以让我们用html css js的技术开发跨平台桌面应用软件,也是当下最流行的跨平台桌面应用框架。

环境搭建

        在创建Electron跨平台应用之前,我们需要先安装一些常用的工具,如Node、vue和Electron等。

        1.安装Node.js

        进入Node官网下载页http://nodejs.cn/download/,然后下载对应的版本即可,下载时建议下载稳定版本,然后双击安装程序根据提示安装即可。

        2.安装/升级vue-cli脚手架

        a.先执行:vue -V,确认下本地安装的vue-cli版本

        b.如果没有安装或者不是最新版,可以执行: npm install @vue/cli -g 安装/升级

        3.安装Electron

        使用如下命令安装Electron插件

      npm install -g electron
      或者
     cnpm install -g electron

        为了验证是否安装成功,可以使用如下的命令。

      electron --version

        4.创建运行项目

        Electron官方提高了一个简单的项目,可以执行以下命令将项目克隆到本地。

      git clone https://github.com/electron/electron-quick-start

        然后在项目中执行如下命令即可启动项目。

cd electron-quick-start
npm install
npm start

        启动后项目的效果如下图:

1.jpg

除此之外,我们可以使用vue-cli脚手架工具来创建项目 

vue init simulatedgreg/electron-vue

然后根据下面的提示一步步选中选项即可创建项目,如下所示:

2.jpg

然后,使用npm install命令安装项目所需要的依赖包,安装完成之后,可以使用npm run dev或npm run build命令运行electron-vue模版应用程序,运行效果如下图所示 :

3.jpg

工程结构

4.jpg

我们主要的开发的代码在src下,分为主进程、渲染进程,main下操作的是主进程,renderer下操作的是渲染进程。

全部评论(0)
推荐阅读
  • 推荐10个基于Vue3.0开发的全家桶优秀开源项目
  • 推荐10个基于Vue3.0开发的全家桶优秀开源项目
  • 1、PPTistPPTist是一个基于Vue3.x+TypeScript+Pinia+AntDesignVue+Canvas的在线演示文稿(幻灯片)应用,还原了大部分OfficePowerPoint常用功能,实现在线PPT的编辑、演示,支持导出PPT文件。2、vue-next-adminvue-next-admin是一个基于Vue3.x+Typescript+Vite+Elementpl
  • 源码教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-12-05 21:22
  • 阅读:55
  • 开源可商用的数据可视化分析工具DataEase
  • 开源可商用的数据可视化分析工具DataEase
  • DataEase是开源项目,它是数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化。DataEase支持丰富的数据源连接,能够通过拖拉拽方式快速制作图表,并可以方便的与他人分享。
  • 源码教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-12-05 20:56
  • 阅读:172
  • 推荐一个5K Star的企业级开源后台系统源码
  • 推荐一个5K Star的企业级开源后台系统源码
  • 最近在逛网站的时候发现一个不错的开源项目,这个项目目前收获了5KStar,觉得不错,值得拿出来和大家分享下。该项目是由河南·洛阳1024创新实验室团队研发的一套互联网企业级的通用型中后台解决方案!使用最前沿的前后台技术栈SpringBoot和Vue,前后端分离。
  • 源码教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-12-05 20:19
  • 阅读:299
  • 推荐一个4.2k Star 的开源监控系统源码
  • 推荐一个4.2k Star 的开源监控系统源码
  • 如果你是一位前端工程师,那你一定不止一次去解决一些顽固的线上问题,你也曾想方设法复现用户的bug,结果可能都不太理想。怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决。身为一名前端工程师,我每天都要面临很多线上的问题,一时间让我焦头烂额。公司其他的监控系统也有,但是每次解决问题都需要辗转于各种监
  • 源码教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-12-05 20:01
  • 阅读:130
  • 外网如何访问局域网程序:nps内网穿透服务使用介绍
  • 外网如何访问局域网程序:nps内网穿透服务使用介绍
  • 你是不是经常会遇到这么一种需求,需要在外网情况下访问局域网下的程序或者应用?比如,你的电脑上有相当一部分资料,非你本地的用户想访问,怎么办呢?这时候就需要用到内网穿透服务,实现外网用户访问我的内网资源。
  • 建站技巧
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-12-04 17:01
  • 阅读:92
联系我们

QQ:1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

工作时间:周一至周六 9:00~18:00


联系客服
源码代售 源码咨询 素材咨询 联系客服
029-84538663
手机版

扫一扫进手机版
返回顶部