投稿日： 2019年9月5日
最終更新日： 2023年3月28日

【デスクトップアプリ】Electron+Vueの環境構築をvue-cliのみで完結してみた【エディターいらず】

YouTubeも見てね♪

ねこじゃすり

ワタオカねこじゃすりライトグレー

created by Rinker

PEPPY(ペピイ)

¥3,850 (2024/04/03 21:33:13時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品！

【最新機種】GoPro hero11 Black

【日本国内正規品】 GoPro hero11 Black

created by Rinker

GoPro(ゴープロ)

¥62,000 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう！

[ノースフェイス] THE NORTH FACE メンズアウターマウンテンライトジャケット

created by Rinker

THE NORTH FACE(ザノースフェイス)

¥33,430 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です！

レッドブルエナジードリンク 250ml×24本

created by Rinker

Red Bull(レッドブル)

¥4,000 (2024/04/03 21:42:12時点 Amazon調べ-詳細)

翼を授けよう！

Bauhutte ( バウヒュッテ ) 昇降式 L字デスクブラック BHD-670H-BK

created by Rinker

Bauhutte(バウヒュッテ)

¥14,935 (2024/04/03 21:42:10時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！

BANDAI SPIRITS ULTIMAGEAR 遊戯王千年パズル 1/1スケール

created by Rinker

BANDAI SPIRITS(バンダイスピリッツ)

¥7,500 (2024/04/03 21:42:14時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ！！

MOFT X 【新型ミニマム版】 iPhone対応スマホスタンド

created by Rinker

MOFT

¥2,880 (2024/04/03 21:42:18時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！

1 Electron使いたい
2 手順
3 終わりに

Electron使いたい

今時のデスクトップアプリはクオリティが高い

エンジニアの皆さんは、SlackやAtom、VSCode、PostManを使ったことありますか？

使いやすさやデザイン、動作の軽さなどかなり使いやすいアプリケーションだと筆者は思っています。

そして、これらのアプリケーションに共通する点として、「全てElectronフレームワーク製」という点が言えます。

Electronとは？

Electronとは、GitHubが開発したオープンソースのフレームワークの事を指し、ChromiumとNode.jsを使いHTML/CSS/JsvaScriptのWebの技術を使いMacOS/Windows/Linuxに対応したクロスプラットフォームアプリケーションを作ることを可能にしてくれます。

Build cross platform desktop apps with JavaScript, HTML, and CSSElectron | Build cross platform desktop apps with JavaScript, HTML, and CSS.

要は1ソースコードによって複数OSごとののデスクトップアプリケーションをビルド出来るということですね。

また、それがWebの技術で簡単に作れちゃうという点がポイントです。

流行りのVue.jsでも実装可能

Electron自体はJavaScriptであればなんでも良いのでjQueryやReact、AngulerJSなどでも実装出来ますが、今回はフロントエンドでデファクトになりつつあるVue.jsを使った開発環境を作ってみようと思います。

また、vue-cliの3系を使うことで初期設定から起動までをコマンドラインのみで完結出来てしまうのでそちらも勉強がてら使ってみようと思います♪

手順

vue-cliのインストール

まずはvue-cliをインストールしましょう。

yarn global add  @vue/cli                                                                                  2077ms  月  9/ 2 18:22:53 2019
yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 602 new dependencies.
info Direct dependencies
└─ @vue/cli@3.11.0
info All dependencies
...
✨  Done in 39.24s.

yarn global add @vue/cli 2077ms  月 9/ 2 18:22:53 2019

yarn add v1.17.3

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

success Saved lockfile.

success Saved 602 new dependencies.

info Direct dependencies

└─ @vue/cli@3.11.0

info All dependencies

...

✨ Done in 39.24s.

vueプロジェクトの作成

以下のコマンドで対話式でプロジェクトの設定を行いましょう。

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

Vue CLI v3.11.0
✨  Creating project in /Users/blogenist/Develop/electron-app.
⚙  Installing CLI plugins. This might take a while...

yarn install v1.17.3
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...


success Saved lockfile.
✨  Done in 56.01s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 8.53s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project electron-app.
👉  Get started with the following commands:

 $ cd electron-app

Vue CLI v3.11.0

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter

? Use class-style component syntax? Yes

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

? Use history mode for router? (Requires proper server setup for index fallback in production) No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)

? Pick a linter / formatter config: TSLint

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

? Save this as a preset for future projects? No

Vue CLI v3.11.0

✨ Creating project in /Users/blogenist/Develop/electron-app.

⚙ Installing CLI plugins. This might take a while...

yarn install v1.17.3

info No lockfile found.

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

success Saved lockfile.

✨ Done in 56.01s.

🚀 Invoking generators...

📦 Installing additional dependencies...

yarn install v1.17.3

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

success Saved lockfile.

✨ Done in 8.53s.

⚓ Running completion hooks...

📄 Generating README.md...

🎉 Successfully created project electron-app.

👉 Get started with the following commands:

$ cd electron-app

動作確認

以下のコマンドでサーバーを起動し、http://localhost:8080/ にアクセスしてみましょう。

yarn run v1.17.3
$ vue-cli-service serve
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2517ms                                                                                                                                                                           18:43:43

No type errors found
No lint errors found
Version: typescript 3.6.2, tslint 5.19.0
Time: 1926ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run yarn build.

yarn run v1.17.3

$ vue-cli-service serve

INFO Starting development server...

Starting type checking and linting service...

Using 1 worker with 2048MB memory limit

98% after emitting CopyPlugin

DONE Compiled successfully in 2517ms 18:43:43

No type errors found

No lint errors found

Version: typescript 3.6.2, tslint 5.19.0

Time: 1926ms

App running at:

- Local: http://localhost:8080/

- Network: unavailable

Note that the development build is not optimized.

To create a production build, run yarn build.

正常に起動しましたね！

.
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── img
│   │   └── icons
│   │       ├── android-chrome-192x192.png
│   │       ├── android-chrome-512x512.png
│   │       ├── apple-touch-icon-120x120.png
│   │       ├── apple-touch-icon-152x152.png
│   │       ├── apple-touch-icon-180x180.png
│   │       ├── apple-touch-icon-60x60.png
│   │       ├── apple-touch-icon-76x76.png
│   │       ├── apple-touch-icon.png
│   │       ├── favicon-16x16.png
│   │       ├── favicon-32x32.png
│   │       ├── msapplication-icon-144x144.png
│   │       ├── mstile-150x150.png
│   │       └── safari-pinned-tab.svg
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── registerServiceWorker.ts
│   ├── router.ts
│   ├── shims-tsx.d.ts
│   ├── shims-vue.d.ts
│   ├── store.ts
│   └── views
│       ├── About.vue
│       └── Home.vue
├── tsconfig.json
├── tslint.json
└── yarn.lock

├── README.md

├── babel.config.js

├── node_modules

├── package.json

├── postcss.config.js

├── public

│ ├── favicon.ico

│ ├── img

│ │ └── icons

│ │ ├── android-chrome-192x192.png

│ │ ├── android-chrome-512x512.png

│ │ ├── apple-touch-icon-120x120.png

│ │ ├── apple-touch-icon-152x152.png

│ │ ├── apple-touch-icon-180x180.png

│ │ ├── apple-touch-icon-60x60.png

│ │ ├── apple-touch-icon-76x76.png

│ │ ├── apple-touch-icon.png

│ │ ├── favicon-16x16.png

│ │ ├── favicon-32x32.png

│ │ ├── msapplication-icon-144x144.png

│ │ ├── mstile-150x150.png

│ │ └── safari-pinned-tab.svg

│ ├── index.html

│ ├── manifest.json

│ └── robots.txt

├── src

│ ├── App.vue

│ ├── assets

│ │ └── logo.png

│ ├── components

│ │ └── HelloWorld.vue

│ ├── main.ts

│ ├── registerServiceWorker.ts

│ ├── router.ts

│ ├── shims-tsx.d.ts

│ ├── shims-vue.d.ts

│ ├── store.ts

│ └── views

│ ├── About.vue

│ └── Home.vue

├── tsconfig.json

├── tslint.json

└── yarn.lock

簡単にプロジェクトの雛壇を作れちゃうのがvue-cliの強みですね♪

electron-builderの追加

このままだと、単純なWebプロジェクトなのでElectron化するためにelectron-builderを追加する必要があります。

以下のコマンドで追加しましょう。

yarn install v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
$ electron-builder install-app-deps
  • electron-builder  version=21.2.0
✨  Done in 107.13s.
⠋  Running completion hooks...

 WARN  It is detected that you are using Vue Router. If you are using history mode, you must push the default route when the root component is loaded. Learn more at https://goo.gl/GM1xZG .
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
   The following files have been updated / added:

     .browserslistrc
     .gitignore
     README.md
     babel.config.js
     package.json
     postcss.config.js
     public/favicon.ico
     public/img/icons/android-chrome-192x192.png
     public/img/icons/android-chrome-512x512.png
     public/img/icons/apple-touch-icon-120x120.png
     public/img/icons/apple-touch-icon-152x152.png
     public/img/icons/apple-touch-icon-180x180.png
     public/img/icons/apple-touch-icon-60x60.png
     public/img/icons/apple-touch-icon-76x76.png
     public/img/icons/apple-touch-icon.png
     public/img/icons/favicon-16x16.png
     public/img/icons/favicon-32x32.png
     public/img/icons/msapplication-icon-144x144.png
     public/img/icons/mstile-150x150.png
     public/img/icons/safari-pinned-tab.svg
     public/index.html
     public/manifest.json
     public/robots.txt
     src/App.vue
     src/assets/logo.png
     src/background.ts
     src/components/HelloWorld.vue
     src/main.ts
     src/registerServiceWorker.ts
     src/router.ts
     src/shims-tsx.d.ts
     src/shims-vue.d.ts
     src/store.ts
     src/views/About.vue
     src/views/Home.vue
     tsconfig.json
     tslint.json
     yarn.lock

   You should review these changes with git diff and commit them.

yarn install v1.17.3

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

success Saved lockfile.

$ electron-builder install-app-deps

• electron-builder version=21.2.0

✨ Done in 107.13s.

⠋ Running completion hooks...

WARN It is detected that you are using Vue Router. If you are using history mode, you must push the default route when the root component is loaded. Learn more at https://goo.gl/GM1xZG .

⚓ Running completion hooks...

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

The following files have been updated / added:

.browserslistrc

.gitignore

README.md

babel.config.js

package.json

postcss.config.js

public/favicon.ico

public/img/icons/android-chrome-192x192.png

public/img/icons/android-chrome-512x512.png

public/img/icons/apple-touch-icon-120x120.png

public/img/icons/apple-touch-icon-152x152.png

public/img/icons/apple-touch-icon-180x180.png

public/img/icons/apple-touch-icon-60x60.png

public/img/icons/apple-touch-icon-76x76.png

public/img/icons/apple-touch-icon.png

public/img/icons/favicon-16x16.png

public/img/icons/favicon-32x32.png

public/img/icons/msapplication-icon-144x144.png

public/img/icons/mstile-150x150.png

public/img/icons/safari-pinned-tab.svg

public/index.html

public/manifest.json

public/robots.txt

src/App.vue

src/assets/logo.png

src/background.ts

src/components/HelloWorld.vue

src/main.ts

src/registerServiceWorker.ts

src/router.ts

src/shims-tsx.d.ts

src/shims-vue.d.ts

src/store.ts

src/views/About.vue

src/views/Home.vue

tsconfig.json

tslint.json

yarn.lock

You should review these changes with git diff and commit them.

確認

無事にインストール出来たら以下のコマンドでElectronを実行してみましょう。

yarn run v1.17.3
$ vue-cli-service electron:serve
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2229ms                                                                                                                                                                           19:00:21

Type checking and linting in progress...

  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run yarn build.

No type errors found
Version: typescript 3.6.2, tslint 5.19.0
Time: 2638ms
⠴  Bundling main process...

 DONE  Compiled successfully in 484ms                                                                                                                                                                            19:00:22

  File                      Size                     Gzipped

  dist_electron/index.js    651.88 KiB               148.31 KiB

  Images and other types of assets omitted.

 INFO  Launching Electron...

yarn run v1.17.3

$ vue-cli-service electron:serve

INFO Starting development server...

Starting type checking and linting service...

Using 1 worker with 2048MB memory limit

98% after emitting CopyPlugin

DONE Compiled successfully in 2229ms 19:00:21

Type checking and linting in progress...

App running at:

- Local: http://localhost:8080/

- Network: unavailable

Note that the development build is not optimized.

To create a production build, run yarn build.

No type errors found

Version: typescript 3.6.2, tslint 5.19.0

Time: 2638ms

⠴ Bundling main process...

DONE Compiled successfully in 484ms 19:00:22

File Size Gzipped

dist_electron/index.js 651.88 KiB 148.31 KiB

Images and other types of assets omitted.

INFO Launching Electron...

無事にアプリケーションとして起動しましたね♪

デスクトップアプリケーションのビルド

では、この状態のアプリケーションをビルドしてみましょう。

vue-cliのelectron-builderを使うと、この辺のビルド周りもあらかじめ整えられているのでそのままビルド出来てしまいます・・・！

以下のコマンドを実行しましょう。

yarn run v1.17.3
$ vue-cli-service electron:build
 INFO  Bundling render process:

⠋  Building modern bundle for production...Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
⠹  Building modern bundle for production...

  File                                      Size             Gzipped

  dist_electron/bundled/js/chunk-vendors    105.82 KiB       36.04 KiB
  .7d92e116.js
  dist_electron/bundled/js/app.6774a83f.    6.93 KiB         2.63 KiB
  js
  dist_electron/bundled/service-worker.j    0.95 KiB         0.54 KiB
  s
  dist_electron/bundled/precache-manifes    0.67 KiB         0.31 KiB
  t.b1ab04c5225d9806f86209d073594343.js
  dist_electron/bundled/js/about.e281d17    0.44 KiB         0.31 KiB
  d.js
  dist_electron/bundled/css/app.00a74e55    0.42 KiB         0.26 KiB
  .css

  Images and other types of assets omitted.

 DONE  Build complete. The dist_electron/bundled directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

⠋  Bundling main process...

 DONE  Compiled successfully in 3403ms                                                                                                                                                                           13:45:39

  File                                   Size              Gzipped

  dist_electron/bundled/background.js    160.59 KiB        49.73 KiB

  Images and other types of assets omitted.

 INFO  Building app with electron-builder:
  • electron-builder  version=21.2.0 os=18.6.0
  • description is missed in the package.json  appPackageFile=/Users/blogenist/electron-app/dist_electron/bundled/package.json
  • author is missed in the package.json  appPackageFile=/Users/blogenist/electron-app/dist_electron/bundled/package.json
  • writing effective config  file=dist_electron/builder-effective-config.yaml
  • packaging       platform=darwin arch=x64 electron=6.0.7 appOutDir=dist_electron/mac
  • default Electron icon is used  reason=application icon is not set
  • skipped macOS application code signing  reason=cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate, see https://electron.build/code-signing allIdentities=
                                                1) 29560279B124B3E8ED4F245BB71C75A1C8D7D79B "member: A5AD2CF9-9D93-47E3-A0B7-4EB980E6340E 04B7A6F3-03ED-4CE0-B498-72101C605FFF" (CSSMERR_TP_NOT_TRUSTED)
                                                   1 identities found

                                                Valid identities only
                                                   0 valid identities found
  • building        target=macOS zip arch=x64 file=dist_electron/electron-app-0.1.0-mac.zip
  • building        target=DMG arch=x64 file=dist_electron/electron-app-0.1.0.dmg
  • building block map  blockMapFile=dist_electron/electron-app-0.1.0.dmg.blockmap
  • building embedded block map  file=dist_electron/electron-app-0.1.0-mac.zip
 DONE  Build complete!
✨  Done in 39.89s.

yarn run v1.17.3

$ vue-cli-service electron:build

INFO Bundling render process:

⠋ Building modern bundle for production...Starting type checking and linting service...

Using 1 worker with 2048MB memory limit

⠹ Building modern bundle for production...

File Size Gzipped

dist_electron/bundled/js/chunk-vendors 105.82 KiB 36.04 KiB

.7d92e116.js

dist_electron/bundled/js/app.6774a83f. 6.93 KiB 2.63 KiB

dist_electron/bundled/service-worker.j 0.95 KiB 0.54 KiB

dist_electron/bundled/precache-manifes 0.67 KiB 0.31 KiB

t.b1ab04c5225d9806f86209d073594343.js

dist_electron/bundled/js/about.e281d17 0.44 KiB 0.31 KiB

d.js

dist_electron/bundled/css/app.00a74e55 0.42 KiB 0.26 KiB

.css

Images and other types of assets omitted.

DONE Build complete. The dist_electron/bundled directory is ready to be deployed.

INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

⠋ Bundling main process...

DONE Compiled successfully in 3403ms 13:45:39

File Size Gzipped

dist_electron/bundled/background.js 160.59 KiB 49.73 KiB

Images and other types of assets omitted.

INFO Building app with electron-builder:

• electron-builder version=21.2.0 os=18.6.0

• description is missed in the package.json appPackageFile=/Users/blogenist/electron-app/dist_electron/bundled/package.json

• author is missed in the package.json appPackageFile=/Users/blogenist/electron-app/dist_electron/bundled/package.json

• writing effective config file=dist_electron/builder-effective-config.yaml

• packaging platform=darwin arch=x64 electron=6.0.7 appOutDir=dist_electron/mac

• default Electron icon is used reason=application icon is not set

• skipped macOS application code signing reason=cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate, see https://electron.build/code-signing allIdentities=

1) 29560279B124B3E8ED4F245BB71C75A1C8D7D79B "member: A5AD2CF9-9D93-47E3-A0B7-4EB980E6340E 04B7A6F3-03ED-4CE0-B498-72101C605FFF" (CSSMERR_TP_NOT_TRUSTED)

1 identities found

Valid identities only

0 valid identities found

• building target=macOS zip arch=x64 file=dist_electron/electron-app-0.1.0-mac.zip

• building target=DMG arch=x64 file=dist_electron/electron-app-0.1.0.dmg

• building block map blockMapFile=dist_electron/electron-app-0.1.0.dmg.blockmap

• building embedded block map file=dist_electron/electron-app-0.1.0-mac.zip

DONE Build complete!

✨ Done in 39.89s.

すると、が生成されその中に成果物が出力されています。

dist_electron/
├── builder-effective-config.yaml
├── bundled
│   ├── background.js
│   ├── css
│   ├── favicon.ico
│   ├── img
│   ├── index.html
│   ├── js
│   ├── manifest.json
│   ├── node_modules
│   ├── package.json
│   ├── precache-manifest.b1ab04c5225d9806f86209d073594343.js
│   ├── robots.txt
│   └── service-worker.js
├── electron-app-0.1.0-mac.zip
├── electron-app-0.1.0.dmg
├── electron-app-0.1.0.dmg.blockmap
├── index.js
├── mac
│   └── electron-app.app
└── package.json