[Vue]SpringBoot + Vue

📌알아두기

자세한 내용없이 일단 순서만 기록

🙆‍♀️ 사용툴

1. STS
2. VSCode
3. node

🎯 설치방법

1. STS에서 Spring Stater Project 생성
2. VSCode에서 생성된 프로젝트 열기
3. 생성된 프로젝트에서 Crtl + ' 으로 터미널열기
4. npm install -g @vue/cli
5. vue create frontend
6. defalut (vue3) 선택
7. cd frontend
8. application.properties 에서 server.port=8081 로 설정
9. vue.config.js 수정

const { defineConfig } = require('@vue/cli-service')
module.exports = {
  // 빌드 타겟 디렉토리
  outputDir: "../src/main/resources/static",
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
}

10. package.json 수정

"build": "vue-cli-service build 를
"build": "vue-cli-service build --Watch 로 수정

🔑 실행방법

vscode에서 npm run serve 로 실행가능
STS에서 Run As - Spring Boot App 으로 실행가능

😅이해한 구조

기존에 사용했던 Spring과 Jsp구조와는 많이 다른듯하다. 기존 구조는 Backend와 Frontend가 합쳐져 있다 생각했다면, Vue(Frontend) + SpringBoot(Backend)로 구분되어 있다.
단순히 데이터가 필요하지않고 화면만 확인한다면 npm run serve 로 확인하고, 만약 데이터를 요청해서 가져올거라면 STS에서 Run As - Spring Boot App 하는 작업이 필요하다.