vue.js [ vuetify ] 행과 열의 대응

부주의하게 dev라든지 혼재시켜도 능숙해질 것이라고 생각해 코딩하고 있으면 자꾸자꾸는 빠져 갔으므로, 최소한의 템플릿을 비망록으로서 적는다.
SPA를 만들고 싶었기 때문에 App.vue에서 여러 vu를 호출하여 router-view로 표시한다.

기본 구성

먼저 main.js에서 부르는 vue

App.vue

<template> <!-- vueの決まり -->
  <v-app> <!-- 最初に呼ばれるApp.vueの決まり -->
      <v-content>
        <v-container>
          <v-layout>
              <router-view></router-view>
          </v-layout>
        </v-container>
      </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'App'
};
</script>

router에게 불리는 vue

About.vue

<template>
  <div class="about">
    <v-contaienr>
      <v-layout> <!-- row -->
        <v-flex></v-flex> <!-- column1 -->
          <p></p> <!-- row1 -->
          <p></p> <!-- row2 -->
        <v-flex></v-flex> <!-- column2 -->
      </v-layout>
    </v-contaienr>
  </div>
</template>

행과 열의 대응

About.vue의 화면상을 그리드로 분할해 보았을 때, v-container의 자식 요소인 v-layout이 「행(row)」이 된다. 이하, 계층을 내릴 때마다 교체된다.