[vue.js] 개발 환경 구축하기

vue.js 개발 환경 구축하기

Vue.Js Frontend 개발을 위한 환경 설정 방법에 대해서 알아 보겠습니다.

 

Visual Studio Code 설치

1. 설치 파일을 다운로드 합니다.
   • https://code.visualstudio.com/docs/?dv=win(opens new window)
2. 다운로드 받은 파일을 더블 클릭하여 설치를 진행합니다.

동의합니다를 선택하여 [다음][다음] 을 클릭하여 설치를 완료합니다

 

Visual Studio Extension 설치

vscode 에서 사용하는 vue.js 관련 유용한 플러그인을 설치합니다.

1. Vetur Extension : Vetur 플러그인은 Linting , Syntax-highlighting , Formatting등을 지원해 줍니다

vue peek Extention : vue콤포넌트를 통해 해당 콤포넌트 파일을 열어서 바로 수정할수 있는 기능을 지원해줍니다.

vue 2 snippets exteion : vue 코드 자동 완성 기능을 지원해줍니다

Chrome Plug-in 설치하기

크롬 플러그인이 설치되어 있으면 Vuex 를 사용시 컴포넌트의 상태변경을 추적할수 있으면 해당 상태 변경을 임의되로 변경하여 테스트 해볼수 있습니다. 아래 url 로 접속 하여 플러그인을 설치 합니다.

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

 

node.js 설치

https://nodejs.org/ko/ (opens new window)사이트에 접속하신후 LTS 안정버전을 다운로드 받아서 설치를 진행합니다. 다음 다음을 클릭하여 default 로 설치합니다.

Node.js

아래 명령어로 버전이 확인되면 정상 설치 완료된 상태 입니다.

node --version
v15.3.0

※ windows 한글깨짐 관련 문제는 아래 url 을 참고하세요.

• https://blog.jiniworld.me/84

vue-cli 를 설치합니다.

npm i -g vue-cli

 

초기 프로젝트를 생성 합니다.

vue init webpack vstart
cd vstart
npm run dev

프로젝트가 정상적으로 생성되면 아래와 같은 그림을 볼수 있습니다.