Vue+Vuetify+Vue-Router 시작하기 - 3

권지훈·2021년 8월 6일
0

vuetify 설치

다른거 할줄모르고 그냥 남자답게 vue-cli로 설치할거임.

vue add vuetify

끝.

(위에서 나온 preview로 설치했다가 vite.js가 뭔지 몰라서 한참 헤맴 디폴트로 빠르게 넘어가자.)

설치가 완료되면 해당 메세지가 뜬다.

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

그리고 뷰티파이를 설치하고나면 우렁각시가 내가 쓰지도 않은 코드를 지맘대로 다 뜯어고쳐놓는다.

App.vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

vue 3 버전으로 설치하면 자동으로 양식 변경이 안이루어져서 그런지는 모르겠는데, 계속 충돌 나서 사용 할 수 없다. 혹시나 다른분들은 나처럼 무턱대로 뷰티파이 무작정 설치하지말고 꼭 공식문서를 읽어야함.. 여러분의 시간은 소중해..

router 설정 잡을때는 일일히 귀찮게 내손으로 직접 맹가야 했는데, 그녀는 역시 섬세하게도 main.js에 내가 귀찮을까봐 적어주셨다.

main.js

import Vue from 'vue'
import router from './router'
import App from './App.vue'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

사실 여기까지 하면 뷰티파이가 다 끝난건줄알았는데, 짐코딩님 하시는거 보니까 뭔가 유용한팁이 더 많이있어서 기본편을 계속 봤는데, 블로그 작성하는게 영상 탐독 2회차로.. 멍청해서 다시 복기하는 중이다.

다음은 나를 괴롭힌 ESlint에 대해 알아보도록 하자.

profile
잉여

0개의 댓글