처음 프로젝트를 만들고 App bar 부터 만들기 시작했다.
그런데 시작부터 문제가 생겼다 😑
v-app-bar
를 쓰고 나서 v-toolbar-title
에 uppercase를 적용하기 위해 class="text-uppercase"
를 사용했지만 전혀 먹히지 않았다. 그래서 이거 왜이래 !! 하고 다른 style도 적용해보았지만 어떠한 변화도 없음 😠 css를 따로 만들어 color 라든지 size 라든지 정의해놓고 class에 적용해보았지만 안된다 ㅠㅠㅠㅠ
이전 프로젝트에서는 잘만 되던게 왜 안되냐 하고 이전 코드와 비교해보았는데 제일 상위 vue인 App.vue
에서 <v-app>
tag를 사용하지 않았던 것 🙄 vue 개발을 시작한지 한달이나 지났는데 기본적인 tag 조차 익히지 않고 그저 개발에만 눈이 멀었던 거 같다.. 😵
이번 일을 계기로 정말 처음부터 차근 차근 단계를 밟아나가야 겠다고 느꼈다.
전체 코드
App.vue
<template>
<v-app>
<app-bar />
</v-app>
</template>
<script>
import AppBar from "../src/components/AppBar.vue";
export default {
name: "App",
components: {
AppBar,
},
};
</script>
AppBar.vue
<template>
<div>
<v-app-bar flat>
<v-toolbar-title class="text-uppercase font-weight-bold"
>AppBar</v-toolbar-title
>
</v-app-bar>
</div>
</template>