使用vue-cli-plugin-electron-builder開發(fā)vue-cli3.0+Electron桌面開發(fā)應(yīng)用

今早看到有大佬評論，所以就研究了一下vue-cli3.0+electron的桌面應(yīng)用開發(fā)

image.png

首先感謝@素箋淡墨染流年！

首先，去看了一下vue-cli-plugin-electron-builder的介紹，網(wǎng)址

image.png

大概意思就是：
1、這個(gè)vue-cli3.0的插件針對Electron，不用其他配置，用electron-builder進(jìn)行構(gòu)建就ok了
2、你的應(yīng)用以后必須要用vue-cli3.0來創(chuàng)建了，2.0要淘汰了

PS：150分的英語只能考75分的水平，也只能翻譯到這個(gè)地步了

快速開始

第一步：用vue-cli3.0創(chuàng)建一個(gè)項(xiàng)目

打開命令行工具

vue create demo

選擇默認(rèn)

image.png

安裝完成

image.png

第二步：安裝vue-cli-plugin-electron-builder

進(jìn)入項(xiàng)目

cd demo

進(jìn)入vue項(xiàng)目管理器：

vue ui
導(dǎo)入demo

image.png

點(diǎn)擊插件，并添加插件

image.png

搜索vue-cli-plugin-electron-builder,勾選，安裝

image.png

安裝完成后，點(diǎn)擊“安裝完成”，（必須要點(diǎn)擊安裝完成，否則項(xiàng)目架構(gòu)會出問題）

點(diǎn)擊安裝完成后，需要等一段時(shí)間，會重新構(gòu)建項(xiàng)目架構(gòu)

第三步：用編輯器打開創(chuàng)建好的項(xiàng)目

image.png

第四步：看一下package.json

image.png

運(yùn)行命令和構(gòu)建命令，我們試一下

先運(yùn)行讓項(xiàng)目跑起來：

npm run electron:serve

image.png

注意：命令行顯示 Launching Electron...需要等待一段時(shí)間，心急吃不到熱豆腐

出現(xiàn)一個(gè)問題：

Vue Devtools failed to install :Error:net::ERR_CONNECTION_TIMED_OUT
這個(gè)問題很可能是由于沒有安裝vue devtools
歡迎關(guān)注我后續(xù)文章，我會在后續(xù)文章里面研究關(guān)于Electron安裝vue devtools

修改App.vue中msg的內(nèi)容修改為Hello World：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Hello World"/>
  </div>
</template>

保存一下，發(fā)現(xiàn)前端正常渲染


image.png

運(yùn)行沒有問題，我們再試一下構(gòu)建命令

先CTRL + C停止項(xiàng)目
然后運(yùn)行
npm run electron:build
需要一段時(shí)間，貼出來命令行的樣子

D:\Electron\demo>npm run electron:build

> demo@0.1.0 electron:build D:\Electron\demo
> vue-cli-service electron:build

 INFO  Bundling render process:

|  Building modern bundle for production...

 DONE  Compiled successfully in 12007ms                               7:06:54 PM


  File                                      Size             Gzipped

  dist_electron\bundled\js\chunk-vendors    65.14 KiB        23.43 KiB
  .2026470a.js
  dist_electron\bundled\js\app.10f792b9.    4.55 KiB         1.63 KiB
  js
  dist_electron\bundled\css\app.e2713bb0    0.33 KiB         0.23 KiB
  .css

  Images and other types of assets omitted.

 DONE  Build complete. The dist_electron\bundled directory is ready to be deploy
ed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployme
nt.html

-  Bundling main process...

 DONE  Compiled successfully in 8595ms                                7:07:03 PM


  File                                   Size              Gzipped

  dist_electron\bundled\background.js    160.44 KiB        49.67 KiB

  Images and other types of assets omitted.

 INFO  Building app with electron-builder:
  ? electron-builder version=20.44.4
  ? description is missed in the package.json appPackageFile=D:\Electron\demo\di
st_electron\bundled\package.json
  ? author is missed in the package.json appPackageFile=D:\Electron\demo\dist_el
ectron\bundled\package.json
  ? writing effective config file=dist_electron\builder-effective-config.yaml
  ? no native production dependencies
  ? packaging       platform=win32 arch=x64 electron=5.0.0 appOutDir=dist_electr
on\win-unpacked
  ? default Electron icon is used reason=application icon is not set
  ? building        target=nsis file=dist_electron\demo Setup 0.1.0.exe archs=x6
4 oneClick=true perMachine=false
?[34m  ? ?[0mdownloading     ?[34mparts?[0m=1 ?[34msize?[0m=1.4 MB ?[34murl?[0m=
https://github.com/electron-userland/electron-builder-binaries/releases/download
/nsis-3.0.3.2/nsis-3.0.3.2.7z
?[34m  ? ?[0mdownloaded      ?[34mduration?[0m=1m0.625s ?[34murl?[0m=https://git
hub.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.3
.2/nsis-3.0.3.2.7z
?[34m  ? ?[0mdownloading     ?[34mparts?[0m=1 ?[34msize?[0m=1.0 MB ?[34murl?[0m=
https://github.com/electron-userland/electron-builder-binaries/releases/download
/nsis-resources-3.3.0/nsis-resources-3.3.0.7z
?[34m  ? ?[0mdownloaded      ?[34mduration?[0m=1m28.414s ?[34murl?[0m=https://gi
thub.com/electron-userland/electron-builder-binaries/releases/download/nsis-reso
urces-3.3.0/nsis-resources-3.3.0.7z
  ? building block map blockMapFile=dist_electron\demo Setup 0.1.0.exe.blockmap
 DONE  Build complete!

重點(diǎn)是最后一行：
build complete!構(gòu)建完成！

image.png

構(gòu)建完成后，看一下目錄

image.png

文件夾dist_electron就是構(gòu)建文件所在的文件夾，我們找到文件夾打開看一下


image.png

其中：
demo setup 0.1.0.exe就是安裝程序
win-unpacked 從字面意思就可以知道是win環(huán)境下沒有被打包的（綠色免安裝包）

驗(yàn)證安裝程序和綠色免安裝程序

1、先試一下免安裝包


image.png

雙擊demo打開


image.png

helloworld出來了，沒有問題

2、試一下，安裝程序


image.png

雙擊安裝


image.png

沒有問我們安裝位置，也沒有問是不是要創(chuàng)建快捷方式，很簡單粗暴的就安裝了，而且安裝完后直接打開
image.png

hello world出來了沒有問題
此時(shí)，回到桌面，會發(fā)現(xiàn)多了一個(gè)快捷方式

image.png

就是我們剛才安裝的
通過快捷方式，我們可以找到安裝位置
C:\Users\Administrator\AppData\Local\Programs\demo\demo.exe
進(jìn)去看看
image.png

如果要卸載的話，就雙擊Uninstall demo，或者用其他軟件管理工具


image.png

我用的是騰訊管家

結(jié)束語

我們在安裝其他軟件的時(shí)候，通常會有64位、32位的選擇，通常會有問詢安裝路徑，問詢是否需要生成快捷方式，問詢安裝完成立即打開

另外，我們想修改一下快捷方式的圖標(biāo)，應(yīng)用程序的名稱，該如何操作呢？

關(guān)注我，我會在后續(xù)貼出關(guān)于DIY打包的帖子

應(yīng)用程序打包的文章已經(jīng)出來了

在vue-cli-plugin-electron-builder下用electron:build打包或生成應(yīng)用程序的兩種方法

也不知道求一波打賞會不會被打死~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容