Vue 시작하기 #01 - 개발환경 구성

nothing·2021년 7월 25일
0

Vue.js 튜토리얼

목록 보기
1/1

Node.js

자바스크립트는 인터넷 브라우저(Chrome, FireFox 등)에 내장된 엔진에 의해 실행됩니다. 현재 가장 대중적인 엔진은 Chrome의 V8 엔진이며, 이를 브라우저 없이 윈도우, 맥, 리눅스 등 다양한 환경에서 실행될 수 있도록 만들어준 것이 바로 이 Node.js 입니다.

설치

홈페이지에서 LTS 버전을 다운로드 받으면 됩니다.

일반적으로 최신 버전이 아니라, 신뢰도 있는 LTS 버전을 사용합니다.

다운로드 후 터미널 혹은 명령 프롬프트에서 node -v 명령어를 입력하여
nodeversion이 정상적으로 나온다면 설치 성공!

IDE 설치

VSCode

저는 Vue.js 개발 시 VSCode를 사용합니다. 따라서, 본 포스트에서는 VSCode로 설명하겠습니다.
VSCode는 Visual Studio Code의 약자로, Microsoft 사(社)의 Atom 기반 IDE입니다.
(대학교 1,2학년 이후로 처음 만져보는 MS의 IDE...)

홈페이지에서 다운로드 가능합니다.

확장프로그램 설치

VSCode는 확장프로그램을 설치하지 않는다면 그저 Text Editor에 불과합니다.

필수 확장 프로그램
Vetur : Vue.js 개발 툴
vue : Vue.js 문법 검사 툴
Vue VSCode Snippets : Vue 문법 자동완성 툴

프로젝트 생성

이제 우리는 Node.js도 설치했고, VSCode 및 확장 프로그램 또한 설치하였으니,
Vue.js 프로젝트를 생성할 수 있게 되었습니다.
먼저, 프로젝트를 수행할 디렉토리로 이동하겠습니다.

lee@MacBookPro % cd /Users/lee/Desktop/program/Study/vue-project

이동 후, 이제 명령어를 사용하여 Initialize 해주겠습니다.

lee@MacBookPro % npm init

이후, package.json 파일을 생성할 때 필요한 정보를 입력받도록 합니다.
저희는 모두 default로 설정하고 진행하겠습니다. 이를 위해 모든 물음에 엔터를 입력하면 디렉토리 내에 package.json 파일이 생성되는 것을 볼 수 있습니다.

마무리

이렇게 우리는 Vue.js 프로젝트를 생성 및 초기화하는 것까지 진행하였습니다.
시작이 50%이니 우리의 프로젝트 진행률은 벌써 50%네요.
이제 다음으로는 기본적인 튜토리얼을 진행하겠습니다.

모두들 이곳까지 따라오시느라 고생하셨습니다!🤗

0개의 댓글