はじめに
最近Vue.jsを学習中です。
Vuetifyに手を出した際にスロットに関する理解が不十分であることに気づいたので、Vue.js公式ドキュメントを一通り読みながら動かしてみようと思ったのですが、いくつか躓いた点があるので残しておきます。(※2020/1/8時点の内容です。)
Vue.js最近触り始めたよーって方の参考になれば幸いです。
※できるだけ分かりやすく書きますが完全に初心者向けの内容というわけではないので、完全初心者の方は公式ドキュメントの「基本的な使い方」あたりを見てからの方が理解できると思います。
ちなみにVue.jsの初学者向けの書籍としては猫本がおすすめです。
事前準備
試しで動かすためにVueCLI4でプロジェクトのひな型を作ります。
１. VueCLI4をインストールする。 ※参考
npm install -g @vue/cli
２. プロジェクトを作りたいディレクトリでcreateする。 ※参考
vue create my-app
上記のコマンド実行後にプロジェクトの構成を聞かれますが、defaultでOKです。
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
しばらく待ってひな形のプロジェクトの完成です。
3. サーバを立ち上げる
以下のようにディレクトリを変更して、サーバを起動するように促されますので、言われた通りにコマンドを実行します。
�🎉 Successfully created project my-app.
�👉 Get started with the following commands:
$ cd my-app
$ npm run serve
以下のように表示されたらサーバが立ち上がっているのでhttp://localhost:8080/にブラウザからアクセスします。
(VSCodeの場合はCtrlを押しながらクリックするとブラウザで開けて便利！)
DONE Compiled successfully in 6349ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.100.100:8080/
以下のような画面が表示されていればOKです。
ちなみにサーバの停止はVSCodeの場合、Ctrl+Cでできます。
以下が出力されるのでyを入力すればOKです。
バッチ ジョブを終了しますか (Y/N)?
基本的に作業中は立ち上げっぱなしで問題ないです。
※VSCode自体を閉じても停止します。
４. ソースを修正する
自動で出力されたソースを修正して、この後の動作確認を行いやすくします。
対象のファイルを以下のように修正します。
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
<template>
<div>Slot Practice</div>
</template>
<script>
export default {
name: "HelloWorld"
};
</script>
かなりスッキリしました。
再度ブラウザでhttp://localhost:8080/を開くと「Slot Practice」が左上に表示されているだけであることを確認してください。
ちなみに構成としてはApp.vueが親コンポーネント、HelloWorld.vueが子コンポーネントとなっています。
Slotはざっくり言うと親が子のコンポーネントを呼び出す際にデータなどを与える仕組みだと思うので、親と子の関係がある点を抑えておくとよいかと思います。
躓いた点
スロットコンテンツ
①urlが見つからない
とりあえず載ってる通りに修正したら最初っから詰まりました。
※コンポーネントの名前は変えるのがめんどくさかったのでHelloWorldのままにしてます。
分かりにくければnavigation-linkに読み替えてもらえればと思います。
<template>
<div id="app">
<HelloWorld url="/profile">
Your Profile
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
<template>
<a v-bind:href="url" class="nav-link">
<slot></slot>
</a>
</template>
<script>
export default {
name: "HelloWorld"
};
</script>
上記のように修正ところ、VSCode上ではエラーなどはなかったのですが、Chrome上でエラーが発生していました。
(ChormeのデベロッパーツールはF12で開けます。便利！)
エラーの内容は以下です。
ごちゃごちゃ書いてありますが、要は以下の2点です。
・「urlが使われているが、定義されていない」
・「src/components/HelloWorld.vueが原因」
①解決
HelloWorld.vueでhref属性にv-bindしているurlが定義されていないことが原因でした。
なのでdataを追加して、urlに適当に値を設定してあげます。
<template>
<a v-bind:href="url" class="nav-link">
<slot></slot>
</a>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
url: "https://www.google.com/"
};
}
};
</script>
ちなみにコンポーネントのdataオプションは関数である必要があります。 ※参考
上記に修正したところ、Chorme上のエラーが消えて、「Your Profile」がリンクになり、「https://www.google.com/」
を開けるようになりました。
②<font-awesome-icon>が見つからない
親側(App.vue)で子コンポーネントタグの中にコンポーネントも含むことができるよの説明の中で、Font awesomeが使われていました。
とりあえず以下のように修正。
<template>
<div id="app">
<HelloWorld url="/profile">
<!-- コンポーネントを使ってアイコンを追加 -->
<font-awesome-icon name="user"></font-awesome-icon>Your Profile
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
上記の修正を行ってChormeを確認したところ、以下のようなエラーが発生していました。
font-awesome-iconが見つからないとのこと。
②解決
ググって一番上にあった以下の記事を参考に、Font awesomeをinstallします。
Font awesome を Vue.js で使ってみよう
※installコマンドを実行する前にサーバを停止します。
> npm install --save @fortawesome/fontawesome-svg-core
> npm install --save @fortawesome/free-solid-svg-icons
> npm install --save @fortawesome/vue-fontawesome
更に先ほどの記事を参考にsrc/main.jsを以下のように修正します。
import Vue from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faCoffee)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
この状態で再度サーバを立ち上げて、ブラウザで確認します。
新たに以下のエラーが出ていました。。。
1つ目のエラーについて、とりあえず先ほどの参考記事の下の方まで確認すると、ここで<font-awesome-icon icon="coffee" />としている部分を見つけました。
nameではなくiconを指定するようです。
また、公式Githubの使用方法にも同様にiconを指定している記述がありました。
App.vueを以下のように修正します。
<template>
<div id="app">
<HelloWorld url="/profile">
<!-- コンポーネントを使ってアイコンを追加 -->
<font-awesome-icon icon="user"></font-awesome-icon>Your Profile
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
ブラウザを確認すると1つ目のエラーがなくなっていることを確認できました。
2つ目のエラーについては、なかなか原因が分からなかったのですが、先程の公式Githubの使用方法をよく確認すると、src/App.vueでuser-secretのアイコンを使用するために、src/main.jsにおいて{ faUserSecret }をimportしていることに気づきました。
どうやら使用したいアイコンによってimportするアイコンを指定する必要があるようです。
これに倣って、main.jsのimport部分とadd部分を修正します。
import Vue from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faUser)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
上記の修正後、Chormeでエラーが出ていないことと、画面上でユーザーのアイコンが表示されていることを確認できました。
続く
長くなってしまったので次回に続きます。