您好!欢迎来到源码码网

源码码网

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

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

  • 时间:2021-07-17 10:51 编辑:admin 来源:源码码网 阅读:137
  • 扫一扫,手机访问
摘要: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)
最新发布的资讯信息
【行业资讯|】微信号买卖网站经营者被判侵权(2021-10-23 12:46)
【行业资讯|】喜上眉梢app源码的开发与部署(2021-10-18 15:47)
【行业资讯|】域名解析后不生效,刷新本地DNS缓存也不生效怎么解决?(2021-10-15 12:56)
【软件教程|软件开发】小圈app源码是如何部署的(2021-09-15 14:50)
【建站技巧|网站运营】最新开发织梦分页网站地图sitemap插件(2021-09-05 22:28)
【建站技巧|网站运营】织梦网站地图生成插件织梦生成网站地图sitemap(2021-09-05 21:18)
【建站技巧|网站运营】织梦网站手机端访问PC端页面跳转至对应的手机站页面(2021-09-03 17:03)
【建站技巧|网站运营】织梦网站在电脑端访问手机端页面自动跳转至对应的PC端(2021-09-03 16:29)
【行业资讯|】域名又涨价了!阿里云com和net后缀的域名又涨价了(2021-09-02 15:58)
【源码教程|】Html实现文字从左向右依次显示的两种方法(2021-08-16 11:12)
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

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


联系客服
手机版

扫一扫进手机版
返回顶部