Dev Record

0. Setting

1. node.js 설치

2. vue 설치

bash

// (cmd 관리자 실행)
> npm install vue

// 설치확인
> npm vue -v

3. vue cli 설치

bash

// (cmd 관리자 실행)
> npm install -g @vue/cli c

// 설치확인
> vue -V

1. Spring Boot Project Initialize

Spring Initializr를 통해 Spring Boot 프로젝트를 생성

•  개발환경
  • Visual Studio Code
  • Java 11
  • Spring Boot 2.7.17

2. Controller

java

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String index() {
        return "index.html";
    }
}

• Vue.js 가 Build 될 때 생성된 index.html을 return 한다.

3. Vue 프로젝트 생성

• src/main/java처럼 src/main/vue 로 폴더 구조를 가져가기 위해
• 관리자 권한으로 실행한 cmd에서 프로젝트의 src\main 로 이동하여 vue.cmd create [프로젝트 명]

bash

src\main> vue.cmd create vue --no-git // src\main에서 폴더와 함께 설치

vue create 사용 시

1. 프로젝트 폴더 구조 생성
2. 필요한 종속성 설치
3. git init 명령어를 사용하여 프로젝트 폴더에 Git Repository를 초기화 하게 되는데,

--no-git 은 git init을 건너뛰게 된다.

이후 Vue 버전 선택 하게되면 아래와 같이 Vue 프로젝트가 생성된다.

Vue.js를 빌드하면 Spring Boot 내 프로젝트로 빌드 파일이 생성되며, Spring Boot 배포 파일들과 함께 웹 서버로 배포하는 방식이다.

4. Config & Build

src\main\vue 에서 Build Directory와 devServer의 proxy를 설정하기 위해 vue.config.js 수정해준다.

javascript

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: '../resources/static', // Build Directory
    devServer: {
        proxy: 'http://localhost:8080' // Spring Boot Server
    }
})

이후 Vue 프로젝트를 cmd에서 Build해준다.

bash

>npm run build

빌드 후 outputDir 경로에 .vue 파일들이 html, css, js 파일로 변환되고, Spring을 실행하여 localhost:8080 로 접속해보면 Vue로 생성된 화면이 출력되는 것을 확인할 수 있다.

App.vue 파일이 메인 페이지에 해당하기 때문에 앞으로는 해당 파일에 코드를 작성해주면 된다.

5. npm run serve

• 스프링 부트 애플리케이션은 별다른 설정이 없으면 8080 포트를 사용하게 된다. 따라서, Vue 개발용 서버는 따로 설정해주지 않으면 자동적으로 8081, 8082, 8083... 포트를 사용하게 된다.
• 매번 npm run build 하여 변경사항을 확인할 수 없기에, React와 같이 Hot Reload 기능을 지원하는

npm run serve로 (8081) 개발하면 된다.

6. Vue Extention Tip

코드 하이라이팅, 오류 검사, 코드 포맷, 디버깅, 자동완성 등을 지원하는 VS Code Extention은 다음과 같다.

• Vetur
• Vue - Official : 
• vue3-snippets-for-vscode

Vetur 설치시 발생하는

vetur can't find ‘tsconfig.json’ or ‘jsconfig.json’ 이나

vetur can't find "package.json' 에러에 대한 해결방법은 해당 포스트 참고