vue router, vuetify 설치하기 #13

Vue.js 프로젝트에서 Vue Router와 Vuetify를 설치하는 방법을 정리했다.

 

✅ Vue Router란?

 

Vue Router는 Vue.js에서 페이지 간 이동(라우팅)을 담당하는 공식 라이브러리이다.

SPA 구조에서 URL을 변경하면서도 전체 페이지를 다시 로드하지 않도록 도와준다.

 

📌 Vue Router 공식 사이트

🔗 https://router.vuejs.org/installation.html

Vue Router | The official Router for Vue.js

 

✅ Vuetify란?

 

Vuetify는 Vue.js 기반의 Material Design UI 프레임워크다.

버튼, 카드, 네비게이션 바 등 다양한 UI 컴포넌트를 제공하여 개발 속도를 높여준다.

 

📌 Vuetify 공식 사이트

🔗 https://v15.vuetifyjs.com/ko/getting-started/quick-start

Quick Start — Vuetify.js

 

✅ Vue Router 설치하기

 

📍 1. Vue 프로젝트 폴더로 이동

 

터미널에서 Vue 프로젝트 폴더로 이동한다.

cd pubdweb #프로젝트_폴더명

 

📍 2. Vue Router 설치

 

Vue 2와 Vue 3에 따라 버전이 다르므로, 자신의 Vue 버전에 맞춰 설치한다.

 

📌 Vue 2 사용 시 (Vue Router 3 설치)

• vue2 버전을 설치했기 때문에 vue router 도 3으로 설치한다.

npm install vue-router@3

 

📌 Vue 3 사용 시 (Vue Router 4 설치)

npm install vue-router@4

 

📍 3. 설치 완료 확인

설치가 완료되면 package.json에서 Vue Router 버전을 확인할 수 있다.

 

📌 버전 확인 방법

프로젝트 폴더에서 package.json 파일의 dependencies에서 확인 가능

• vue-router 3.6.5

vue 프로젝트 package.json

✅ Vuetify 설치하기

 

📍 1. Vue 프로젝트 폴더로 이동

#프로젝트 폴더명으로 이동
cd pubdweb

 

📍 2. Vuetify 설치

 

Vuetify는 Vue CLI 플러그인으로 설치된다.

vue add vuetify

 

설치 과정에서 아래 옵션을 선택한다.

✅ “Vuetify 2 - Vue CLI (recommended)”

vuetify install

vuetify 설치완료

📍 3. 설치 완료 확인

 

설치가 완료되면 package.json에서 Vuetify 버전을 확인할 수 있다.

 

📌 버전 확인 방법

프로젝트 폴더에서 package.json 파일의 dependencies에서 확인 가능하다.

• vuetify 2.6.0

vue 프로젝트 package.json

✅ 마무리

 

✅ Vue Router와 Vuetify 설치가 완료되었다! 🎉

이제 Vue.js를 이용하여 UI 화면을 구성하고, 페이지 이동을 구현할 수 있다.

 

🔜 다음 글 예고

Vue Router를 활용한 페이지 이동 및 데이터 전달하는 화면들에 대해 다룬다.