見出し画像

Webアプリケーションを公開するまでのつぶやき 1

くろねこ

プロローグはこちら。

プロジェクト作成

せっかくなのでTypeScriptで書きたいと思っています。
それと話題のTailwindCssも使いたい。
と欲がむくむく湧いてきて↑の記事を参考にやりたいこと全部詰めのプロジェクトを作成しました。
axiosは使う段階になったら入れようと思うのでまだ入れてないです。
エディタはVSCodeを使います。
これで開発環境はだいたい整った感じですね。

さっそくつまづく

ここで最初のつまづき。
App.vueにコンポーネントを書く。

<script setup lang="ts">
import BottomTabScreen from './components/BottomTabScreen.vue';
import CommonHeaderVue from './components/CommonHeader.vue';
import BottomTabViewVue from './components/BottomTabView.vue';
</script>

<template>
  <Suspense>
    <template #default>
      <div>
        <BottomTabScreen/>
      </div>
    </template>
    <template #fallback>
      <div>
        <p class="text-green">Loading中です。。。</p>
      </div>
    </template>
  </Suspense>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

こんな感じ。
BottomTabScreenにさらにコンポーネントを追加するとそこが表示されない。
孫はどうやって表示させたらいいのかしら？
わからん。
なのでとりあえずこうやって誤魔化した。

<script setup lang="ts">
import BottomTabScreen from './components/BottomTabScreen.vue';
import CommonHeaderVue from './components/CommonHeader.vue';
import BottomTabViewVue from './components/BottomTabView.vue';
</script>

<template>
  <Suspense>
    <template #default>
      <div>
        <CommonHeaderVue/>
        <BottomTabScreen/>
        <BottomTabViewVue/>
      </div>
    </template>
    <template #fallback>
      <div>
        <p class="text-green">Loading中です。。。</p>
      </div>
    </template>
  </Suspense>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

これでヘッダー、フッター、真ん中に表示させるコンテンツという感じで分けることができた。
表示もできてる。
でもこれは根本的な解決策ではない気がする。

ドキュメントを読むしかないよね

そんな訳でドキュメントをせっせと読んでいるところです。

やっぱり基本は抑えておかないとね。

ローディング

上のコードにはしれっとローディング中に表示されるViewが入っているのですが、それはこちらの記事を参考に入れてみました。

ローディング中のView、今はテキストのみですが、もちょっとリッチにしたいなと思っています。
それは追々。

エラーハンドリング

ドキュメント読んでてこれ入れといた方がよさそうだなと思いました。

appって何よって感じですよね。

[main.ts]

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

const app = createApp(App)
app.config.errorHandler = (err) => {
  
}
app.mount('#app')

多分こう。
エラー時の実装は追々。
アラート出すとかできるのかしら？？

コンポーネント

上のと同じセクションにコンポーネントについての記載がありますね。

app.component('TodoDeleteButton', TodoDeleteButton)

このメソッドは、TodoDeleteButton をこのアプリケーション内でならどこでも使用できるようにしてくれます。コンポーネントや他のアセットの登録のやり方についてはこのガイドの後のセクションで説明します。アプリケーションのインスタンス API の全リストについては、API reference で確認することができます。

https://ja.vuejs.org/guide/essentials/application.html#app-configurations

ということなので、私の知りたいことは追々出てきそうなので順にドキュメントを読んでいくとそのうち辿り着けそうですね。

今回は一旦ここまで。

いいなと思ったら応援しよう！