コンポーネントの追加
frontend/src/componentsにコンポーネントを追加します。
ファイル名はFrontEnd.vue
注意.ファイル名は先頭大文字の単語を2語以上繋げたファイル名にしないと後でエラーになります
PaizaCloudの場合
frontend/src/componentsを右クリック→新規ファイル追加
ワイヤーフレームのコードを追加
Vuetifyの左側にワイヤーフレームがあるのでクリックします。
サンプルのSystem Barをクリック。右下にGitHubのアイコンがあるのでクリックするとコードが出てきます。そのコードをコピペしてください。
<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'を以下に変更
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という名前を付けて、それを表示しています。