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

介绍

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

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

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

vue init simulatedgreg/electron-vue

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

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

工程结构

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

特别声明：
1、如无特殊说明，内容均为本站原创发布，转载请注明出处；
2、部分转载文章已注明出处，转载目的为学习和交流，如有侵犯，请联系客服删除；
3、编辑非《源码码网》的文章均由用户编辑发布，不代表本站立场，如涉及侵犯，请联系删除；

全部评论(0)

推荐阅读

python实现微信登录功能示例代码
实现微信登录功能需要使用微信开放平台提供的API。以下是Python实现微信登录功能的示例代码：import requests import json # 微信开放平台AppID和AppSecret APP_ID = ’your_app_id’
源码教程
来源：源码码网
编辑：源码码网
时间：2023-12-08 16:17
阅读：139

Android开发实现微信登录功能
要在Android应用中实现微信登录功能，你需要按照以下步骤进行操作：1、注册微信开放平台帐号首先，你需要在微信开放平台（https://open.weixin.qq.com）上注册一个帐号，并创建一个应用。在注册过程中，你需要提供一些基本信息，并获取到应用的AppID和AppSecret。2、配置微信登录回调URL在微信开放平台的后台管理界面中，找到“开发”选项卡，并点击“基本配置”。在“基本配置”页面中，你需要填写你的应用的包
源码教程
来源：源码码网
编辑：源码码网
时间：2023-12-08 16:13
阅读：145

Java实现微信登录功能示例代码
使用Java实现微信登录功能，你需要使用微信开放平台提供的API。以下是一个简单的Java代码示例，用于实现微信登录功能：import java.io.IOException; import java.util.HashMap; import java.util.Map; import org
源码教程
来源：源码码网
编辑：源码码网
时间：2023-12-08 16:11
阅读：196

PHP实现微信登录功能
要实现微信登录功能，你需要遵循以下步骤：注册微信公众平台/开放平台帐号首先，你需要在微信公众平台（用于公众号）或微信开放平台（用于移动应用和网站）上注册一个帐号，并创建一个应用或公众号。在注册过程中，你需要提供一些基本信息，并获取到应用的AppID和AppSecret。配置微信登录在微信公众平台/开放平台的后台管理界面中，找到“开发”或“接口”选项，进入“微信登录”的配置页面。在该页面中，你需要填写你的应用或网站的域名，并保存配置
源码教程
来源：源码码网
编辑：源码码网
时间：2023-12-08 16:05
阅读：191