[Windows] Vue.js 프로젝트를 위해 필요한 파일설치 및 환경 설정하기!

안녕하세요.

 

Vue.js 를 실무에 사용하기 위해 공부 겸 간단히 토이프로젝트를 진행하면서 필요한 부분이나 공부해야할 부분을 정리하려고 카테고리를 구성했습니다.

 

Vue.js 또한 React처럼 SPA 를 개발하는 자바스크립트 프레임워크인데요.

 

SPA에 대한 설명은 해당 게시글을 참고하시길 바랍니다.

 

SPA 게시글 보기

 

 

 

그럼, Vue.js로 개발하기 위해 필요한 것들을 하나씩 설치해봅시다.

 

 

설치 순서

 

  1)  Node.js

  2)  VS Code(Visual Studio Code)

  3)  npm

  4)  Chrome 및 vue.js Devtools(확장 프로그램)

  5)  vue

  6)  vue.cli

  7)  

 

 

 

입니다.

 

 

 

 

Node.js 설치

---

  -  JavaScript 런타임 입니다. 

  -  Veu.js 내장 도구들이 Node.js 기반이기 때문에 설치 필수 입니다. 

  -  또한, 이는 서버 사이드(네트워크 통신)에서 필요합니다.

  -  Node.js 는  Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있습니다.

 

  -  설치 경로 : https://nodejs.org/ko/download/current/

다운로드 | Node.js

 

설치 확인 방법 

C:\Users\user> node --version 
또는 
C:\Users\user> node -v

// cmd 실행 시 ~ % 부분을 제외하고 입력하시면 됩니다.

 

 

VS Code 설치

---

  -  atom, eclipse 등 과 같은 소스 코드 에디터. Vue.js 를 개발하기 위해 사용할 에디터.

 

  -  마이크로소프트에서 만듬(비쥬얼 스튜디오 보다 이쁨)

 

  -  설치 경로 : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

Vue.js Devtools 설치

---

  -  Vue로 만든 웹 앱의 구조를 쉽고 편하게 디버깅할 수 있는 개발 도구.

  -  크롬의 확장 프로그램입니다.

 

 

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

Vue.js devtools

 

 

Vue.js 설치

---

  -  위에 설명했으니 설명은 생략.

 

  -  cmd 열어서 진행(powerShell도 가능할듯?)

 

C:\Users\user> npm install vue  // 명령어 입력
// 작업 로그
npm WARN user No description
npm WARN user No repository field.
npm WARN user No license field.

// 결과
+ vue@2.6.12
updated 1 package and audited 73 packages in 0.719s
found 0 vulnerabilities

 

 

 

Vue-Cli 설치

---

  -  Vue.js 프로젝트의 생성 및 관리를 돕는 Vue의 공식 CLI 입니다.

  -  React.js의 create-react-app 처럼 Vue.js에서도 vue-cli를 통해 프로젝트를 만들고 관리하는 도구인데, Vue 관련 명령어도 포함되어 있습니다.

  -  여기서는 안적었는데, yarn 을 설치해서 진행해도 됩니다.

 

C:\Users\user> npm install -g @vue/cli  // 명령어 입력
또는
C:\Users\user> yarn global add @vue-cli  // 명령어 입력

// ver 2.x : npm install vue-cli -g
// ver 3.x : npm install @vue/cli -g

 

 

 

이제 시작할 수 있습니다!!

 

 

 

 

프로젝트 생성

---

간단합니다.

이미 이전에 Vue-CLI 를 설치했기 때문에, 명령어 하나면 Vue.js 프로젝트 기본 구조에 맞게 하나 만들어주죠.

 

 

npm i -g @vue/cli-init	// cli-init 설치

// 프로젝트 폴더를 만들고자 하는 경로에서
// 공식 템플릿으로 프로젝트 생성
vue init webpack my-project

// github 저장소에서 프로젝트 가져오기
vue init username/repo my-project

 

그 결과는?

 

 

프로젝트를 만드는중..

** UTF-8 이 아닌 cmd라서 글씨가 깨진 것도 있는데, 프로젝트 기본 환경 설정을 묻는 것입니다. default로 진행해도 되며, 입맛에 맞게 설정하시면 됩니다.

 

생성 완료!

 

이제 To get started에 맞게 명령어를 입력해볼까요?

 

 

짜잔! Vue.js 프로젝트를 로컬호스트에서 Run했습니다! 

 

 

이제 하나씩 개발해나갈까요~?

 

 

이상입니다.

 

감사합니다.