28. vue 생성(spring 연동)

28. vue 생성(spring 연동)

• vue 폴더 생성

1. vue 폴더를 생성할 위치에서 cmd 창 실행

cmd 창 실행

2. 폴더 생성

폴더 생성

버전 3 선택

• 설정

1. 생성한 vue 실행

생성한 vue 실행

2. vue.config.js 생성, spring 연동

 

 

vue.config.js 생성

module.exports= {

    //개발 서버 설정

    devServer: {

        //프록시 설정

        proxy: {

            //127.0.0.1:8080/REST

            '/REST':{

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

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

                changeOrigin: true,

                logLevel: 'debug',

            }

        },

        //vue의 포트 번호

        //127.0.0.1:9090

        port: 9090

    }

};

 

 

• 라우터 설치

* 라우터 : 라우팅(웹 페이지 간 이동방법) 기능을 구현할 수 있게 지원하는  공식 라이브러리

1. cmd 창에서 생성된 폴더로 이동한 뒤 라우터 설치

npm install vue-router@next --save

라우터 설치

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

routes 폴더, index.js 파일 생성

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

import Home from '@/components/Home'

const routes = [

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

]

const router = createRouter({

    history: createWebHistory(),

    routes,

});

export default router;

 

 

3. 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');

4. App.vue 수정

<template>

  <div id="nav">

    <router-link to="/">home</router-link>|

    <hr />

    <router-view />

  </div>

</template>

<script>

</script>

<style>

</style>

• 서버 구동

npm run serve

화면 확인