はじめに
vueアプリを個人で作成してデプロイまでしたのでその備忘録として。
以下の記事に従って、HelloWorldは済ませている。
作成するアプリは、The Movie Database Apiにアクセスして映画を探せるアプリ。
ちなみに作成した全コードは以下。
導入
axiosの導入
APIを叩くためにaxiosを入れないといけない。
色々調べたが、結局以下のコマンドで導入後、特に何かのファイルとかをいじらなくても利用できた。
npm install axios --save
これできちんとpackage.jsonにも追加されたし、ファイルからも読み込めるようになった！
vuexの導入
気に入った映画をお気に入り登録して、お気に入り一覧を表示したいので、vuexを導入してstoreに保存できるようにする。
今回はページ遷移がないのでなくても大丈夫ではあるが、拡張性を考えると絶対にあった方がいいので入れておく。
うまく動かなかったので調べた記事。
どうするのがベストプラクティスかはわからないが、vue3では以下の方法で動くことがわかった。
コード全部はgithubに載ってるので、大事なとこだけメモする。
import { createApp } from 'vue'
import App from './App.vue'
import { store } from "./store"; // <- 自分で作ったstoreファイル
const app = createApp(App).use(store) // <- ここでstoreをuseする
app.mount('#app')
import Vuex from "vuex";
import { movie, MovieState } from "./modules/movie"; // 自分の定義したmodule
// interfaceを定義する
export interface RootState {
movie: MovieState;
}
// このstoreが、上の`main.ts`で読み込まれるやつ。
export const store = new Vuex.Store<RootState>({
modules: { movie },
});
で、使う時はこんな感じ。
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { useStore } from "vuex"
// ...
@Options({
})
export default class Home extends Vue {
store = useStore() // this.storeでstoreにアクセスできるようになる。
// ...
}
ほんとはvue2みたいにthis.$storeで読み込めるようにしたかったけどうまいことできなかった。
時間があるときにそこら辺周りをきちんと調べたい。
font-awesomeの導入
solidからもregularからも同じ名前のものをimportしたいときにちょっと困った。
やってみれば簡単だった。
import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
// それぞれ別の名前でimportして
import { faHeart as solidHeart } from '@fortawesome/free-solid-svg-icons'
import { faHeart as regularHeart } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// それぞれaddする
library.add(solidHeart);
library.add(regularHeart);
const app = createApp(App)
app.component('fa', FontAwesomeIcon )
app.mount('#app')
使うときに同じ名前で混乱しないかと思ったけど、regularとsolidで使うクラス名が異なるので大丈夫だった。
<fa icon="heart" /> // <- solid icon
<fa :icon="['far', 'heart']" /> // <- regular icon
ただ、使うアイコンを一つ一つimportしないといけないの面倒くさい。
もうちょっと楽な方法もありそうな気もする。
開発
ここまでくれば、あとは自分の好きなようにコードを書くだけ。
特に困ったことはないので飛ばす。
デプロイ
Netlifyへのホスティング
以下の記事を参考に、ホスティング先を決めた。
netlifyのページを、指示に従って進めていくと、githubのレポジトリから簡単にデプロイしてくれる。
ちょー便利。
というわけで、デプロイできたものが以下。
感想
始め方は簡単だし、セットアップも簡単な一方で、組み合わせがたくさんあって「何を使えばいいのか」という点とそもそもバージョンの観点でどれが使えてどれが使えないのかみたいなことを、記述方法を調べるときにまず大前提に置いておかないと、色々調べながら混乱するなぁと思った。