您好!欢迎来到源码码网

源码码网

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

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

  • 时间:2021-07-17 10:51 编辑:admin 来源:源码码网 阅读:231
  • 扫一扫,手机访问
摘要:Electron是一个基于Chromium和 Node.js的跨平台的桌面应用开发框架,可以让我们用html css js的技术开发跨平台桌面应用软件,也是当下最流行的跨平台桌面应用框架。

介绍

        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)
最新发布的资讯信息
【行业资讯|】全民达人app系统 全民探店app开发全民探店一键发布视频自带地址poi(2021-12-30 11:01)
【源码教程|开源源码】开源低代码在线设计平台源码在线表单设计(2021-12-11 13:41)
【源码教程|开源源码】开源原生PHP评论系统源码可任意对接至任意网站(2021-12-11 13:16)
【源码教程|开源源码】开源代码朔方会员管理软件 - shuofang-MemberManagement(2021-12-11 13:09)
【源码教程|开源源码】开源书签分享平台网站源码 Hackershare系统(2021-12-11 13:03)
【行业资讯|】社交APP:同城约会/陌生人社交/婚恋交友(2021-12-07 15:02)
【源码教程|开源源码】基于ThinkPHP开发的Im聊天系统online_chat客户端源码(2021-11-26 20:17)
【源码教程|开源源码】ThinkPHP开发在线聊天软件系统源码ttltChat服务端下载(2021-11-26 20:11)
【开发工具|其他常用工具】TLv8 IDE 基于Eclipse的快速开发工具(2021-11-26 19:53)
【行业资讯|】什么是AGPL协议?AGPL协议详细介绍(2021-11-26 18:41)
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

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


联系客服
手机版

扫一扫进手机版
返回顶部