메리

Spring Boot 환경에서 vue 설치하여 사용하기

IDE : intellij

1. Spring 프로젝트를 만들자

2. VUE CLI를 설치하자

3. vue 프로젝트를 만들자

터미널에서 입력한다. > vue create '프로젝트이름'

옵션들을 선택하게 된다.

프리셋 선택

Default 설치는 Router가 없다

Manually 설치는 Router를 설치할 수 있다.

Manually 설치를 선택하면 기능을 선택할 수 있다. 

방향키로 움직이고 스페이스로 선택. Router를 넣었당

버전선택

모드 선택

Vue는 기본적으로 Hash 모드이며, History 모드로 사용할 것인지 선택하게 된다.

Hash 모드는 url 뒤에 #이 붙는다. History모드는 url뒤에 #이 붙지 않는다. 

아직은 잘 모르니 n으로 가자..

Hash Mode와 History Mode 설명

나머지 항목들도 잘 모르니 일단은 기본으로 선택했다.

완료되면 디렉토리가 생긴당.

4. 뷰 프로젝트 설정

뷰 디렉토리 밑에 vue.config.js 파일을 생성한다.

파일 내용

module.exports = {
  //outputDir : npm run build로 빌드 시에 파일이 생성되는 위치
  outputDir: "../src/main/resources/static",
  //indexPath : index.html 파일이 생성될 위치
  indexPath: "../static/index.html",
  //SpringBoot 서버 접속 주소
  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");
  }
};

5. 빌드

터미널에서 vue 프로젝트 디렉토리로 이동한 뒤에

> npm run build 입력

완료되니 resources 밑에 index.html과 소스들이 생겼다.

안생겼으면 껐다가 다시 열기 

6. 실행

spring 을 실행하고 

터미널에서 >npm run serve 를 입력하고 나면 완료된다.