Springboot 프로젝트에 Vue.js 사용해보기 -1

안녕하세요.😀

이번에 front-end 프레임워크를 기존 Angular.js에서 Vue를 사용함에 따라 Vue를 스프링부트 프젝에 적용해보겠습니다. 

적용하는 과정을 기록합니다.

 

환경 ) 

Intellij + SpringBoot + npm 설치 되어있음

 

---

👆적용 과정

 

1. vue-cli 설치

해당 프로젝트 터미널을 열어줍니다.

npm이 잘 설치되어있는지 확인 (너무 예전버전이라면 새로 설치 권장!)

 

pakage.json 파일 생성

> npm init 

   -> pakage.json 파일을 자동 생성 해줍니다.

 

yes라고 하면 생성 완료!

> npm i -g @vue/cli 

   ** CLI란 ? Command Line Interface의 약자, vue-cli는 기본 vue 개발 환경을 생성해주는 도구입니다. 폴더 구조나 webpack 설정 등을 도와줍니다.

 

 

vue가 잘 설치됐는지 확인

 

 

 

2. vue 프로젝트 설치

> vue create [vue프로젝트 명]

 

 

3. vue.config.js 파일 생성

파일의 위치는 방금 생성했던 vue 프로젝트 바로 밑에 생성해줍니다.

 

module.exports = {  
  outputDir: "../src/main/resources/static",  
  indexPath: "../static/index.html",  
  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");  
  }  
};

 

 

생성이 끝났다면 vue 프로젝트 위치로 가서 새로 build 해줍니다.

이후에 상위 demo 프로젝트를 새로고침 하면 ..

이런식으로 resources 폴더 밑에 폴더들이 생겨남을 볼 수 있습니다.

 

 

 

다음에 계속 ...