이번 프로젝트는 vue3를 사용하기 위해서 어쩔수 없이 제가 좋아하는 vuetify titan을 사용해야 했습니다.
이번 포스팅의 대표이미지를 보시면 제가 로컬에서 띄운 화면을 캡쳐한 것입니다.
어떤 프로젝트라도 처음 셋팅하고 만드는 것이 어렵네요.
vuetify titan 버전은 vue/cli 5.0 으로 생성을 해야만 정상적으로 생성이 되네요.
이전 포스팅에서 제가 vue/cli update 하는 방법은 알려드렸습니다.
https://islet4you.tistory.com/entry/VUEJS-Vue-CLI-최신-버전으로-업데이트-하기
그럼 프로젝트 생성 방법을 한번 살펴 보겠습니다.
vue/cli 5.0이라는 조건으로 셋팅한 것입니다.
1. vue project 생성
vue create my-app
2. vuetify 추가
cd my-app 로 이동하시구요.
아래와 같이 실행을 해주세요.
vue add vuetify
3. Vuetify 3 Preview(Vuetify 3)를 선택해주세요.
4. 실행
npm run serve
제가 보고 싶었던 화면이 짠하고 나온답니다.
vue3를 진행하면서 이전 포스팅에서는 안 해봤던 것이나 새로운 것을 또 알아가야할 일만 남은것 같습니다.
포스팅이 도움이 되셨다면 공감부탁드립니다.
[VueJS] URL 에 # (hashbang) 제거하기 (0) | 2022.04.01 |
---|---|
[VUEJS]VeeValidate 4.0 추가 방법 (0) | 2022.03.08 |
[VUEJS] Vue CLI 최신 버전으로 업데이트 하기 (0) | 2022.03.08 |
[VUEJS] Vue CLI 버전 확인(How can I check Vue CLI version?) (0) | 2022.03.08 |
vue 화면 출력하는 라이브럴리 (0) | 2022.02.10 |