node.js 가 설치되어 있어야 한다. node.js 다운로드 및 설치 https://nodejs.org/ko/ * 화면에 보이는 TLS 버전을 다운받습니다. ------------------------------------------------------------ * 설치 폴더 > C:\Program Files\nodejs\ * 설치 확인 > C:\Users\uuser>npm -v
------------------------------------------------------------ * Node.js를 설치하게 되면 Node Package Manager인 NPM은 자동으로 설치된다. 이를 통해 원하는 패키지를 npm install ~~ 의 형태로 설치할 수 있고, 작성 코드를 빌드하고 서버를 켜는 행위도 npm을 통해 수행할 수 있다.
1. Quasar CLI 설치 npm install -g @quasar/cli
2. Spring Boot 프로젝트 생성
3. Spring Boot 사이트 확인
application.properties 수정 후 실행 기본 port 와 로그인 계정 정보
프로젝트(폴더)명은 소문자로... Quasar에서 대문자 프로젝트명은 사용못한다.
4. Quasar 프로젝트 생성 * quasar create quasar_front * 이클립스에서 미리 Project 폴더(quasar_front) 생성후 진행 * 프로젝트(폴더)명은 소문자로... Quasar에서 대문자 프로젝트명은 사용못한다.
5. Quasar 사이트 확인 5.1. 설정 변경 * quasar.conf.js 에사 port 번호 변경 ( 8080 -> 9091 ) * 8080은 이미 사용중..
5.2. 서버 실행/ 사이트 접속(서버 실행시 자동접속)
6. 파일 설명 * 최초 생성되는 파일들
[node_module] : package.json 에 등록된 의존성 파일들이 다운로드 되는 폴더 package.json 수정시 npm install 명령어로 다운로드 된다. * 개별등록시 : npm install 모듈명 -save > package.json 자동 등록 [public] : 웹 파일 폴더. /favicon.ico처럼 루트로 접근 가능. [src] [asset] : 이미지 등을 저장하는 폴더입니다. webpack이 실행시 처리. [boot] : 부트 파일 폴더. 애플리케이션이 실행되기 전에 패키지나 플러그인 초기화. quasar.conf.js 의 boot 에 선언된 플러그인 초기화 [components] : vue컴포넌트들을 담는 폴더 [css] : 전역 css 폴더 [layout] : 레이아웃 폴더 [pages] : 페이지 폴더 [router] : 라우팅 설정 폴더 [store] : 전역 데이터 저장소
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 프로젝트 생성
-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) 를 선택. ( 키패드 이동)
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 추가