[vue]vue vite 기반 프로젝트 생성 및 초기 설정 (feat. pinia, router, axios)

 

1. vue 초기 설정

npm init vite '프로젝트 명' --template vue

cd 프로젝트 명
npm install 
npm run dev

 

 

2. vue 기본 세팅(pinia, router, acxios )

 npm i vue-router@4 pinia axios

 

3. 라우터 생성

// src/router/index.js

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

import Main from '@/pages/Main.vue'
import Login from '@/pages/Login.vue'

const router = createRouter({
    history: createWebHistory(),
    routes : [
        { path: '/', component: Main },
        { path: '/login', component: Login },
    ]
})

export default router;

 

4. 라우터 등록

// src/main.js

import { createApp } from 'vue';
import {createPinia} from 'pinia';
import './style.css'
import App from './App.vue'
import router from './router'

const pinia = createPinia();
const app = createApp(App);

app.use(router);
app.use(pinia);

app.mount("#app")

5. 컴포넌트 배치

// src/App.vue

<template>
  <router-view></router-view>
</template>