使用electron-vue框架快速开发桌面应用

光看名字就知道了，electron-vue就是electron和vue的结合体，很轻松的就可以把你的vue项目转化为桌面项目。使用文档：https://simulatedgreg.gitbooks.io/electron-vue/content/en/renderer-process.html
下面进入正题：
1.搭建一个electron-vue的项目
打开终端进入你要创建桌面项目的目录，然后输入命令：vue init simulatedgreg/electron-vue my-project

Microsoft Windows [版本 10.0.17763.194]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\Administrator>e:

E:\>cd E:\My files\54651

E:\My files\54651>vue init simulatedgreg/electron-vue my-project

搭建完是这样的：

Microsoft Windows [版本 10.0.17763.194]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\Administrator>e:

E:\>cd E:\My files\54651

E:\My files\54651>vue init simulatedgreg/electron-vue my-project
? Application Name my-project
? Application Id com.example.yourapp
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? Yes
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-el
ectron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? Yes
? Set up end-to-end testing with Spectron + Mocha? Yes
? What build tool would you like to use? builder
? author quanyi <quany@yunker.com.cn>

vue-cli · Generated "my-project".

---

All set. Welcome to your new electron-vue project!

Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.

Next Steps:

$ cd my-project
$ yarn (or `npm install`)
$ yarn run dev (or `npm run dev`)

E:\My files\54651>|

此时看看你搭建的目录：

2.进入搭建完的这个目录，安装vue的依赖文件

E:\My files\54651>cd my-project

E:\My files\54651\my-project>npm install

安装完这样是的：

E:\My files\54651>cd my-project

E:\My files\54651\my-project>npm installnpm WARN deprecated babel-preset-babili@0.1.4: babili has been renamed to babel-minify. Please update to babel-preset-minify
npm WARN deprecated istanbul@0.4.5: This module is no longer maintained, try this instead:
npm WARN deprecated   npm i nyc
npm WARN deprecated Visit https://istanbul.js.org/integrations for other alternatives.
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated nodemailer@2.7.2: All versions below 4.0.1 of Nodemailer are deprecated. See https://nodemailer.com/status/
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated uws@9.14.0: New code is available at github.com/uNetworking/uWebSockets.js
npm WARN deprecated socks@1.1.9: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated mailcomposer@4.0.1: This project is unmaintained
npm WARN deprecated flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
npm WARN deprecated hawk@3.1.3: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated buildmail@4.0.1: This project is unmaintained
npm WARN deprecated hoek@2.16.3: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated cryptiles@2.0.5: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated sntp@1.0.9: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated boom@2.10.1: This version has be
4000
en deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).

> uws@9.14.0 install E:\My files\54651\my-project\node_modules\uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0

> electron-chromedriver@1.8.0 install E:\My files\54651\my-project\node_modules\electron-chromedriver
> node ./download-chromedriver.js

successfully dowloaded and extracted!

> node-sass@4.12.0 install E:\My files\54651\my-project\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.12.0/win32-x64-64_binding.node
Download complete  ] - :
Binary saved to E:\My files\54651\my-project\node_modules\node-sass\vendor\win32-x64-64\binding.node
Caching binary to C:\Users\Administrator\AppData\Roaming\npm-cache\node-sass\4.12.0\win32-x64-64_binding.node

> core-js@2.6.9 postinstall E:\My files\54651\my-project\node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> electron@2.0.18 postinstall E:\My files\54651\my-project\node_modules\electron
> node install.js

Downloading SHASUMS256.txt
[============================================>] 100.0% of 5.39 kB (5.39 kB/s)

> node-sass@4.12.0 postinstall E:\My files\54651\my-project\node_modules\node-sass
> node scripts/build.js

Binary found at E:\My files\54651\my-project\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine

> webpack-cli@3.3.2 postinstall E:\My files\54651\my-project\node_modules\webpack-cli
> node ./bin/opencollective.js

Thanks for using Webpack!
Please consider donating to our Open Collective
to help us maintain this package.

Donate: https://opencollective.com/webpack/donate

> my-project@0.0.1 postinstall E:\My files\54651\my-project
> npm run lint:fix

> my-project@0.0.1 lint:fix E:\My files\54651\my-project
> eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN karma-webpack@3.0.5 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN my-project@0.0.1 No repository field.
npm WARN my-project@0.0.1 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1930 packages from 2077 contributors and audited 19687 packages in 172.78s
found 14 vulnerabilities (4 low, 8 moderate, 2 high)
run `npm audit fix` to fix them, or `npm audit` for details

E:\My files\54651\my-project>|

此时看看你的目录是不是多了个node_modules的文件夹呢？

3.至此已经搭建完事了，可以启动看看效果了

E:\My files\54651\my-project>npm run dev

> my-project@0.0.1 dev E:\My files\54651\my-project
> node .electron-vue/dev-runner.js

___                      __
__   /\_ \       __     ___   /\ \__    _ __    ___     ___              __  __  __  __     __
/ ,.`\ \//\ \    / ,.`\  /'___\ \ \ ,_\  /\` __\ / __`\ /' _ `\   _______ /\ \/\ \/\ \/\ \  / ,.`\
/\  __/   \_\ \_ /\  __/ /\ \__/  \ \ \/  \ \ \/ /\ \_\ \/\ \/\ \ /\______\\ \ \/ |\ \ \_\ \/\  __/
\ \____\  /\____\\ \____\\ \____\  \ \ \_  \ \_\ \ \____/\ \_\ \_\\/______/ \ \___/ \ \____/\ \____\
\/____/  \/____/ \/____/ \/____/   \ \__\  \/_/  \/___/  \/_/\/_/           \/__/   \/___/  \/____/
\/__/
getting ready...

┏ Main Process ---------------

compiling...

┗ ----------------------------

┏ Renderer Process -----------

Hash: 7c513d208866fc4ac6de
Version: webpack 4.33.0
Time: 3792ms
Built at: 2019-06-05 11:30:14
Asset       Size    Chunks             Chunk Names
imgs/logo--assets.png   60.4 KiB            [emitted]
index.html  415 bytes            [emitted]
renderer.js   1.77 MiB  renderer  [emitted]  renderer
Entrypoint renderer = renderer.js
[1] multi (webpack)-dev-server/client?http://localhost ./.electron-vue/dev-client ./src/renderer/main.js 52 bytes {renderer} [built]
[./.electron-vue/dev-client.js] 731 bytes {renderer} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {renderer} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {renderer} [built]
[./node_modules/vue/dist/vue.esm.js] 318 KiB {renderer} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 7.48 KiB {renderer} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {renderer} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {renderer} [built]
[./node_modules/webpack-dev-server/client/utils/getCurrentScriptSource.js] (webpack)-dev-server/client/utils/getCurrentScriptSource.js 658 bytes {renderer} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.64 KiB {renderer} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {renderer} [built]
[./node_modules/webpack-hot-middleware/client.js?noInfo=true&reload=true] (webpack)-hot-middleware/client.js?noInfo=true&reload=true 7.68 KiB {renderer} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {renderer} [built]
[./src/renderer/App.vue] 1.1 KiB {renderer} [built]
[./src/renderer/main.js] 382 bytes {renderer} [built]
+ 57 hidden modules
Child html-webpack-plugin for "index.html":
Asset      Size  Chunks  Chunk Names
index.html  1.38 MiB       0
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs] 1.15 KiB {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

┗ ----------------------------

┏ Main Process ---------------

Hash: 96912c2b03f59cd13440
Version: webpack 4.33.0
Time: 4040ms
Built at: 2019-06-05 11:30:14
Asset     Size  Chunks             Chunk Names
main.js  212 KiB    main  [emitted]  main
Entrypoint main = main.js
[0] multi ./src/main/index.dev.js ./src/main/index.js 40 bytes {main} [built]
[./node_modules/cross-unzip/index.js] 1.49 KiB {main} [built]
[./node_modules/electron-debug sync recursive] ./node_modules/electron-debug sync 160 bytes {main} [built]
[./node_modules/electron-debug/index.js] 2.46 KiB {main} [built]
[./node_modules/electron-devtools-installer/dist/downloadChromeExtension.js] 2.26 KiB {main} [built]
[./node_modules/electron-devtools-installer/dist/index.js] 5.02 KiB {main} [built]
[./node_modules/electron-devtools-installer/dist/utils.js] 1.88 KiB {main} [built]
[./node_modules/electron-is-dev/index.js] 256 bytes {main} [built]
[./node_modules/electron-localshortcut/index.js] 8.16 KiB {main} [built]
[./node_modules/semver/semver.js] 37.9 KiB {main} [built]
[./src/main/index.dev.js] 364 bytes {main} [built]
[./src/main/index.js] 801 bytes {main} [built]
[electron] external "electron" 42 bytes {main} [built]
[fs] external "fs" 42 bytes {main} [built]
[path] external "path" 42 bytes {main} [built]
+ 33 hidden modules

WARNING in ./node_modules/electron-debug/index.js 81:45-58
Critical dependency: the request of a dependency is an expression
@ ./src/main/index.dev.js
@ multi ./src/main/index.dev.js ./src/main/index.js

WARNING in ./node_modules/electron-debug/index.js 84:85-106
Critical dependency: the request of a dependency is an expression
@ ./src/main/index.dev.js
@ multi ./src/main/index.dev.js ./src/main/index.js

┗ ----------------------------

┏ Electron -------------------

Debugger listening on
┗ ----------------------------

┏ Electron -------------------

ws://127.0.0.1:5858/0c2fef1a-bbd8-441f-8a82-f0cc4f6b4d7b
For help see https://nodejs.org/en/docs/inspector

┗ ----------------------------

┏ Electron -------------------

Failed to fetch extension, trying 4 more times

┗ ----------------------------

┏ Electron -------------------

Failed to fetch extension, trying 3 more times

┗ ----------------------------

┏ Electron -------------------

Failed to fetch extension, trying 2 more times

┗ ----------------------------

┏ Electron -------------------

Failed to fetch extension, trying 1 more times

┗ ----------------------------

┏ Electron -------------------

Failed to fetch extension, trying 0 more times

┗ ----------------------------

┏ Electron -------------------

Unable to install `vue-devtools`:
Error: net::ERR_CONNECTION_TIMED_OUT

┗ ----------------------------
—

输入完npm run dev后很快就会自动跳出你搭建的程序页面：

在这一步骤当中你可以在src里的renderer文件夹里进行完善你要搭建程序的样子。
在你改代码后保存完代码，页面时自动刷新的：

和浏览器一样摁F12可以打开调试面板

4.完善完毕后打包就会形成.exe的启动文件

终止批处理操作吗(Y/N)? y	                                //因为刚才的程序还在启动，所以我终止下在打包。

E:\My files\54651\my-project>npm run build					//特别说明一下这里：如果是第二次以后的打包一定要执行npm run build:clear后再执行npm run build

> my-project@0.0.1 build E:\My files\54651\my-project
> node .electron-vue/build.js && electron-builder

___              __                        __                       ___       __
/\_ \       __   /\ \__     ____           /\ \       __  __   __   /\_ \     /\ \
\//\ \    / ,.`\ \ \ ,_\   / ,__\  _______ \ \ \____ /\ \/\ \ /\_\  \//\ \    \_\ \
\_\ \_ /\  __/  \ \ \/  /\__, `\/\______\ \ \  ,. \\ \ \_\ \\/\ \   \_\ \_ /\ ,. \
/\____\\ \____\  \ \ \_ \/\____/\/______/  \ \____/ \ \____/ \ \ \  /\____\\ \____\
\/____/ \/____/   \ \__\ \/___/             \/___/   \/___/   \/_/  \/____/ \/___ /
\/__/

- building main process
√ building main process
√ building renderer process

Hash: 9f4d12ad34b14b1674ba
Version: webpack 4.33.0
Time: 9601ms
Built at: 2019-06-05 11:46:20
Asset      Size  Chunks             Chunk Names
main.js  1.43 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] external "electron" 42 bytes {0} [built]
[1] ./src/main/index.js 801 bytes {0} [built]
[2] external "path" 42 bytes {0} [built]

Hash: 9d7baa04018585dd62ec
Version: webpack 4.33.0
Time: 11897ms
Built at: 2019-06-05 11:46:23
Asset       Size  Chunks             Chunk Names
imgs/logo--assets.png   60.4 KiB          [emitted]
index.html  315 bytes          [emitted]
renderer.js    114 KiB       0  [emitted]  renderer
Entrypoint renderer = renderer.js
[0] ./node_modules/vue-loader/lib/runtime/componentNormalizer.js 2.63 KiB {0} [built]
[1] ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/App.vue?vue&type=style&index=0&lang=css& 608 bytes {0} [built]
[3] ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/components/LandingPage.vue?vue&type=style&index=0&lang=css& 628 bytes {0} [built]
[5] ./node_modules/vue-style-loader/lib/addStylesClient.js + 1 modules 6.71 KiB {0} [built]
| ./node_modules/vue-style-loader/lib/addStylesClient.js 6.09 KiB [built]
| ./node_modules/vue-style-loader/lib/listToStyles.js 637 bytes [built]
[6] ./src/renderer/store/modules/index.js 238 bytes {0} [built]
[7] external "vue-router" 42 bytes {0} [built]
[8] external "vuex" 42 bytes {0} [built]
[9] external "vuex-electron" 42 bytes {0} [built]
[10] external "axios" 42 bytes {0} [built]
[11] ./src/renderer/App.vue?vue&type=style&index=0&lang=css& 560 bytes {0} [built]
[18] ./src/renderer/components/LandingPage.vue?vue&type=style&index=0&lang=css& 600 bytes {0} [built]
[20] ./src/renderer/store/modules sync nonrecursive \.js$ 192 bytes {0} [built]
[22] external "vue-electron" 42 bytes {0} [built]
[23] ./src/renderer/components/LandingPage.vue + 9 modules 5.49 KiB {0} [built]
| ./src/renderer/components/LandingPage.vue 545 bytes [built]
| ./src/renderer/components/LandingPage.vue?vue&type=template&id=01ad01ca& 215 bytes [built]
| ./src/renderer/components/LandingPage.vue?vue&type=script&lang=js& 372 bytes [built]
| ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/components/LandingPage.vue?vue&type=template&id=01ad01ca& 1.35 KiB [built]
| ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/components/LandingPage.vue?vue&type=script&lang=js& 269 bytes [built]
| ./src/renderer/components/LandingPage/SystemInformation.vue 614 bytes [built]
| ./src/renderer/components/LandingPage/SystemInformation.vue?vue&type=template&id=13129888&scoped=true& 239 bytes [built]
| ./src/renderer/components/LandingPage/SystemInformation.vue?vue&type=script&lang=js& 396 bytes [built]
| ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/components/LandingPage/SystemInformation.vue?vue&type=template&id=13129888&scoped=true& 1.24 KiB [built]
| ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/components/LandingPage/SystemInformation.vue?vue&type=script&lang=js& 298 bytes [built]
[24] ./src/renderer/main.js + 8 modules 320 KiB {0} [built]
| ./src/renderer/main.js 382 bytes [built]
| ./node_modules/vue/dist/vue.esm.js 318 KiB [built]
| ./src/renderer/App.vue 510 bytes [built]
| ./src/renderer/router/index.js 264 bytes [built]
| ./src/renderer/store/index.js 342 bytes [built]
| ./src/renderer/App.vue?vue&type=template&id=4ecb01d3& 201 bytes [built]
| ./src/renderer/App.vue?vue&type=script&l
20167
ang=js& 344 bytes [built]
| ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/App.vue?vue&type=template&id=4ecb01d3& 210 bytes [built]
| ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/App.vue?vue&type=script&lang=js& 42 bytes [built]
+ 10 hidden modules
Child html-webpack-plugin for "index.html":
Asset     Size  Chunks  Chunk Names
index.html  556 KiB       0
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 1.15 KiB {0} [built]
[1] ./node_modules/lodash/lodash.js 527 KiB {0} [built]
[2] (webpack)/buildin/module.js 497 bytes {0} [built]

OKAY  take it away `electron-builder`

• electron-builder version=20.43.0
• loaded configuration file=package.json ("build" field)
• writing effective config file=build\builder-effective-config.yaml
• no native production dependencies
• packaging       platform=win32 arch=x64 electron=2.0.18 appOutDir=build\win-unpacked
• building        target=nsis file=build\my-project Setup 0.0.1.exe archs=x64 oneClick=true perMachine=false
• building block map blockMapFile=build\my-project Setup 0.0.1.exe.blockmap

E:\My files\54651\my-project>|

.exe的启动文件就在build文件夹里，双击它，安装 => 启动

注意个事：electron-vue开发过程中对语法要求特别高！少个多个空格报错，多一行空行报错，少个逗号了封号了什么的都会报错，一定要规范代码语法！

好了，全程完事，开启你程序之旅吧