👏project 생성

npm install -g @vue/cli

vue를 설치해준 뒤

npm init @vitejs/app my-app --template vue

명령어를 프로젝트를 생성해주었다.

참고 공식 문서

그 이후 명령어가 윈도우의 경우 터미널에서 Execption이 되는데
https://sojinhwan0207.tistory.com/63
여기서 설정을 따라하면 된다.

🔨vuetify 적용

프로젝트 내부로 이동 후

vue add vuetify

중간에 vue3+vite 조합이 있는데 해당 조합을 선택해주자.

그 후

npm install
npm run dev

를 통해 실행해보자

vuetify로 정상적으로 실행한 화면을 확인할 수 있다.

🔨router 적용

npm install vue-router --save

router를 추가하고

import {createWebHistory, createRouter} from 'vue-router'

//component 추가
import Main from './views/Main.vue'

const routes = [
    {path:'/', component: Main},
];

const router = createRouter({
    history:createWebHistory(),
    routes
});

export default router;

/src/아래에 router.js 파일을 생성해준다.

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import router from './router'	//router 추가

loadFonts()

createApp(App)
  .use(router)	//router 설정
  .use(vuetify)
  .mount('#app')

main.js에 router 설정을 추가해주고

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

App.vue에는 다음과 같이 설정해준다.

그리고 Main.vue와 manager/Main.vue 파일을 생성하면

url에 따라 화면이 이동하듯이 사용되는 것을 확인할 수 있다.