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