0. 프로젝트 생성 및 환경설정

0-1. 프로젝트 생성

• 프로젝트 생성(node_modules가 자동으로 생성)
  CMD> vue create vue_20220412
  default vue3
  

• 프로젝트를 실행하기 위한 폴더 이동

• package.json, package-lock.json파일이 있는 폴더로 이동하기
  CMD> cd vue_20220412

• router 사용
  CMD> npm install vue-router@next --save

• store 사용
  CMD> npm install vuex@next --save

• axios 사용
  CMD> npm install axios --save

• element-plus ui 사용
  CMD> npm install element-plus --save

• 서버구동
  CMD> npm run serve

0-2. 프록시 설정

• vue.config.js
• publicPath로 리소스의 위치를 잡아준다

module.exports = {
    // 개발 서버 설정
    devServer: {
        // 프록시 설정
        proxy: {
            // 프록시 요청을 보낼 api의 시작 부분
            '/ROOT': {
                // 프록시 요청을 보낼 서버의 주소
                target: 'http://localhost:9090',
                changeOrigin: true,
                logLevel: 'debug',
            }
        },       
    },
    // 리소스의 위치
    publicPath : '/ROOT/vue/'
};

0-3. router 생성

• src/routes/index.js

// 파일명 : src/routes/index.js
// src폴더에서 routes 폴더 생성 후 index.js파일 생성 

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

import Home from '@/components/Home.vue'; //메인 컴포넌트 호출
import About from '@/components/About.vue'


const routes = [
    { path:'/', name:"Home", component:Home },
    { path:'/about', name:"About", component:About },
];
  
const router = createRouter({
    history : createWebHashHistory(),
    routes : routes,
});
  
export default router;

0-4. main.js

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// import stores from './stores/index';
import router from '../routes/index';

const app = createApp(App)

app.use(ElementPlus);
// app.use(stores);
app.use(router);
app.mount('#app')

1. 빌드

1-1. boot_20220406/HomeController.java

// 127.0.0.1:9090/ROOT/vue
@GetMapping(value = "/vue")
public String vueGET() {
    // vue에서 빌드한 index.html 파일의 위치
    return "/vue/index";
}

CMD> npm run build
vue_20220412

• index.html은 templates/vue
• 나머지는 resource/vue