Chapter 03

ワイヤーフレームを入れる

sosa
sosa
2022.09.28に更新

コンポーネントの追加

frontend/src/componentsにコンポーネントを追加します。
ファイル名はFrontEnd.vue
注意.ファイル名は先頭大文字の単語を2語以上繋げたファイル名にしないと後でエラーになります
PaizaCloudの場合
frontend/src/componentsを右クリック→新規ファイル追加

ワイヤーフレームのコードを追加

Vuetifyの左側にワイヤーフレームがあるのでクリックします。
サンプルのSystem Barをクリック。右下にGitHubのアイコンがあるのでクリックするとコードが出てきます。そのコードをコピペしてください。

FrontEnd.vue
<template>
  <v-app id="inspire">
    <v-system-bar app>
      <v-spacer></v-spacer>

      <v-icon>mdi-square</v-icon>

      <v-icon>mdi-circle</v-icon>

      <v-icon>mdi-triangle</v-icon>
    </v-system-bar>

    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-navigation-drawer
      v-model="drawer"
      fixed
      temporary
    >
      <!--  -->
    </v-navigation-drawer>

    <v-main class="grey lighten-2">
      <v-container>
        <v-row>
          <template v-for="n in 4">
            <v-col
              :key="n"
              class="mt-2"
              cols="12"
            >
              <strong>Category {{ n }}</strong>
            </v-col>

            <v-col
              v-for="j in 6"
              :key="`${n}${j}`"
              cols="6"
              md="2"
            >
              <v-sheet height="150"></v-sheet>
            </v-col>
          </template>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
  export default {
    data: () => ({ drawer: null }),
  }
</script>

main.js修正

main.jsを修正して追加したコンポーネントを読み込みます。
デフォルトの状態ではmain.jsからApp.vue→HelloWorld.vueのコンポーネントを読み込んでいました。
main.jsから直接FrontEnd.vueを読み込むことでワイヤーフレームコンポーネントを読み込みます。
import App from './App.vue'を以下に変更

fronted/src/main.js
import App from './components/FrontEnd.vue'

動作確認

npm run serve

ワイヤーフレームが表示されます。

main.jsの中のこの1文がポイント!
new Vue({
vuetify, //これによりVuetifyのタグなどが使えるようになる
render: h => h(App) //表示するもの
}).$mount('#app') //表示先

fronted/public/index.htmlが全体の大元です。その中に
<div id="app"></div>があります。ここが表示先になります。
表示するものはmain.jsのimport **App** from './components/FrontEnd.vue'によってAppとなります。
つまりFrontEnd.vueで作られるものにAppという名前を付けて、それを表示しています。