TIL 23 | vuetify

vuetify 페이지 추가하기

Ex) [GirdSam.vue] 페이지를 추가해 보겠습니다.

---

1) vues에 새 파일[GridSam.vue] 추가

---

2) 라우터에 경로 추가하기

[index.js]

• 라우터(index.js)에 경로를 추가해준다.

1) 파일 경로 import 해주기
import GridSam from '../views/GridSam.vue'

  {
    path: '/gridsam',
    name: 'GridSam',
    component: GridSam
  },

---

[App.vue]

아이템 추가하기

<script>
export default {
  data () {
    return {
      drawer: false,
      items: [
        { title: 'Todo', icon: 'mdi-checkbox-marked-circle-plus-outline', to: '/' },
        { title: 'About', icon: 'mdi-help-box', to: '/about' },
        { title: 'Grid', icon: 'mdi-car-wireless', to: '/gridsam' }
      ],
      right: null
    }
  }
}
</script>

---

npm run lint 명령어 사용 없이 lint 사용하는 방법

📂 설치 목록

[.editorconfig]
[.eslintrc.js]

다음 파일은 깃허브에서 코드를 복사하여 만들 수 있다.
google에 eslint-plugin-vuetify 입력 후, 해당 깃 허브 페이지에 들어가서 코드 복사.

---

[.editorconfig.js]

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

---

[.eslintrc.js]

// .eslintrc.js
module.exports = {
 extends: [
   'plugin:vue/recommended',
   'plugin:vuetify/base'
 ]
}

recommended로 바꿔주는 이유 : 기본인 base 보다 가독성이 좋음

---

vuetify App.vue 기본 형식

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            col
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default{

}
</script>
<style>

</style>

---

기본 형식에 따른 기본 레이아웃

<template>
  <v-app>
    <v-app-bar app>헤더</v-app-bar>
    <v-navigation-drawer app></v-navigation-drawer>

    <v-main>
      <v-container fluid>
        컨텐츠 영역
        <v-row>
          <v-col>
            col
          </v-col>
        </v-row>
      </v-container>
    </v-main>
    <v-footer app>푸터입니다</v-footer>
  </v-app>
</template>

<script>
export default{

}
</script>
<style>

</style>

---

레이아웃 실습

<template>
  <v-app>
    <v-app-bar app>
      <v-app-bar-nav-icon />
      헤더
      </v-app-bar>
    <v-navigation-drawer app />

    <v-main>
      <v-container fluid>
        컨텐츠 영역
        <v-card class="pa-3">
          <v-row
          class="orange"
          :style="{height:'200px'}"
          align="center">
            <v-col align-self="start" align="center">
              <v-card class="pa-3" outlined>
                vue
              </v-card>
            </v-col>
            <v-col>
              <v-card class="pa-3" outlined>
                vue
              </v-card>
            </v-col>
            <v-col align-self="end" align="end">
              <v-card class="pa-3" outlined>
                vue
              </v-card>
            </v-col>
          </v-row>

          <v-row
          class="blue"
          :style="{height:'200px'}"
          align="center">
            <v-col align-self="start" align="center">
              <v-card class="pa-3" outlined>
                vue
              </v-card>
            </v-col>
            <v-col>
              <v-card class="pa-3" outlined>
                vue
              </v-card>
            </v-col>
            <v-col align-self="end" align="end">
              <v-card class="pa-3" outlined>
                vue
              </v-card>
            </v-col>
          </v-row>

          <v-row
          class="black"
          :style="{height:'100px'}"
          align="center"
          justify="space-between">
            <v-col cols="auto">
              <v-card class="pa-3" outlined>
                vue
              </v-card>
            </v-col>
            <v-col cols="auto">
              <v-card class="pa-3" outlined>
                vue
              </v-card>
            </v-col>
            <v-col cols="auto">
              <v-card class="pa-3" outlined>
                vue
              </v-card>
            </v-col>
          </v-row>
        </v-card>
      </v-container>
    </v-main>
    <v-footer app>푸터입니다</v-footer>
  </v-app>
</template>

<script>
export default{

}
</script>
<style>

</style>

---

https://chansnotes.github.io/2019/07/27/vuetify-grid-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/