Vue + Spring Boot + IntelliJ 프로젝트 생성

우선 Node.js 안깔려 있는 사람은 아래 링크가서 다운받아야 한다~

https://nodejs.org/ko/download

다운로드 | Node.js

인텔리제이는 학생이라면 이메일 인증으로 무료 사용 가능하니 찾아봐라~

 

1. 아래 링크에 가서 스프링부트 프로젝트를 생성한다.

https://start.spring.io/

난 아래와 같이 생성 했다

2. 위에서 생성한 프로젝트를 다운받고 압축을 풀어서 인텔리제이에서 Open 한다.

3. DB, 서버 포트 설정

프로젝트명>src>main>resources>application.properties에 아래 코드를 추가 하여 서버 포트는 8081로 그리고 mysql DB를 설정하였다.

유저이름과 비밀번호에는 본인의 mysql 아이디오 비밀번호를 넣으면 된다.

그리고 hibernate를 이용하여 JPA를 생성 할게 될것 같아서 같이 추가 해뒀다.

#서버 포트
server.port=8081

# 데이터베이스 드라이버 설정
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# 데이터 베이스 연결 URL
spring.datasource.url=jdbc:mysql://localhost:3306/your_database

# 데이터베이스 연결 유저 이름 및 비밀번호
spring.datasource.username= 유저이름
spring.datasource.password= 비밀번호

# Hibernate 설정
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect

 

 

4. 상단의 화살표 눌러서 실행 시킨다.

 

프로젝트가 제대로 생성 된다면 http://localhost:8081/에 들어갔을 떄 아래와 같이 화이트라벨이 뜬다

5. 아래 링크에서 파일 다운로드 하고 설치한다.

https://git-scm.com/download/win

Git - Downloading Package

6. File -> Settings -> Tools -> Terminal 에 shell path를 C:\Program Files\Git\bin\sh.exe이 위치로 지정해준다.

(사람마다 파일 위치가 다를 수 있으니 sh.exe의 경로를 찾아서 넣어주자)

하고 나면 터미널이 아래와 같이 바뀌어 있을 것이다.

 

7. 터미널에  npm i -g @vue/cli를 넣어서 vue를 다운로드 한다.

 설치후 vue --version 명령어를 이용하여 제대로 설치 되었는지 확인한다.

8. 터미널에 vue create 원하는 프로젝트 명 --no-git 을 입력한다.

그리고 나서 아래와 같은 선택이 뜨는데 나는 젤 위에 있는걸로 했다.

설치가 끝나고 나면 작성했던 프로젝트 명대로 파일이 생긴것을 볼 수 있다.(나는 vue라고 썼다.)

6.cd vue로 해당 파일로 이동하고

npm run serve를 해준다.

7. 터미널에 나온 로컬 경로로 들어가면 다음과 같은 화면이 뜬다