はじめてVue.js+Electronでアプリをつくった時にはまったこと|blog(スワブロ)

はじめてVue.js+Electronでアプリをつくった時にはまったこと

2019.06.03

こんにちは、せんだです。

以前、[Vue.js+Electron]AdminLTEを使って簡単に管理画面を作ってみるという記事を書いたのですが、実はというとこの時がはじめてのVue.jsだったのです。かつElectronのビルドも初めてelectronBuilderを使いました。

はじめてということもあって、それなりにハマったことや「え！？そうだったの！？」みたいなこともあったので、今回はそれについて書きたいと思います。

環境

端末：MacBook Pro

Vue.js：2.6.6

Vue CLI：3.5.5

Vue Router：3.0.1

Vuex：3.0.1

では早速つらつらと書いていきます。

v-bindの書き方を間違える

省略形の話ですが、当初は下記のようによく間違っていました。しょうもないですね。。。

間違い

1	item:="item"

正しい書き方

1	:item="item"

画面にコンテンツが表示されない

ヘッダーやフッターは表示されるのですが、router.jsで指定したコンポーネントが表示されないことがありました。

原因は<router-view />を消してしまっていたことです。これもしょうもない。。。

<router-view />の部分にrouter.jsで指定したコンポーネントが表示されるということが改めてわかりました。

他にもやってしまった人がいたので、意外とVue.jsあるある！？

1
2
3
4
5
6
7
8
9
10

<template>
<div id="app">
<div class="wrapper">
<MainHeader />
<MainAside />
<router-view /> ←消しちゃだめ
<MainFooter />
</div>
</div>
</template>

画面をリロードするとデータが表示されなくなる

this.$route.paramsを使ってURLの末尾からIDを取得し、取得したIDに紐づくデータをstoreから取り出して表示するというコンポーネントを書いた時です。なんと画面リロードするとデータが表示されません。

なんてこったい。

（端的に言うとhttps://swallow-incubate.com/archives/blog/1みたいなページで「1」に紐づくデータを表示したいということです。）

これはcomputedを使うことで意図するような動作になりました。

修正前のコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<template>
<ul>
<li v-for="d in blogDetail" :key="d.id" >{{ d.title }}</li>
</ul>
</template>

export default {
name: 'detail',
data: function () {
return {
blogId: parseInt(this.$route.params.blogId),
blogDetail: this.$store.getters.blogData(this.blogId)
}
}
}

修正後のコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
<ul>
<li v-for="d in blogDetail" :key="d.id" >{{ d.title }}</li>
</ul>
</template>

export default {
name: 'detail',
data: function () {
return {
blogId: parseInt(this.$route.params.blogId),
}
},
computed: {
blogDetail: function () {
return this.$store.getters.blogData(this.blogId)
}
}

正直この件に関しては、他にもっと最善な方法があると思いつつ、一応解決しました。

背景画像を指定する

意外とこれもハマったのですが、API等から取得した画像を背景画像に指定する際はtemplate内に下記のように記述すると実現できます。

1
2
3
4
5
6
7
8
9
10
11

<template>
<div :style="{ backgroundImage: 'url(' + bgImage + ')',backgroundSize: 'contain', backgroundRepeat: 'no-repeat', width: '350px' }">画像を表示します</div>
</template>

export default {
data: function () {
return {
Image: 'APIなどで取得する想定'
}
}
}

electronBuilderでのビルド時にアイコンを指定する方法

Vue CLI3で初期設定を行なった際には生成されないのですが、vue.config.jsというファイルを作成し、下記の記述をすることによって対応できました。

vue.config.js

1
2
3
4
5
6
7
8
9
10
11

module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
mac: {
icon: 'build/icon.png'
}
}
}
}
}

buildディレクトリ配下にicon.pngを格納するのをお忘れなく！

Electron起動時に初期画面が表示されない

ビルド後、Electronアプリを起動した時に、<router-view />の部分に何も表示されないという事象が発生しました。初期起動した際「/」（ルート）が表示されると思っていたら、そうではないようなのでApp.vueに下記の記述をすることで対応できました。

App.vue

1
2
3
4
5
6

export default {
name: 'app',
created () {
this.$router.push('/')
}
}

これも他の方法が無いのか気になってます。ちなみにWebアプリ作る時にこれを書いてしまうと、リロードする度にトップページに戻るのでよろしくないです。

まとめ

細かいことをあげるともっと色々あったと思いますが、すぐに思い出したのはこんなところです。

まだ、触り始めたばかりですがVue.jsで作るのが結構楽しくなってきたので、これからも積極的に使っていきたいと思います。

それでは、また！

↓↓↓ぜひチェックしてください

～提供中のヒューマンセンシング技術～

◆人物検出技術
歩行者・来店者数計測やロボット搭載も
https://humandetect.pas-ta.io

◆視線検出技術
アイトラッキングや次世代UIに
https://eyetrack.pas-ta.io

◆生体判定技術
eKYC・顔認証のなりすまし対策を！
https://bio-check.pas-ta.io

◆目検出技術
あらゆる目周りデータを高精度に取得
https://pupil.pas-ta.io

◆音声感情認識技術
会話から怒りや喜びの感情を判定
https://feeling.pas-ta.io

◆虹彩認証技術
目の虹彩を利用した生体認証技術
https://iris.pas-ta.io

< Back

はじめてVue.js+Electronでアプリをつくった時にはまったこと