1. node.js설치 1.1. node.js 다운로드 > Stable 버전인 'node-v14.17.0-x64.msi' 다운로드하고 기본 설정대로 설치 한다,. https://nodejs.org/ko/ * 14.14.0 LTS 버전. 2021-05-17 Stable 버전 ------------------------------------------------------------ * 설치 폴더 > C:\Program Files\nodejs\ * 설치 확인 > C:\Users\uuser>npm -v 6.14.13 ------------------------------------------------------------ * Node.js를 설치하게 되면 Node Package Manager인 NPM은 자동으로 설치된다. 이를 통해 원하는 패키지를 npm install ~~ 의 형태로 설치할 수 있고, 작성 코드를 빌드하고 서버를 켜는 행위도 npm을 통해 수행할 수 있다.
1.2. vue-cli 설치 npm install -g @vue/cli
2. Eclipse Vue.js 플러그인 설치 Help -> Eclipse Marketplace... 에서 Vue.js :: CodeMix... 설치
3. Eclipse spring boot + vue 프로젝트 설정 3.1. Spring Boot 프로젝트 생성
New > Spring Starter Project
-Spring Boot DevTools :스프링 부트에서 제공하는 개발 편의를 위한 모듈 >변경된 코드를 서버 또는 화면에 신속하게 반영해 결과를 확인하기 위해서 사용 -Lombok : 반복되는 getter, setter, toString 등의 메서드 작성 코드 > 어노테이션을 통해 get,set메서드를 컴파일과정에서 생성 -Oracle Driver : Oracle JDBC Driver -Spring Security :Spring 기반의 애플리케이션의 보안(인증과 권한, 인가 등)을 담당하는 스프링 하위 프레임워크 -Spring Web :웹개발에 필요한 종속된 의존성 디스크립터들의 집합 > starter-web/ starter-webmvc/ spring-boot-starter-tomcat/ tomcat-embed-core/ tomcat-embed-logging-juli
3.2. Vue-CLI 프로젝트 생성 3.2.1. Command창 실행후, '3.1' 에서 생성한 프로젝트 폴더로 이동 3.2.2. vue create vue--no-git > vue create 프로젝트명git미생성 ( vue.js 프로젝트 생성시 옵션이 없으면 자동으로 .git을 생성함) * vue create 명령어가 처음이라면 아래 문구를 맞이한다. Y 입력한다. ( 캡쳐 못함) ? Your connection to the default npm registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n) * Default (Vue 3) ([Vue 3] babel, eslint) 를 선택. ( 키패드 이동)
Default (Vue 3) ([Vue 3] babel, eslint) 를 선택.
3.2.3. Eclipse 에서 vue 프로젝트 생성 확인
4. Eclipse spring boot + vue 프로젝트 실행 4.1. Vue 프로젝트 실행 4.1.1. Command창 실행후, vue 프로젝트 폴더로 이동 D:\br_framework\workspaces\shop-vue-front\vue 4.1.2. babel.config.js 수정 - 파일명수정 : vue.config.js *파일명 수정안하고 npm run build 시 에러 발생
- 코드 수정(vue.config.js)
module.exports = {
//presets: [ '@vue/cli-plugin-babel/preset' ] // default code
outputDir: "../src/main/resources/static",
indexPath: "../static/index.html",
devServer: {
port : 9091 // 접속 포트 변경
, proxy: "http://localhost:9191" // devServer : Back-End , 즉 Spring Boot의 내장 was의 주소를 작성하게 되면 된다.
},
chainWebpack: config => {
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule.use("vue-svg-loader").loader("vue-svg-loader");
}
};
4.1.2. npm install * ../vue/package.json에 설정된 모든 패키지 설치 * package.json 이 변경된 경우에만
WARN 은 일단 PASS.. 4.1.2. npm run build * vue build
4.1.3. build 확인. '4.1.2.(vue.config.js)' 에서 설정한 경로에 파일이 배포되었는지 확인.
5. spring boot , vue 사이트 접속 확인 5.1. vue 사이트 접속 확인 4.1.3. npm run serve * run server
4.1.3. Vue 사이트 접속 확인 http://localhost:9091/
5.2. Spring Boot 사이트 접속 확인 5.2.1. Eclipse > Windows > Show View > Other.. BootDashboard 추가
1. 프로젝트 마우스 오른쪽 클릭 후 , Team > Share Project... 선택.
2. Git 선택후 Next
3. 로컬 저장소 설정 3.1. Use or create repository in parent folder of project 체크 * 선택한 프로젝트 폴더 내에 로컬 저장소 생성 3.2. Create Repository 버튼 선택. 3.3. Project 선택후 Finish
3.4. DataBase 아이콘이 추가되었다.
4. GitHub 설정 이클립스 Window > Show View > Others 선택하고, Git Repositories 선택 , Open
git 프로젝트들이 보인다..
5. Github 사이트에 들어가서 프로젝트가 저장될 Repository 생성 5.1. https://github.com/ 로그인 후 , Repositories New 선택
5.2. Create Repository
5.3. Create Repository repository 를 확인하고, 주소를 복사(붉은 테두리 클릭) 한다.
6. 이클립스에서 GitHub 연결하기 5.1. '4.' 에서 만든 git repo 선택후 Remotes 마우스 오른쪽 클릭. CreateRemote.. 선택
6.2. Remote name : origin , Create
6.3. Change.. 버튼 클릭( '5.3' 에서 복사한 정보가 자동 세팅된다. ), Finish 버튼 클릭
6.4. save & push
7. GitHubCommit & Push 7.1. 프로젝트 > Team > Commit 선택
