Vue.use
react랑 비슷하게 vue는 npm i 로 다른 사용자들이 만들어둔 모듈을 받아 사용할 수 있다. 그걸 사용하는 방식이 .use()이다.
index.html로 들어가고
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.png">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.ts"></script>
</body>
</html>main.ts
뭐 html은 다 일겠지만 app 위치에 main.ts가 들어간다.
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; //앞선 1번의 라우터
const app = createApp(App);
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
app
.use(vuetify)
.use(router)
.mount("#app");vuetify만 넣었다.
'#app' 그러니까 <div id="app"> 저 위치에 마운트 된 App.vue가 들어간다.
App.vue가
<script setup lang="ts">
import { RouterView } from "vue-router";
</script>
<template>
<RouterView />
</template>
이렇게 기초 구조가 잡힌다.
이제 RouterView에 앞선 router/index.ts 의 route에 따라 경로가 잡힐것이다.
원인을 파악하자