admin 管理员组

文章数量: 1184232


2024年3月8日发(作者：type c显示器)

介绍

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

环境搭建

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

1.安装

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

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

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

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

3.安装Electron

使用如下命令安装Electron插件

npminstall-gelectron

或者

cnpminstall-gelectron

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

electron--version

4.创建运行项目

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

gitclone/electron/electron-quick-start

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

cdelectron-quick-start

npminstall

npmstart

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

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

vueinitsimulatedgreg/electron-vue

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

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

工程结构

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


本文标签： 安装 项目 命令 进程 跨平台

版权声明：本文标题：Electron+Vue搭建跨平台桌面应用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1709847990a548003.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。