Vue 일지 #21 (20211005) Spring 연동

21. Spring 연동

#10 참조

-폴더 생성

폴더 생성

 

폴더 생성

-설정하기(백엔드 연동)

 *vue.config.js 생성(vue20211005)

vue.config.js 생성

 

 

module.exports= {

    //개발 서버 설정

    devServer: {

        //프록시 설정

        proxy: {

            //127.0.0.1:8080/REST/api

            '/REST/api':{

                //프록시 요청을 보낸 서버의 주소

                target: 'http://localhost:8080',

                changeOrigin: true,

                logLevel: 'debug',

            }

        },

        //vue의 포트 번호

        //127.0.0.1:9090

        port: 9090

    }

};

 

-vue 생성, 라우터 설치

 *vue 생성(join, login)

  vue 생성

 

 *라우터 설치(cmd)

 * npm install vue-router@next --save

 * router : 웹 페이지 간의 이동방법 (https://cchoimin.tistory.com/entry/Vuejs-Vue-%EB%9D%BC%EC%9A%B0%ED%84%B0%EB%9E%80)

라우터 설치

 

 *routes 폴더, index.js 파일 생성

폴더, 파일 생성

 * index.js

import { createWebHistory, createRouter } from "vue-router";

 

import Home from '@/components/Home'

import Join from '@/components/Join'

import Login from '@/components/Login'

 

const routes = [

    {path:'/',  name:'Home', component:Home},

    {path:'/Join',  name:'Join', component:Join},

    {path:'/Login',  name:'Login', component:Login},

]

   

const router = createRouter({

    history: createWebHistory(),

    routes,

});

 

export default router;

 

* main.js 수정

main.js

import { createApp } from 'vue'

import App from './App.vue'

import router from './routes'

 

const app = createApp(App);

app.use(router);

app.mount('#app');

 

*App.vue 수정

<template>

  <div id="nav">

    <router-link to="/">Home</router-link>

    <router-link to="/Join">Join</router-link>

    <router-link to="/Login">Login</router-link>

    <hr />

    <router-view />

  </div>

</template>

 

<script>

</script>

 

<style>

</style>

 

 *서버 구동, 화면 확인

서버 구동

화면 확인