Vue + Electron 搭建

1、安装 Vue-cli最新版本
npm install @vue/cli -g

2、创建vue项目
vue create playbill
控制台交互内容:

?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes


Vue CLI v4.5.13
? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn


Vue CLI v4.5.13
✨  Creating project in D:\javascript\playbill\playbill.
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.10
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.


success Saved lockfile.
Done in 67.67s.
�  Invoking generators...
�  Installing additional dependencies...

yarn install v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 15.49s.
⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project playbill.
�  Get started with the following commands:

 $ cd playbill
 $ yarn serve
3、安装electron

vue add electron-builder
控制台交互内容:

 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

�  Installing vue-cli-plugin-electron-builder...

yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info dmg-license@1.0.8: The platform "win32" is incompatible with this module.
info "dmg-license@1.0.8" is an optional dependency and failed compatibility check. Excluding it from installation.
info iconv-corefoundation@1.1.5: The platform "win32" is incompatible with this module.
info "iconv-corefoundation@1.1.5" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 102 new dependencies.
info Direct dependencies
└─ vue-cli-plugin-electron-builder@2.0.0
info All dependencies
├─ @develar/schema-utils@2.6.5
├─ @electron/universal@1.0.4
├─ @malept/cross-spawn-promise@1.1.1
├─ @malept/flatpak-bundler@0.4.0
├─ @npmcli/move-file@1.1.2
├─ @sindresorhus/is@0.14.0
├─ @szmarczak/http-timer@1.1.2
├─ @types/debug@4.1.5
├─ @types/yargs-parser@20.2.0
├─ @types/yargs@16.0.1
├─ aggregate-error@3.1.0
├─ ansi-align@3.0.0
├─ app-builder-bin@3.5.13
├─ argparse@2.0.1
├─ asar@3.0.3
├─ at-least-node@1.0.0
├─ binaryextensions@4.15.0
├─ boxen@5.0.1
├─ buffer-equal@1.0.0
├─ cacheable-request@6.1.0
├─ ci-info@3.1.1
├─ clean-stack@2.2.0
├─ cli-boxes@2.2.1
├─ clone-response@1.0.2
├─ colors@1.0.3
├─ configstore@5.0.1
├─ crypto-random-string@2.0.0
├─ decompress-response@3.3.0
├─ deep-extend@0.6.0
├─ defer-to-connect@1.1.3
├─ dir-compare@2.4.0
├─ dmg-builder@22.11.1
├─ duplexer3@0.1.4
├─ editions@6.1.0
├─ electron-builder@22.11.1
├─ electron-publish@22.11.1
├─ errlop@4.1.0
├─ escape-goat@2.1.1
├─ filelist@1.0.2
├─ friendly-errors-webpack-plugin@1.7.0
├─ global-dirs@3.0.0
├─ got@9.6.0
├─ graceful-readlink@1.0.1
├─ has-ansi@2.0.0
├─ has-yarn@2.1.0
├─ hosted-git-info@4.0.2
├─ http-cache-semantics@4.1.0
├─ human-signals@2.1.0
├─ immediate@3.0.6
├─ import-lazy@2.1.0
├─ indent-string@4.0.0
├─ ini@2.0.0
├─ is-installed-globally@0.4.0
├─ is-npm@5.0.0
├─ is-yarn-global@0.3.0
├─ istextorbinary@5.12.0
├─ jake@10.8.2
├─ jest-worker@26.6.2
├─ json-buffer@3.0.0
├─ jszip@3.6.0
├─ keyv@3.1.0
├─ latest-version@5.1.0
├─ lie@3.3.0
├─ lodash.merge@4.6.2
├─ lowercase-keys@1.0.1
├─ minipass-collect@1.0.2
├─ minipass-flush@1.0.5
├─ minipass-pipeline@1.2.4
├─ minizlib@2.1.2
├─ p-cancelable@1.1.0
├─ package-json@6.5.0
├─ pumpify@2.0.1
├─ pupa@2.1.1
├─ registry-auth-token@4.2.1
├─ registry-url@5.1.0
├─ responselike@1.0.2
├─ sanitize-filename@1.6.3
├─ semver-diff@3.1.1
├─ set-immediate-shim@1.0.1
├─ shebang-loader@0.0.1
├─ split2@3.2.2
├─ stat-mode@1.0.0
├─ tar@6.1.0
├─ textextensions@5.12.0
├─ through2-filter@3.0.0
├─ through2-map@3.0.0
├─ tmp-promise@3.0.2
├─ to-readable-stream@1.0.0
├─ truncate-utf8-bytes@1.0.2
├─ typedarray-to-buffer@3.1.5
├─ unique-string@2.0.0
├─ unzip-crx@0.2.0
├─ update-notifier@5.1.0
├─ url-parse-lax@3.0.0
├─ utf8-byte-length@1.0.4
├─ version-compare@1.1.0
├─ version-range@1.1.0
├─ vue-cli-plugin-electron-builder@2.0.0
├─ widest-line@3.1.0
├─ write-file-atomic@3.0.3
├─ yaku@0.16.7
└─ yocto-queue@0.1.0
Done in 34.20s.
✔  Successfully installed plugin: vue-cli-plugin-electron-builder

? Choose Electron Version ^12.0.0

�  Invoking generator for vue-cli-plugin-electron-builder...
�  Installing additional dependencies...

yarn install v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info dmg-license@1.0.8: The platform "win32" is incompatible with this module.
info "dmg-license@1.0.8" is an optional dependency and failed compatibility check. Excluding it from installation.
info iconv-corefoundation@1.1.5: The platform "win32" is incompatible with this module.
info "iconv-corefoundation@1.1.5" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
$ electron-builder install-app-deps
  • electron-builder  version=22.10.5
  • cannot check updates  error=TypeError: update_notifier_1.default is not a function
Done in 54.89s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder

搭建完成

运行项目:
npm run electron:serve

 

posted @ 2021-05-10 22:58  rubekid  阅读(1104)  评论(0编辑  收藏  举报