ElectronとVue3 + TypeScriptでデスクトップアプリを作る 環境構築編

$ yarn global add @vue/cli

$ vue -V
@vue/cli 4.5.9

> vue create programmable-calculator

Vue CLI v4.5.9
# 構成のプリセットを選択　-> マニュアル
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

? Please pick a preset: Manually select features
# プロジェクトに必要なモノを選択する　-> PWA と E2E Testing以外全て
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 (*) Choose Vue version
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
>( ) E2E Testing

# Vue.jsのバージョン -> 3.x
? Choose a version of Vue.js that you want to start the project with 
  2.x
> 3.x (Preview)

# TypeScriptと一緒にBabelを使うか -> Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

# Vue routerでヒストリーモード（ブラウザバック）を使うか -> Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

# CSSプリプロセッサ -> Sass/SCSS (with node-sass)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

# コードの規準　→ ESLint + Prettier
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier
  TSLint (deprecated)

# Lintが実行するタイミング -> 保存するときにした。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

# ユニットテストで使うモジュール -> Jest
? Pick a unit testing solution: (Use arrow keys)
  Mocha + Chai
> Jest

# 設定の記述先 -> 専用の設定ファイルで行う。
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

# プリセットとして登録するか　-> No
? Save this as a preset for future projects? (y/N)

# プロジェクトを作成する。
Vue CLI v4.5.9
✨  Creating project in C:\git\programmable-calculator.

🎉  Successfully created project programmable-calculator.
👉  Get started with the following commands:

 $ cd programmable-calculator
 $ yarn serve

> vue add electron-builder

# Electronのバージョン -> ^9.0.0
? Choose Electron Version (Use arrow keys)
  ^7.0.0
  ^8.0.0
> ^9.0.0
? Add tests with Spectron to your project? Yes

# インストール中。。。

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

# 実行
> yarn run electron:serve

# ビルド
> yarn run electron:build

# 実行
> yarn run electron:serve

>yarn run test:unit
yarn run v1.22.5
$ vue-cli-service test:unit
 PASS  tests/unit/example.spec.ts 
 PASS  tests/unit/electron.spec.js (44.968s)

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        45.955s
Ran all test suites.
Done in 49.00s.

-- import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
++ import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from "vue-router";

・・・省略

const router = createRouter({
--  history: createWebHistory(process.env.BASE_URL),
++  history: process.env.IS_ELECTRON
++  ? createWebHashHistory()
++  : createWebHistory(),
})

# ビルド
>yarn run electron:build

...
 DONE  Build complete!
Done in 102.37s.