Vue 개발 환경 구성, WebStrom 플러그인 추천

Node.js 설치

https://nodejs.org/ko/download

다운로드 | Node.js

Node.js 공식 페이지에서 운영체제에 맞게 다운로드 받아서 설치한다. npm이 함께 설치된다. 

 

IDE 설치

https://www.jetbrains.com/webstorm/download/#section=windows

JetBrains 공식 페이지에서 WebStrom을 다운로드 받아서 설치한다. VSCode도 많이 사용하나, 나는 JetBrains를 사랑한다. 

 

---

Vue 개발환경 세팅

터미널에 아래와 같은 명령어를 입력한다. 

1. yarn 설치: yarn은 npm과 같이 js 패키지 매니저로 속도나 안정성 측면에서 향상되었다고 한다. 

npm install yarn

 

2. vue 설치 

npm install -g @vue/cli or yarn global add @vue/cli

 

3. vue 프로젝트 생성

vue create {projectName}

 

4. 빌드

yarn build

 

5. 실행

yarn serve

 

WebStrom 추천 플러그인

1. Atom Material Icons: 아이콘들이 화려하게 바뀐다. 

 

2. GitToolBox: git log와 blame을 쉽게 확인할 수 있다. 

 

3. Rainbow Brackets: 함수 구분하기가 쉽다. 

 

4. Nyan ProgressBar: Progress Bar가 귀엽게 바뀐다. 

 

5. Indent Rainbow: 함수 구분하기가 쉽다.