Vue 시작하기 Hello world

Node.js 설치

Node.js 공식사이트에 접속한다. 접속 후 자신의 운영체제에 맞는 버전을 선택하여 다운로드 후 설치한다. 다 default로 Next를 누르기만 하면 된다. 설치 후 cmd 창을 열어 아래 명령어로 확인한다.

npm -v

node -v

버전 숫자가 나오면 무사히 설치 완료.

vue-cli 설치

vue-cli는 Vue 프로젝트를 개발할 수 있게 해주는 아주 유용한 도구이며, 여기서 CLI란 Command Line Interface의 약자로 타이핑으로 명령어를 입력하여 원하는 바를 실행시키는 도구를 말한다. Windows에서는 cmd, Mac에서는 terminal을 생각하면 된다. vue-cli는 내부적으로 Webpack을 활용한다고 한다(아직 뭔지 모르겠다). vue-cli로 명령을 실행시키면 cli가 자동으로 최적화된 Webpack형태의 결과물을 생성시켜 준다.

vue-cli version

vue-cli 설치에 관한 조사를 하다보면 명령어가 크게 2개로 갈린다.

• npm install -g @vue/cli
• npm install -g vue-cli

이 차이는 vue-cli version에 차이가 있다. @가 있는 버전이 vue-cli 3.xx 버전이고 밑에 없는 버전이 vue-cli 2.xx버전이다.

• vue-cli 3.xx버전을 사용할 것이므로 명령어는 npm install -g @vue/cli을 권장한다.
• vue -version를 통해 설치가 제대로 되었는지 확인한다.
  • vue -v를 쓰면 확인을 안해준다...ㅠ

버전의 차이는 다음과 같다.

프로젝트 생성

• CLI2 : eslint, unit test, night watch 등 낯선것들 선택 필요
• CLI3 : default (babel, eslint) 를 선택하면 가장 기본적인 설정으로 프로젝트가 생성, 나중에 옵션을 추가 가능작성 필요

프로젝트 구성

• CLI2 : simple, webpack, webpack-simple, pwa 등 템플릿 리스트 중 하나를 선택해서 프로젝트 구성
• CLI3 : 프로젝트에 플러그인 기반으로 원하는 설정 추가

Webpack 설정 파일

• CLI2 : webpack.config.js 파일이 최상단 디렉터리에 있다.
• CLI3 : 없음, root 디렉터리에 vue.config.js 파일을 설정하고 내용 추가

ES6 이해도

• CLI2 : 필요 X
• CLI3 : 필요 O

node modules

• CLI2 : 자동설치 안됨. $ npm install 필요
• CLI3 : 자동설치

프로젝트 생성

• cmd 창에서 프로젝트를 만들 폴더로 이동한다.
• vue create vue_hello_world 으로 프로젝트를 생성한다.
• 생성하면 vue please pick a preset이란 말과 함께 vue 2와 vue 3, select features 중 선택하라고 창이 뜬다.
• 원래 Reference에 따르면 Default를 누르라고 하지만, Default가 2개다.
• 알아보니 vue 2에서 vue 3로 이사중이여서 버전이 다르다고 한다.
• 고민하다가 결국 vue 3 Default로 설치했다.
• 또 창이 뜨는데 Use Yarn을 눌러준다.
• 설치 완료 후, vue_hello_world 폴더로 이동한다(cd 명령어).
• yarn serve 명령어를 치면 local 주소가 나오면서 vue의 기본 웹페이지가 생성된다.
• 이번에도 .gitignore 파일이 이미 있다.
  • 똑같이 gitignore.io 사이트에서 Node , Vue, Vuejs로 내용 생성 후 .gitignore 파일에 추가했다.
  • 프로젝트 생성 시 변경내역은 11개였는데 .gitignore 추가해도 11개로 똑같다.

Reference

• Vue Cli 초기 세팅
• Vue 3로 마이그레이션하기 위해 준비해야 할 것