vue-cli3 + TypeScript + Electronでアプリを開発する

7120 ワード
Electron electron-builder Vue.js TypeScript TypeScript テキストリンク

はじめに

Vue.jsとTypeScriptとElectronでデスクトップアプリケーションを開発するときに必要な手順を忘備録として書いていきます。

vue-cli3のインストール

プロジェクトの作成前に、@vue/cliをグローバルインストールします。

$ npm install -g @vue/cli

2.x系を使用している方はいったんアンインストールしてからインストールしてください。

$ npm uninstall -g vue-cli
$ npm install -g @vue/cli

vue createでアプリのひな型を作成

$ vue create my-app

カレントディレクトリにmy-appという名前のディレクトリが作成されます。
my-appの部分はお好きな名前に変更してください。
以降はここで作成したディレクトリの中で作業を行います。

上記のコマンドを実行すると、いくつか質問をされます。
今回はTypeScriptを利用したいので、Manually select featuresを選択し、下記のように設定しました。

? Check the features needed for your project:
> Babel
> TypeScript
> Router
> Vuex
> CSS Pre-processors
> Linter / Formatter

? Use class-style component syntax?
> Yes

? Using Babel alongside Typescript?
> Yes

? Use history mode for router?
> No

? Pick a CSS pre-processor:
> Sass/SCSS (with node-sass)

? Pick a linter / formatter config:
> ESLint with error prevention only

? Pick additional lint features:
> 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

後のセクションElectronをインストールする際に利用するVue CLI Plugin Electron BuilderはVueRouterがhistoryだとうまく動かないので、hashモードにしています。
historyにしてしまったときは、src/router.tsを以下のように編集します。

// src/router.ts
...
export default new Router({
-  mode: 'history',
+  mode: process.env.IS_ELECTRON ? 'hash' : 'history',
  ...
})
...

ブラウザでhttp://localhost:8080/にアクセスし、正常に起動しているか確認します。

Electronをインストールする

$ vue add electron-builder

上記のコマンドを実行すると、Electron(と依存パッケージ)がインストールされ、一部ファイルが追加、更新されます。
重要なのは下記のファイルです。

package.json

...
"scripts": {
+   "electron:build": "vue-cli-service electron:build",
+   "electron:serve": "vue-cli-service electron:serve",
},
+  "main": "background.js",
...

electron:buildとelectron:serveというスクリプトが追加されています。
これにより開発サーバを起動したり、アプリケーションビルドができます。

開発サーバの立ち上げ

$ npm run electron:serve

アプリケーションビルド

$ npm run electron:build

まとめ

今回はVue.js + TypeScript + Electronでアプリケーションを起動するところまでを説明しました。
次回からはTypeScriptでのVueコンポーネントの書き方やVueRouter、Vuex、axiosとの組み合わせ方などを紹介しようと思います。