• 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:javascriptplaybillplaybill.
    ⚙️  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
  • 相关阅读:
    Android ViewPager实现选项卡切换
    Android Fragment是什么
    Android 点击文字实现跳转
    海底捞的十五天,让我重当程序员
    saltstack 实现haproxy+keepalived
    saltstack 实现系统初始化
    saltstack 实现redis主从
    python类基础
    Mysql 数据库备份工具 xtrabackup
    Python函数式编程
  • 原文地址:https://www.cnblogs.com/rubekid/p/14753335.html
Copyright © 2020-2023  润新知