vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder)

20pzqm 等级 120 0 0
标签: electronhttps

目标

  • 搭建vue + electron的工程

主要步骤

构建初始化工程

创建vue3 工程

使用vuecli 工具创建一个vue3工程

vue ui
使用网页创建,注意vue版本选3.0,构建工具选择yarn

::: tip 选择yarn工具 ::: vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder)

::: tip 手动选择依赖 ::: vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder)

::: tip 开启vuex vue-router eslint less 等功能 ::: vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder)

::: tip vue-router使用hash模式,不要用history模式,否则打包后再运行程序,会显示一片空白 ::: vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder) 参考https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/commonIssues.html#blank-screen-on-builds-but-works-fine-on-serve

引入vue-cli-plugin-electron-builder

设置electron的仓库地址到淘宝

yarn config set ELECTRON_MIRROR 'https://cdn.npm.taobao.org/dist/electron/'
yarn config set electron_mirror'https://cdn.npm.taobao.org/dist/electron/'

安装vue-cli-plugin-electron-builder

vue add electron-builder

vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder) 提示选择 electron 的版本号 选择13.0.0 vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder) 等待一段时间后安装完成,可以看到提示了一个警告 vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder) 如前文所述,vue-router一定要使用hash模式.

等待安装完成后, 可以看到当前目录结构如下: vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder)

只针对三个重要文件做说明 background.js 是electron 后台主进程,同时也是项目的入口点 main.js 是vue应用入口文件,即electron的渲染进程 package.json 安装vcp-electron-builder后, package.json中多了一些electron的命令,指定了入口点为background.js,当然还增加了一些必要的依赖

成果展示

启动当前工程

yarn electron:serve

vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder)

获取本章代码

https://github.com/NightsLight-hub/vcped-test
tag:0-initenv

资料参考

vue-cli-plugin-electron-builder官网 vuecli官网 nodejs package.json配置说明

收藏
评论区

相关推荐

(三)使用electron
前提已经实现了(一)里面的效果连接:[https://www.cnblogs.com/yuNotes/p/12884930.html](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2FyuNotes%2Fp%2F12884930.html) #### 1
(原)Electron+vue 应用实战
1.electron架构思考 ============== 在做electron桌面开发中,Electron+vue当下算是性价比的比较高的。但是electron算是小众开发,遇到问题,基本上就是掉进深坑,爬好久才出来。 为了做一个项目,我翻遍了国内好多网站。看到一篇好的文章。[Electron 应用实战 (架构篇)](https://www.oschi
3、electron打包生成exe文件
打包方式1:DOS窗口命令打包 --------------- DOS 下,输入 npm install electron-packager -g**全局安装**我们的打包神器: cnpm install electron-packager -g 在项目文件夹下面,也就是根目录下面打开DOS执行打包命令: electron-packa
electron(1)安装和使用
下载和安装 # Clone the Quick Start repository git clone https://github.com/atom/electron-quick-start # Install the dependencies and run npm install && npm start 会
Ubuntu 18.10 安装程序可以使用HTML5,Electron和Snap
导读 **开发工作在下一代Ubuntu版本Ubuntu 18.10(Cosmic Cuttlefish)上开始启动,它的主要新功能之一看起来可能是下一代Ubiquity图形安装程序。** ![Ubuntu 18.10 安装程序可以使用HTML5,Electron和SnapUbuntu 18.10 安装程序可以使用HTML5,Electron和Snap](
AudioContext方法播放音频
`const fs = require('fs'); const electron = require('electron'); const dataPath = (electron.app || electron.remote.app).getPath('userData'); const fPath =` ${dataPath}/file/unzip\`
Electron 快速入门及最新安装教程
> 作者:程序员学院   官方网址:[https://www.chengxuyuan.com](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.chengxuyuan.com)    微信公众号:华仁程序员学院 一、 Electron简介 ------------- Electr
Electron中通过asar打包后ffi
在使用Electron开发完应用程序后,需要打包生成各平台对应的可执行文件供用户使用。 这里以Mac平台为例,最简单的打包方案是使用**electron-packager**来对应用程序进行打包操作,如执行最简单的指令`electron-packager .`执行完成后会在同级目录生成`${appName}-${platfomr}-${arch}`目录如e
Electron开发使用Vue Devtools
转自 \[[https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Forchidflower.oschina.io%2F2017%2F03%2F29
Electron开发跨平台桌面程序入门教程
最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快。我会在这一篇文章中实现一个HelloWord的应用程序,记录学习过程中的坑。 Electron是什么呢? ------------- Electron 可以让你使用纯 JavaScript 调用丰富的
Electron桌面端所见即所得
### 突然让你开发Electron应用,你能hold住吗? 如果领导突然说需要开发一款前端桌面端应用,那么对于我们前端er来说选择Electron是一件顺理成章的事情。但事实上很多同学对于Electron都不太了解和熟悉。 **如果突然让我们去开发Electron应用,很多人都会陷入迷茫和懵逼的状态**。然后在依靠网上相对较少的资料,慢慢摸索、一路踩坑
Electron踩坑记录
心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 安装 -- 在国内安装`electron`的时候,可能会因为网络原因遇到卡在`Building fresh packages...`(yarn)或者是卡在`nod
Rust 的 GUI 框架生态概览
本文比较全面比较了目前主流的 Rust 的 GUI 框架的表现。其中 ++ 表示非常好,-- 表示非常差,而 o 表示处于平均水平。 参与对比的框架共有 8 个,详细的比较结果如下:   Electron + Neon Electron + FFI Electron + NodeJS Cpp Addon Rust Program + Qt sta
TMS WEB Core v1.2预览版:新的Electron应用程序支持
#### 2019年2月20日,星期三 几个月前,我们已经开始与[Electron进行](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ftmssoftware.com%2Fsite%2Fblog.asp%3Fpost%3D495)实验。在工作概念验证之后,我们的目标是为Delphi开发人
【electron】ipc模块使用
electron 进程模型 electron 使用多进程架构与chromium类似,electron使用多进程架构。单一进程架构能够节省资源,然而浏览器经常遇到恶意代码,可能导致进程崩溃,浏览器的多个页签公用一个进程必然会一损俱损,因此多进程架构更适合些()。在开发electron的过程中,我们主要接触两个进程: 主进程main process与渲染进程re

热门文章

electron自定义标题栏【electron】ipc模块使用

最新文章

electron自定义标题栏【electron】ipc模块使用