Electron项目搭建

https://segmentfault.com/a/1190000039313852

[email protected]:xdguonet/electron-vue2.git

npm install -g @vue/cli

vue create electron-vue

# 自行选择vue版本，由于electron使用的是Chromium，那么我们可以不必考虑兼容性的问题，我这里直接选择vue3（看个人喜好）

cd electron-vue

vue add electron-builder

# 选择electron版本号，这里我选择的是`11.0.0`

# 安装完成之后会有`src/background.js`文件，`package.json`中会多出几条electron的build及serve命令

npm run electron:serve

# 稍等一会儿（Vue Devtools首次安装问题）会有一个桌面窗口出现，ok安装就完成啦，接下来我们对其进行改造。

启动中出现了错误

throw new Error(‘Electron failed to install correctly,please delete node_modules/electron and try installing again’)

需要删除node_modules下得文件（也有说只删除node_modules/electron下的），然后执行node install.js

npm install

还报错的话，删除node_modules

删除node_modules

安装全局yarn: npm install yarn -g

安装项目依赖： yarn install

启动

npm run electron:serve

图片: https://uploader.shimo.im/f/61zNbzNouvbEDGtR.png

使用vue-cli-plugin-electron-builder开发vue-cli3.0+Electron桌面开发应用

https://www.jianshu.com/p/dfcf2a6a497c

更方便

项目打包

npm run electron:build

yarn add axios

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

> [email protected] 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!

重点是最后一行：

build complete!构建完成！

图片: https://uploader.shimo.im/f/GitRdEhXNLoLvK7U.png