[Window] vue.js+Springboot 프로젝트 vscode에 import(feet. git, gitlab)

사전 준비

1. vscode 설치

2. node.js 설치 : https://leewoogi.tistory.com/152

3. git 설치

 

 

■ vue.js 설치

1. install

- CMD 창에서 실행( 명령어 실행 위치 상관 없음 )

> npm install -g @vue/cli

 

 

 

2. 설치 확인

> vue --version

 

 

 

■ git local repository 초기화

 

1. 프로젝트 폴더 생성

C:\development\workspace_vscode\'프로젝트폴더'

 

 

2. vscode 실행 > Teminal(git bash) 실행

 

1) 생성한 프로젝트 폴더까지 이동 후 git local repository 초기화 명령어 실행

$ git init

 

2) gitlab repository 등록

$ git remote add origin http://gitlab.crizen.com/csr/cz-csr-system.git

 

2-1) 등록 확인

$ git remote -v

 

3) 프로젝트 pull

- git pull  <원격지 URL>  <브랜치>

$ git pull http://gitlab.crizen.com/csr/cz-csr-system.git develop

 

 

3. 프로젝트 폴더 오픈

- 왼쪽 메뉴 Explorer( Ctrl + Shift + E ) > Open Folder > 프로젝트 폴더 클릭.

 

 

 

4. 소스 컨트롤 오픈

- 왼쪽 메뉴 Source Control( Ctrl + Shift + G ) > 우측 상단 ... > Views > Source Control Repositories

 

 

 

 

 

■ Quasar 설치

 

1. yarn 설치

- cmd 창 오픈 

> npm install -g yarn

 

가. yarn 버전 확인

> yarn -v

 

 

 

 

2.  vscode > Teminal(git bash) > yarn 실행

$ yarn

 

 

 

3. quasar 설치

$ yarn global add @quasar/cli

 

 

 

4. quasar 실행

$ yarn quasar dev

 

 

 

■ spring boot 실행 전 환경설정

 

1. Extension 설치

 

1) Extension Pack for Java 설치

- extensions ( Ctrl + Shift + X) > Extension pack for java 검색 > install

 

 

 

- extensions  ( Ctrl + Shift + X) > 'Spring Boot Extension Pack' 검색 > install

 

 

- Reveal in Spring Boot Dashboard (스프링 부트 대시보드에 표시) 클릭.

 

- spring boot 아이콘 생성 되고, 프로젝트 연동 됩니다.

 

 

 

 

2. vue file syntax highlighting

- vue file 오픈 시 하이라이트 없이 하얀색으로 보이는 경우

 

1) File > Preferences > Settings

 

 

 

2) search settings 에 'Files Association' 입력 후 검색 > Add Item 클릭

 

 

 

3) Key, Value 입력 > OK

- key :  *.vue

- value : html