[Springboot-Vue] 프로젝트 세팅하기

Backend는 Springboot, Frontend는 vue.js 를 사용하는 프로젝트의 세팅과 빌드 배포까지의 과정을 포스팅하려 한다.

오늘은 첫 번째로 Springboot 설치 및 Vue.js 설치까지 진행하겠다.

  • Springboot
  • Maven
  • Vue-cli
New Project > Spring Initializr 를 선택한다.
필요한 설정을 선택하여 프로젝트를 생성한다.

생성뒤 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 환경을 설치해 보았다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다