환경설정

node는 여러 경로를 통해서 다운받을 수 있기때문에 버전 충돌이 발생할 수 있다. 한 경로를 통해서 설치하는 것이 좋은데 nvm은 Node Version Manager의 약자로 node.js의 버전 관리를 도와주는 bash script이다.

nvm 설치

nvm-sh/nvm 에서 설치 방법을 확인할 수 있다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

$ vim ~/.zshrc

~/.zshrc 혹은 ~/.bash_profile 등등의 파일을 열어서 확인해보면 아래와 같이 추가된 것을 확인할 수 있다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

터미널을 종료하고 다시 실행하거나 source ~/.zshrc 를 해주면 된다.

$ nvm --version
0.34.0

Node 설치

$ nvm install node
$ node -v
v12.11.0
$ npm -v
6.11.3

Vue 설치

$ npm install vue

Vue-CLI

vue-cli에서 CLI는 Command Line Interface의 약자로 윈도우에서는 command, 맥에서는 터미널 창에서 명령어를 통해 원하는 바를 실행시키는 도구를 말한다. vue-cli는 내부적으로 Webpack을 활용하며, 명령어를 실행시키면 CLI가 자동으로 최적화된 Webpack 형태의 결과물을 생성시켜준다.

• 새로운 vue 프로젝트 생성 : scaffolding(기본골격)을 선택하여 vue 프로젝트를 빠르게 생성할 수 있다.

• Vue 플러그인 설치/삭제 : 다양한 vue플러그인들을 추가하거나 삭제할 수 있다.

• vue.config.js 설정 : 웹팩의 구성에 대해 오버라이딩하여 추가 설정할 수 있다.

• vue GUI 도구 사용 : cli가 낯선 개발자를 위해 GUI형태로도 제공해준다.

설치하기

$ npm install -g @vue/cli

개발자 도구 설치하기

Vue.js devtools 크롬 확장 프로그램을 설치해준다. vue로 개발할 때 도움을 주는 유용한 도구로, 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있다.

• 확장 프로그램 설치가 완료되면 vue.js devtools에서 파일 url에 대한 엑세스 허용에 체크해준다.

참고링크

• mac에서 node.js를 완전히 삭제하는 방법

• macOS setup for Vue

• node.js 버전 충돌 문제 해결

• Vue-CLI 도구 활용방법