Vue.js + Spring Boot + MySQL+JPA 게시판 만들기(3) - 프론트 생성

이번 포스팅에는 Front Vue 를 생성해보겠습니다.

 

프론트 생성을 위해 터미널을 열어 프로젝트의 루트 폴더(pom.xml이 위치한 폴더)로 이동해주세요.

 

다음 vue 프로젝트 생성을 위해 아래 명령어를 입력해주세요.

vue create front

 

그러면 다음과 같은 창이 나오게되는데 Manually select feature(사용할 기능을 직접 선택)를  선택해주세요. 

그리고 다음과 같은 항목을 선택해주세요.

Babel : ES6를 ES5로 변환해줍니다. (낮은 버전의 브라우저에서 Javascript를 지원할 수 있도록 도와줍니다.)

 

Router : vue 에서 지원하는 라우팅입니다.

              url 분기를 위해 선택해줍니다..

 

Vuex : token 등 전역 정보를 저장하기위해 선택합니다.

 

Linter / Formatter : 코딩 컨벤션을 유지하기 위해 선택합니다.

(저장 시 자동으로 컨벤션을 맞춰줍니다.)

 

 

 

 

 

 

History 모드 사용을 Y로 합니다. 히스토리 모드에 대한 자세한 설명은 링크에서 확인해주세요. https://router.vuejs.org/kr/guide/essentials/history-mode.html#%EC%84%9C%EB%B2%84-%EC%84%A4%EC%A0%95-%EC%98%88%EC%A0%9C

HTML5 히스토리 모드 | Vue Router

 

 

ESLInt + Prettier 선택합니다.

Prettier 를 이용해 코딩 컨벤션을 유지할 것입니다.

 

Lint on save 선택 저장을 하면 자동으로 컨벤션을 유지해줍니다.

 

 

package.json 선택

 

 

후에 이 설정을 저장하겠냐는 문구가 나오는데 저장해도 되고 안해도 됩니다.

 

이를 완료하면 프로젝트가 생성이됩니다.

프로젝트가 정상적으로 생성되면 Get started 명령어를 다음과 같이 입력하라고 나오게 된다.

cd front
npm run serve

 

해당 명령어를 입력하면 아래와 같이 프론트 서버가 실행이됩니다. ( 백엔드가 8080 포트를 사용중이므로 8081 포트로 뜬 모습입니다.)

해당 local url로 접속해보면 아래와 같은 이미지가 나옵니다. 

이로써 프론트 프로젝트 생성이 완료되었습니다.

 

다음 포스팅에는 Intelij 에서 Vue를 더 쉽게 사용하도록 설정해보겠습니다.

 

해당 코드는 아래 링크에서 확인할 수 있습니다.

https://github.com/sungjaeyoon/board

sungjaeyoon/board