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

YouTubeも見てね♪

ねこじゃすり

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

created by Rinker

PEPPY(ペピイ)

¥3,850 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

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

【最新機種】GoPro hero11 Black

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

created by Rinker

GoPro(ゴープロ)

¥62,000 (2024/03/15 19:06:06時点 Amazon調べ-詳細)

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

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

created by Rinker

Red Bull(レッドブル)

¥4,080 (2024/03/15 19:03:47時点 Amazon調べ-詳細)

翼を授けよう！

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,250 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

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

created by Rinker

Bauhutte(バウヒュッテ)

¥13,861 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

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

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

created by Rinker

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

¥7,180 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

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

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

created by Rinker

MOFT

¥2,880 (2024/03/15 19:06:03時点 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

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

いたせりつくせりですね・・・！

試しに、electron-app-0.1.0.dmgを実行してみましょう。

無事にインストーラーが起動され、Applicationsに入れることでAlfred2の検索にもヒットし起動しました♪

2年前にReactで生のElectronを自前で実装していた時は、このビルド周りを整えるのにめちゃくちゃ苦戦していた記憶があるので幸せ過ぎます・・・！！！

もちろん、設定を変えることでアイコンやアプリ名を変えれるはずなのでそれはまた次回以降に試してみたいと思います♪

終わりに

以上のように、vue-cliを使えばベースプロジェクトの作成及び起動までは全てcli操作のみで完結しました。

あとはこのプロジェクトをベースに実装を進めていけば良いので、皆さんもオリジナルデスクトップアプリケーションを作ってみてはいかがでしょうか♪

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

ねこじゃすり

【最新機種】GoPro hero11 Black

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

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

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

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

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

Electron使いたい

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

Electronとは？

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

手順

vue-cliのインストール

vueプロジェクトの作成

動作確認

electron-builderの追加

確認

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

終わりに

CATEGORIES & TAGS

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

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

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

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

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