Vue.js 개발환경

INTRO

Vue.js 개발환경을 구성해보자

 

설치방법

Step 1. Node.js 설치
Step 2. Npm 을 통한 Vue-Cli 설치
Step 3. 크롬브라우저용 Vue.js devtools Extentions 설치
Step 4. Visual Studio Code 에 vetur Extentions 설치

Step 1. Node.js 설치

Node.js 사이트 에서 Node.js 설치합니다. (2020년3월 기준 LTS 12버전을 설치)

Node 버전을 확인

 

Step 2. Npm 을 통한 Vue-Cli 설치

Node.js 를 설치하면 기본적으로 NPM (Node Package Manager) 가 설치되어 있습니다

Npm 을 이용해서 vue-cli 를 Global 로 설치합니다 

npm install -g @vue/cli

vue 가 설치되어 있는지 확인 합니다

vue --version

 

Step 3. 크롬브라우저용 Vue.js devtools Extentions 설치

크롬 브라우저에서 Vue 를 확인 할 수 있는 Extentions 을 설치합니다

vuejs devtools

크롬 웹 스토어에서 vue.js devtools 를 설치한다

설치 후에는 vue 로 만들어진 사이트에 가면

아이콘이 활성화 됩니다.

F12 크롬 개발자 창에서 vue TAB 을 선택할 수 있게 됩니다

vue 로 만들어진 사이트에서만 vue 탭 메뉴가 생김

 

Step 4. Visual Studio Code 에 vetur Extentions 설치

vue 코드 작성시에 도움이 되는 Visual Studio Code 의 Extentions 을 설치합니다

vetur Extentions 설치하면 여러가지 개발편의를 제공해줍니다