[spring, vuejs] intellij + vue.js 프로젝트 초기설정

1. 프로젝트 생성

 - jar,war, maven,gradle 상관없다. 본인이 쓸걸로 설정

 - Jpa와 mariaDB 사용했다. 이것도 상관없다.

 

 

2.  src/main/resources 아래에 application.properties 파일 안에 db접속정보 입력

spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
spring.datasource.url=jdbc:mysql://<--127.0.0.1:3308/tta-->
spring.datasource.username=<--root-->
spring.datasource.password=<--111111-->
spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect  //jpa아니면 삭제

 

 

 

3. node.js 설치

https://nodejs.org/ko/

 

 

4. vue cli 설치 - 명령프롬프트(cmd)에서 npm i -g @vue/cli 치면 바로 설치된다.

 

 

5. vue파일 생성 - 프로젝트 위치까지 간 후 vue create frontend 입력하면 frontend폴더가 생성된다.

 

 

 

6. vue 파일 빌드 - npm run build   

 

※ npm run serve -- --port 3000  을 한 후 

브라우저에 localhost:3000 접속 하면 빌드하지 않고 프론트서버 사용이 가능하다. 

단, 이때의 포트는 3000번으로 was서버인 8080와 달라서 cors가 발생할 수도 있다. 

 

7. frontend폴더 안에 vue.config.js 파일 생성후 아래와 같이 작성 (빌드결과물인 dist안 파일들을 자동으로 static안에 넣어준다. 직접 넣을꺼라면 안해도됨)

module.exports = {
    outputDir: "../src/main/resources/static",
    chainWebpack: config => {
        const svgRule = config.module.rule("svg");
        svgRule.uses.clear();
        svgRule.use("vue-svg-loader").loader("vue-svg-loader");
    }
};

 

 

8. homeController 작성

public class HomeController {
	
	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
	
	@GetMapping("/")
	public String home() {
		logger.info("========= home controller========");
		
		return "index";
	}
}

 

 

9. templates에 html 파일 , static에 리소스파일

 

10. 서버 실행하면 / 경로에서 기본화면 확인