Vue.js + spring 프로젝트 생성

Spring Boot & Vue.js 연동

Spring Boot & Vue.js 기본 연동 프로젝트
(springvue > images : HELP.md 에 필요한 이미지)

• 구조

  • Front : Vue.js
  • Backend : Spring Boot

• 기본 설치 목록

  • Vue.js
    • Vue-CLI
  • Node.js

• 프로젝트 생성순서

  1. Spring Boot 프로젝트 생성
  2. Vue.js 프로젝트 추가(현재는 vue2 설치)

    <!-- ex) vue create front-vue -->
    vue create 'project name'

  

  3. springvue > vue-frontend > vue.config.js 파일 추가

  module.exports = {
    // npm run build시 파일 생성위치
    outputDir: "../src/main/resources/static",
    // index.html 생성위치
    indexPath: "../static/index.html",
    //  내장된 was주소 (Port번호는 Spring Server.port와 같아야 한다.)
    devServer: {
      proxy: "http://localhost:8080",
    },
    chainWebpack: (config) => {
      const svgRule = config.module.rule("svg");
      svgRule.uses.clear();
      svgRule.use("vue-svg-loader").loader("vue-svg-loader");
    },
  };

  

  4. vue project 이동 후 > npm run build
     
  5. spring server 실행
  6. vue 기본 화면 실행 성공

서버 통신

1. axios (jquery ajax와 비슷하다)vue add axios

화면 꾸미기

1. vuetiy
2. vue add vuetify
3. 필요시 vue template 설치
4. npm i -D vue-svg-loader vue-template-compiler