Vue.js 기본 개발 환경 설정하고 프로젝트 생성하기

1. Node.js 설치

https://nodejs.org/ko/ 에서 서 최신기능이 아닌 안정적,신뢰도 높은 LTS 버전으로 설치한다.

Node.js와 함께 설치되는 npm을 이용해 Vue.js 와 관련 도구를 설치하고 관리하게 된다.

 

 

2. Vue.js dev tools 설치

Vue.js devtools는 크롬의 확장기능으로 Vue에 적용되어 있는 값들, 컴포넌트들을 개발자도구에서 실시간으로 추적하고, 사용자가 눈으로 확인할 수 있도록 GUI로 출력시켜주는 툴이다.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 에서 설치한다.

 

 

3. 비주얼 스튜디오 코드(vscode) 확장프로그램 설치

비주얼 스튜디오 코드에서 확장기능들을 설치한다. 진한 글씨는 꼭 설치해줄것.

• Vetur : VSCode에서 돌아가는 Vue 개발 툴
• vue : Vue 문법 검사기
• Vue VSCode Snippets : Vue 문법을 미리 알려준다.
• vue-beautify : 코드정렬
• vscode-icons : 파일 탐색기에서 파일별로 아이콘을 띄워준다.
• Prettier : 코드 정렬기
• Live Server : html파일을 localhost에서 예제로 보고 싶을 때

 

4. node / npm 설치 확인

이제 부터는 명령프롬프트를 열어 진행한다.

Node.js를 설치했다면 자동으로 npm이 설치되지만 혹여나 설치가 되지 않았을 경우를 대비하여 명령어를 수행해본다.

node -v 와 npm -v 를 각각 입력하면 됩니다.

 

node -v
npm -v
npm help

 

위의 명령어가 수행되지 않는다면, 다음 명령어를 수행한다.

 

npm install -g npm

 

 

5. Vue CLI 설치

명령 프롬프트에 아래의 명령어를 입력후 엔터.

에러없이 알수없는 긴 영어가 뜨면 성공이다.

 

npm install -g @vue/cli

 

설치가 완료되면 아래의 명령어로 설치된 vue 버전을 확인하여 성공적으로 완료되었는지 확인한다.

 

vue --version

 

 

 

6. 프로젝트 생성

아래는 'sample'이라는 이름을 가진 프로젝트를 생성하는 명령어이다.

프로젝트를 생성하고싶은 경로로 들어가 아래의 명령어를 입력한다.

경로 이동은 cd 또는 cd.. 를 이용한다.

 

 

vue create sample

 

명령어를 입력하면 아래처럼 나오는데 이때 키보드 방향키로 조작하여 두번째 Default (Vue 3) ([Vue 3] babel, eslint) 를 선택하고 엔터

 

 

프로젝트가 성공적으로 생성되면 아래처럼 나온다.

 

 

그리고 해당 폴더경로에 들어가보면 프로젝트 폴더가 생성되어있는것을 확인할 수 있다.

 

 

 

7. vscode에서 프로젝트 열기

프로젝트 폴더를 드래그하여 vscode에서 열어준다.

vscode 터미널을 열어 아래의 명령어를 입력하고 엔터

 

npm run serve

 

 

위의 사진처럼 뜨면 성공이다. 

컨트롤을 누른채로 파란 글씨로 된 주소를 클릭하면 생성된 vue 사이트가 열린다.

 

끄읏