[Vue.js] 프로젝트 설정/배포 - vue/cli & vue ui

VUE.JS 목록

 

yarn 설치

$ npm install -g yarn
$ yarn --version

 

vue-cli 설치

## yarn 일 경우
$ yarn global add vue-cli   --> 2.X 버전이 설치됨
$ yarn global add @vue/cli	--> 3.X 버전이 설치됨

## npm 일 경우
$ npm install -g vue-cli   --> 2.X 버전이 설치됨
$ npm install -g @vue/cli  --> 3.X 버전이 설치됨 

$ vue --version
3.12.0

저는 3.12.0 버전을 설치 했습니다.

프로젝트 생성 

$ cd /my/project/path
$ vue create first-project

$ code first-project/

VSCode로 프로젝트를 엽니다.

 

빌드하기 

$ yarn serve

http://localhost:8080으로 접속합니다.

 

 

vue ui

terminal에서 control + C (windows: Ctrl + c)를 눌러서 vue server를 종료합니다.

$ cd ..
$ vue ui

vue 프로젝트 메니저가 실행됩니다.

프로젝트 메뉴에는 진행중인 프로젝트가 없습니다.

 

프로젝트 만들기

만들기 메뉴로 이동합니다.

first-project 폴더가 보입니다.(폴더 입니다. vue project 아닙니다.)

적당한 폴더로 이동해서 새 프로젝트를 만듭니다.

 

패키지 메니저를 yarn으로 선택하고 second-project를 생성합니다.

기본 프리셋을 선택하고 프로젝트 만들기를 누릅니다.

작업목록 > serve > 실행을 누릅니다.

서버가 구동되면 오른쪽 상단에 앱 열기를 누릅니다.

second-project 프로젝트가 실행되었습니다.

 

프로젝트 매지저를 저 상태로 두고 second-project VSCode로 엽니다.

 

배포하기

vue ui > 설정 > Vue cli > 빌드 디렉터리에 dist 폴더가 설정되어 있습니다.

Task > build > 실행을 누릅니다.

second-project/dist 폴더에 빌드된것을 확인 할 수 있습니다.

 

Vue.js devtools

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

크롬 브라우저에서 위 주소에 가서 Vue.js devtools를 설치합니다.

VUE.JS 목록