はじめに

vueアプリを個人で作成してデプロイまでしたのでその備忘録として。
以下の記事に従って、HelloWorldは済ませている。

作成するアプリは、The Movie Database Apiにアクセスして映画を探せるアプリ。

ちなみに作成した全コードは以下。

導入

axiosの導入

APIを叩くためにaxiosを入れないといけない。
色々調べたが、結局以下のコマンドで導入後、特に何かのファイルとかをいじらなくても利用できた。

npm install axios --save

これできちんとpackage.jsonにも追加されたし、ファイルからも読み込めるようになった！

vuexの導入

気に入った映画をお気に入り登録して、お気に入り一覧を表示したいので、vuexを導入してstoreに保存できるようにする。
今回はページ遷移がないのでなくても大丈夫ではあるが、拡張性を考えると絶対にあった方がいいので入れておく。

うまく動かなかったので調べた記事。

どうするのがベストプラクティスかはわからないが、vue3では以下の方法で動くことがわかった。
コード全部はgithubに載ってるので、大事なとこだけメモする。

main.ts

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')

store/index.ts

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したいときにちょっと困った。
やってみれば簡単だった。

main.ts

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のレポジトリから簡単にデプロイしてくれる。
ちょー便利。

というわけで、デプロイできたものが以下。

感想

始め方は簡単だし、セットアップも簡単な一方で、組み合わせがたくさんあって「何を使えばいいのか」という点とそもそもバージョンの観点でどれが使えてどれが使えないのかみたいなことを、記述方法を調べるときにまず大前提に置いておかないと、色々調べながら混乱するなぁと思った。