03. IntelliJ - Vue.js 세팅

1. 터미널 변경

 - window os 환경이다 보니 Git bash 설치하여 터미널을 변경해줌.

 - https://gitforwindows.org/

Git for Windows

 

2. Vue.js 및 Vue/Cli 설치

 - vue/cli는 vue 개발환경 설정 도구임. 기본 프로젝트 세팅을 해주어 폴더 구조나 build, webpack 최적화 초기 설정 걱정을 덤.

 - npm 통해 vue.js 설치. (node.js 깔려있어야 함.  https://nodejs.org/ko/)

   npm install vue

 - npm 통해 Vue/Cli 설치

  npm install -g @vue/cli @vue/cli-service-global

 - vue 버전 확인

   vue --version

3. vue 프로젝트 생성

 - 'vue create 프로젝트명' 으로 프로젝트 생성. (나는 vue3로 생성)

 - 설치 후 플젝 폴더 이동 후 npm run serve 명령어로 서버 정상 작동하는지 테스트.

 

4. Spring boot + Vue.js 연동

 - Vue.js Proxy 설정

module.exports = {
  outputDir: "../src/main/resources/static",  // 빌드 타겟 디렉토리
  devServer: {
    proxy: {
      '/api': {
        // '/api' 로 들어오면 포트 80(스프링 서버)로 보낸다
        target: 'http://localhost:80',
        changeOrigin: true // cross origin 허용
      }
    }
  }
};

 - 설정 후 테스트 api 하나 만들어줌

@RestController
@RequestMapping("/api")
public class ApiController {

    @GetMapping(value = "/helloWorld")
    public String helloWorld(){
        return "helloWorld!";
    }
}

 - 서버 양쪽 다 켜주고 8080(Vue)로 접속해서 localhost:8080/api/helloWorld로 접속하면 해당 helloWorld가 리턴됨을 알 수 있음. (연동 완료)

 - 이후에 npm run build를 통해 html, css, js 파일을 Spring boot 쪽으로 넣어주고 스프링부트를 실행하면 됨.

    (양쪽 다 실행시켜두고 테스트해도 됨)

 

5. vue 관련 플러그인 설치

 

js 코드 스타일