제1장 Vue 개발환경 구축

Vue

제 1장 Vuew 개발환경 구축하기

개발환경 구축에 앞서 환경구축에필요한 항목을 나열해보자. 

 

1.Node.js 설치 

2.IDE or Text Edit 설치 

3.Vue CLI 설치

4.Vue project 생성

 

이제 단계별로 하나씩 구축을 진행하보자~

 

1.Node.js 설치

Vue.js를 사용하기 위해서는 Node.js를  필수적으로 필요합니다. 

Node.js를 설치하며 기본적으로 패키지 관리 npm도 같이 설치됩니다. 

다운로드는 아래에 링크를 통해 다운로드 받으면 됩니다. 

최신버전 보다는 안정성, 신뢰도 높은 버전을 다운로드 받으시는걸 추천합니다.

https://nodejs.org/ko/

Node.js

 

node.js 설치가 완료되었다면 터미널을 통해 확인해 보겠습니다.

CMD를 통해 node 버전 및 npm 버전을 확인합니다. 

node -v

npm -v

cmd를 통해 node.js , npm 버전확인

해당 버전을 출력했다면 Node.js 설치가 완료되었습니다.

 

2.IDE or Text Edit 설치

Vue뿐만 아니라 다른 개발을 위해서도 IDE or Text Edit는 설치가 필요합니다. 

프론트엔드 개발자가 주로 사용하는 VSCODE를 설치하겠습니다.

아래의 링크를 통해 다운로드 받으시면 됩니다. 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

설치 완료 후 vscode를 실행합니다. 

아래의 모습이 vscode를 샐행한 모습입니다. 

vscode base 

그럼 우선 기본적인 셋팅은 완료되었습니다. 

그럼이제 Vue를 CLI 설치와 Vue 프로젝트를 만들어 보겠습니다. 

 

저는 우선 프로젝트를 만들 디렉토리를 하나 만들어 주었습니다. 

C:\study\vue 해당 디렉토리를 만들고 여기에 VUE프로젝트를 만들 예정입니다. 

 

3. Vue CLI 설치 

cmd 창을 열어 npm를 통해 vue CLI를 설치해 보겠습니다.

npm  또는 yarn으로 설치할 수있습니다.

현재 yarn를 설치하지 않은 상태로 진행함으로 npm를 통해 설치해 줍니다. 

npm install -g @vue/cli
# OR
yarn global add @vue/cli

npm을 통해 vue-cli 글로벌로 설치

설치가 완료되었다면 Vue CLI를 통해 Vue 버전을 확인해 보겠습니다.

아래의 명령어를 CMD에 입력하시면 vue-cli 버전을 확인할 수 있습니다.

vue -V

vue-cli 버전확인

버전확인을 하셨다면 Vue CLI 설치가 완료되었습니다.

 

4. Vue Project 생성 

이제 마지막으로 Vue 프로젝트를 생성해보겠습니다. 

Vue 프로젝트를 생성 및 프로젝트 실행을 정상적으로 하였다면 Vue 기본적인 개발환경 구축은 완료됩니다. 

 - CLI 명령어를 통해  Vue 프로젝트 생성 

CMD에 Vue CLI 명령어를 통해 만들어 보겠습니다. 

vue create <Project Name>

vue create project-app

vue cli 명령어를 통해 project-app이라는 프로젝틑 생성 시도합니다. 

우선 기본적은 셋팅을 하기 위함으로 Default로 프로젝트 생성합니다.

현재 Vue 2, Vue 3 버전이 출시된 상태이며 저는 Vue 2 버전에 프로젝트를 생성하겠습니다.

 

vue를 프로젝틋 생성화면 

Default ([Vue 2], babel, eslint) 기본옵션을 선택합니다.

선택을 하면 프로젝트 생성을 진행합니다. 

vue를 통해 프로젝트 생성 완료

마지막에 

cd projrct-app, cd run serve 명령을 통해 프로젝트를 실핼하겠습니다. 

아래 명령어는 prject-app 디렉토리 이동하는 명령어 입니다. 

cd project-app

npm run serve는 현재 프로젝트를 vue-cli-serve를 통해 프로젝트를 구동하겠다는 명령어입니다. 

npm run serve

vue 디렉토리 이동 후 vue 프로젝트 구동하기 명령어

명령어를 실행하면 아래와 같이 성공하였고 로컬서버에서 돌아가고 있다고 알려줍니다. 

기본 http://localhost:8080포트 구동되지만 저는 다른 프로젝트가 8080포트롤 구동되어 있어 

8081포트로 vue프로젝트가 실행되었습니다. 

vue 프로젝트 구동 성공

그럼 이제 해당 URL를 크롬 브라우저를 통해 이동해보겠습니다. 

http://localhost:8080포트로 이동하면 아래와 같은 화면이 나옵니다. 

해당 화면이 나온다면 Vue프로젝트를 정상적으로 구동하셨습니다. 

웹브라우저 구동된 vue 프로젝트 확인

여기까지 Vue 개발환경 구축이였습니다.