Hello Vue!

Vue-cli는 npm과 yarn을 지원한다. 나는 node를 사용하느라 npm이 익숙하므로 npm을 이용해서 설치!!!

Vue-cli document 참고 : https://cli.vuejs.org/guide/

1. Vue-cli 설치

▶npm install -g @vue/cli (g옵션은 선택사항이나, 해주는 것이 좋지 않을까 생각한다.)

2. Project 생성

▶vue create vue-project

굉장히 시간을 뺏었지만 성공적이다.

Project 생성하면 Y/N 선택하는 질문 하나가 뙇....

대체 이게 뭔지 알아보니, 기본 값으로 Project를 만들지, 사용자 지정으로 만들지에 대한 내용 이었다.

사용자 지정을 선택하면 여러가지 원하는 대로 지원되도록 설정하고 저장하기 때문에 자신이 원하는 Project를 만들 수 있다.

하지만 나는 욕심 부리지 않고 기본 값으로 진행.

사용자 지정으로 설정 할 경우, 다음과 같이 지원 가능하다.

1. 타입스크립트 지원
2. 프로그레시브 웹 앱 (PWA) 지원
3. Vue Router
4. Vuex
5. CSS 프리프로세서 (SCSS/SASS, LESS, Stylus)
6. ESLint 와 Code Formatter
1. 에러를 일으키는 코드만 lint
2. ESLint + Airbnb
3. ESLint + Standard
4. ESLint + Prettier
7. 추가 lint 설정
1. 저장할 때 lint
2. 커밋할 때 lint lint-staged
8. 유닛 테스팅 도구
1. Mocha + Chai
2. Jest
9. 엔드 투 엔드 테스팅 도구
1. Cypress
2. Nightwatch

이 녀석들이 정확하게 어떤 녀석들이고 어떤 역할을 하며, 어떻게 지원되는지 알아볼 필요가 있다.

Project로 들어 가면 대충 구조가 잡혀 있다.

package.json을 한 번 흝어보고 넘어가보자.

scripts에 정의된 녀석들을 보자.

serve : 개발용 버전으로 앱 실행

build : 배포용 버전으로 앱 빌드

lint : 코드 스타일을 lint

# Document에 보면 test라는 녀석도 있는데 이 녀석이 버전 업이 되면서 없어지고 inspect라는 녀석이 새로 들어왔다.

실제로 npx vue-cli-service help를 시도해보면 다음과 같은 message를 준다.

serve     start development server

build     build for production

inspect   inspect internal webpack config

lint      lint and fix source files

3. 앱 실행

▶npx vue-cli-service serve (npm run serve command는 webpack-dev-server를 사용한다고 하니 참고하면 좋을 듯 싶다.)

default port는 8080이다.

"port를 바꾸고 싶다!"라고 한다면 port 옵션을 사용하면 된다.

npx vue-cli-service serve --port {원하는 port}

serve로 실행할 경우 사용할 수 있는 옵션은 다음과 같다.

--open    open browser on server start

--copy    copy url to clipboard on server start

--mode    specify env mode (default: development)

--host    specify host (default: 0.0.0.0)

--port    specify port (default: 8080)

--https   use https (default: false)

4. 확인

Vue.js가 반겨주는 창이 뜬다면 성공적이다!

굳굳~ㅎㅎㅎ