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

Vuetify는 현재 vue 3 버전에서 동작하지 않아 부득이하게 vue 2 버전으로 시작해야함.

"The current version of Vuetify does not support Vue 3. Support for Vue 3 will come with the release of Vuetify v3. When creating a new project, please ensure you selected Vue 2 from the Vue CLI prompts, or that you are installing to an existing Vue 2 project."

Vue 3 기반으로 Vue를 배운터라 시작부터 어려움이 많았기에 다시 정리해서 적어본다.
Vue만 있으면 뭐든 다 할 수 있을 줄 알았는데, 역시 디자인의 영역은 배운 사람들이나 하는 것이라는 것을 CSS 만져보면서 느꼈다.

뭔짓을 해도 이쁘지가 않아 시밤.. transition으로 애니메이션도 줘보고 클래스 바인딩도 해보고 별 짓 다해봤는데, 누가봐도 아마추어가 만든 웹 같았다. 그래서 테일윈드 CSS나 이것저것 들쑤시다가 그냥 뷰랑 쀼인 뷰티파이를 선택했다. 뭐든지 궁합이 중요하니까.

1. 프로젝트 생성.

Vue-cli를 통해 간편하게 프로젝트를 만들고자 한다.

터미널에서

vue create 프로젝트명

그러면 선택지가 주어질 텐데 위에서 언급했듯이 3에서는 뷰티파이를 정상적으로 쓰기 어렵다. 그렇기 때문에 2 버전을 선택함. vue 2 바벨 뭐 어쩌구 써있을거임.

생성된 프로젝트를 VC에서 open folder 후,

npm run serve

이렇게 하면 생성된 프로젝트가 로컬포트에서 열린다.

2. Vue-router 설치

방법은 여러가지가 있는데 그냥 내가 해본것은 두가지정도

2-1 직접 다운로드 / CDN
https://unpkg.com/vue-router/dist/vue-router.js

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

위와 같이 import 시키는 방법.

2-2 npm install
터미널에서 다음과 같이 입력한다.

npm install vue-router

npm으로 라우터모듈 설치가 끝나면 package.json에

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.5.2"
  },

위와같이 적혀있다. 그럼 라우터 설치 잘된거 ㅇㅇ

그 후 router.js(이름은 맘대로 지어도됨 import만 제대로 시켜주면 된다.) 파일을 생성하여 다음과 같은 내용을 삽입한다.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

번역 >

"Vue에서 VueRouter 갖다 쓸거임"

이렇게 하면 일단 내가 시작할 프로젝트를 라우터를 갖다 써서 만들 수 있다.
아직 vuetify는 시작도 안함 ..

*해당 내용중 Vue cli, Vue-Router, Vuetify 설치방법은 대체로 공식문서를 보면 자세히 나와있다.