前置き
vue+electronでデスクトップアプリケーションを作成してみる。 その１?
最近のUIの流行り
Visual Studio Code
QT
左端にツールアイコンがあり、クリックするとツールの詳細が現れる。 まずはこれをVueで実装してみようと思う。
作成案
ディレクトリ構成
Vue Cli 3でデフォルトで作成されるディレクトリから以下を追加した。
今回作成するUIにrouterは必要ないが後々の事を考えて追加した。
Vue CLI 3 router vuex
ここまで書いてVue CLIにはマニュアルを作成できることが判明した。
$ vue create hoge
でManualを選択すると以下の画面になる.
ただ作成して何もしていない状態
GitHub - nullpo24/vue-spa at v0.0.1
そのままだと不便なので、router.jsとstore.jsをそれぞれrouterディレクトリとstoreディレクトリのそれぞれ作成し、その配下の移動する。
名前を変更する。
router.js→index.js
store.js→index.js
こうすることでmain.js内で
import router from './router'という読み込みをした場合、自動的にそのディレクトリ配下のindex.jsが読み込まれる。
また、router/index.jsのパスを変更した。
./views/Home.vue→@/view/Home.vue
「@」は「
GitHub - nullpo24/vue-spa at v0.0.2
NavigationBarを追加。 https://github.com/nullpo24/vue-spa/tree/v0.0.3
SVGアイコンについて
SVGアイコンについては公式を参考にしました。
公式のソースコードを参考にする場合、viewBox="0 0 18 18"というサイズになっています。 SVGアイコンをどこかのサイトからもらってくる場合、まずソースコードをアイコンに合わせるか、アイコンをソースコードに合わせる必要があります。
アイコンをソースコードに合わせる場合、サイズを変更させる必要があります。 SVGアイコンを扱うソフトとして、 Inkscape(無料だけどMacだと重い)かIllustrator(有料)がありますが、 以下のサイトで変換するのが一番手っ取り早いです。
出来上がったsvgをテキストエディタで開きpathタグの中身(< path d="中身">)をソースへコピーすればオッケーです。
