Vue3+TypeScript+Electronのプロジェクトを作成する方法

2022.8.11 Vue3+TypeScript+Electron プロジェクトの作成方法

開発環境の準備：VS Code、npm、node

1. Vue CLI (Vue スキャフォールド) のインストール#

以下のいずれかのコマンドを使用してこの新しいパッケージをインストールできます：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

詳細はvue CLI インストールを参照してください。

2. Vue プロジェクトの作成#

vue create demo1

キーボードの上下キーで Manually select features を選択して手動で選択します。
TypeScript と個人の好みに応じた依存関係をスペースキーで選択します。
最後に Enter キーを押して選択を完了します。

> Vue CLI v5.0.8
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯   Manually select features

習慣に従って選択します。
私は ([Vue 3] less, typescript, pwa, router, vuex, eslint) が好きです。

Vue CLI v5.0.8
✨  Creating project in /Users/luoyuhang/demo1.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

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

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

📄  Generating README.md...

🎉  Successfully created project demo1.
👉  Get started with the following commands:

 $ cd demo1
 $ yarn serve

3. Electron Builder の追加#

vue add electron-builder

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

yarn add v1.22.17
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
success Saved 850 new dependencies.
info Direct dependencies
├─ @typescript-eslint/[email protected]
……ここに多くの依存パッケージがあります
✨  Done in 29.53s.
✔  Successfully installed plugin: vue-cli-plugin-electron-builder

次にいくつかのオプション（～v～）が表示されるので、一緒に選択します～

? Choose Electron Version (Use arrow keys)
  ^11.0.0 
  ^12.0.0 
❯ ^13.0.0

個人のニーズに応じて最新のものを選択します。

$ electron-builder install-app-deps
  • electron-builder  version=22.14.13
✨  Done in 8.33s.
⠋  Running completion hooks...

 WARN  Vue Routerを使用していることが検出されました。Electronで動作するにはハッシュモードで機能する必要があります。詳細はhttps://goo.gl/GM1xZGを参照してください。
⚓  Running completion hooks...

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

vue-router を選択した場合は、必ずハッシュモードを使用する必要があります。

4. どうやって起動するのか？#

起動スクリプト

コンソールに入力します。

npm run electron:serve

これで起動が完了します。

5. 問題のトラブルシューティング#

5.1 e の型 unknown#

 ERROR  Failed to compile with 1 errors                                                                                                             20:54:21

 error  in ./src/background.ts

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/luoyuhang/demo1/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/Users/luoyuhang/demo1/node_modules/ts-loader/dist/index.js:14:21)

 @ multi ./src/background.ts

 ERROR  Build failed with errors.

問題 1
ここで typescript が e の型を認識できないため、この行を削除するか、

} catch (e) {

e の後にを追加して ts に型を無視させます。

} catch (e:any) {

5.2. TypeError: loaderContext.getOptions is not a function#

 ERROR  Failed to compile with 1 errors                                                                                                             20:58:35

 error  in ./src/background.ts

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/luoyuhang/demo1/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/Users/luoyuhang/demo1/node_modules/ts-loader/dist/index.js:14:21)

 @ multi ./src/background.ts

 ERROR  Build failed with errors.

どうやら ts の問題のようで、バージョンを 4.5.15 に下げると不思議と解決しました。具体的な理由は不明です。

npm i -D @vue/[email protected] --force

6. ついに起動成功#

起動成功

7. まとめ#

npm install -g @vue/cli
vue create demo1
cd demo1
vue add electron-builder
npm run electron:serve

皆さんの注目を求めています。私に継続的な更新のモチベーションをください😭