Backend는 Springboot, Frontend는 vue.js 를 사용하는 프로젝트의 세팅과 빌드 배포까지의 과정을 포스팅하려 한다.
오늘은 첫 번째로 Springboot 설치 및 Vue.js 설치까지 진행하겠다.
- Springboot
- Maven
- Vue-cli


생성뒤 Maven 라이브러리를 모두 불러오고 나서 pom.xml 에 다음과 같이 추가해 준다.
<plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.10.0</version> <configuration> <workingDirectory>frontend</workingDirectory> </configuration> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v14.4.0</nodeVersion> <npmVersion>6.14.5</npmVersion> <nodeDownloadRoot>https://nodejs.org/dist/</nodeDownloadRoot> <npmDownloadRoot>http://registry.npmjs.org/npm/-/</npmDownloadRoot> </configuration> </execution> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>install</arguments> </configuration> </execution> <execution> <id>npm build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run publish</arguments> </configuration> </execution> </executions> </plugin>
이제 vue-cli를 설치할 차례이다. 만약에 node.js가 설치되어 있지 않다면 설치를 하고 오길 바란다.
npm install -g @vue/cli vue create demo #아래 옵션은 입맛에 맞게 고르면 된다. ? Please pick a preset: Manually select features ? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◉ Unit Testing ❯◯ E2E Testing mv demo frontend #demo폴더를 생성하고 frontend폴더로 변경하였다. 이는 프로젝트 이름을 demo라고 짓고, 빌드과정을 frontend 폴더에서 하기위해서 진행하였다. cd frontend npm install npm run serve
이로써 springboot 와 frontend 환경을 설치해 보았다.