きっかけ
react + electronにしようか、angular + electronにしようか、いろいろ悩んだけど、一番楽に始められたvue + electron + element-ui に落ち着いたので、まとめる。
なお、自分向けなので、端折ってあるところがある。
環境
Visual Studio Code
バージョン: 1.38.1 (system setup) コミット: b37e54c98e1a74ba89e03073e5a3761284e3ffb0 日付: 2019-09-11T13:35:15.005Z Electron: 4.2.10 Chrome: 69.0.3497.128 Node.js: 10.11.0 V8: 6.9.427.31-electron.0 OS: Windows_NT x64 10.0.18362
npm
$ npm -v 6.4.1
前準備
vueの環境構築として提供されているCLIを導入する。
自分で１から構築すると面倒なので、楽な手段に頼る。
$ npm install -g @vue/cli
自分は、v3.11.0が入った。
$ npm -g ls --depth=0 C:\Program Files (x86)\Nodist\bin … +-- @vue/cli@3.11.0 +-- @vue/cli-init@3.7.0 …
環境構築
プロジェクト作成
$ vue create my-app
いろいろ聞かれるので、お好みで入れる。
僕は、manualでjs形式のプロジェクトを作成した。
前はtypescriptだったけど、最近は、環境構築面倒だからjsでいいやって感じになってる。
jsに慣れてしまうと、typescriptに戻ろうという気が起きないから不思議。
electron-builderの追加
このままだと、ただのvueプロジェクトなので、electronを追加する。
具体的には、下記のコマンド。
$ cd my-app $ vue add electron-builder
動作確認
ここまでやると、とりあえずデモアプリが動かせるようになる。
なので、テストを兼ねて動かしてみる。
$ npm run electron:serve
コマンドが長いので、毎回打つのが億劫な人は、package.json の scripts に、"start": "npm run electron:serve",を追加すると、次からnpm start で動かせるので楽かも
その他オススメの設定
element-uiの導入
element-uiは、高機能なUIパーツが使えるようになるコンポーネント詰め合わせライブラリ。
ちまちまコンポーネント作る手間が省けて、かつ、いい感じのコンポーネントが使えるようになるのがいい。
$ npm install element-ui -S
インストールが終わったら、main.jsにelement-uiのコンポーネントを読み込ませる設定を追加する。
import ElementUI from "element-ui";
import locale from "element-ui/lib/locale/lang/ja";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI, { locale });
あとは、vueファイルにコンポーネントを追加すれば、使えるはず。
設定ファイルを導入したい
electron-store を導入する。
https://github.com/sindresorhus/electron-store
設定ファイルは、デフォルトだと、C:\Users\<ユーザ名>\AppData\Roaming\<プロジェクト名>直下に、config.jsonができる。
プロジェクト直下にファイルを作って読み書きさせたいのだが、できないのかな？
感想
router.jsが、最初に見たときは、意味分からなかったけど、strutsで言うところのstruts-config.xmlかと思うと、結構、納得した。
element-uiが、意外とデザインが良くて気に入ってる。
最初作り始めると、デザインのダサさで四苦八苦してたけど、これ使えばそこそこの見た目でできるから、不要なところで悩む必要ないなと感じた。
参考サイト
Vue.jsのコンポーネント詰め合わせ「Element」がスゴかった | 綺麗に死ぬITエンジニア
