다른거 할줄모르고 그냥 남자답게 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
그리고 뷰티파이를 설치하고나면 우렁각시가 내가 쓰지도 않은 코드를 지맘대로 다 뜯어고쳐놓는다.
<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에 내가 귀찮을까봐 적어주셨다.
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에 대해 알아보도록 하자.