Vue 새 프로젝트 구성하기

1. Visual Studio Code 설치

가장 먼저 작업할 코드 편집 툴이 필요합니다. 따로 사용하시는 코드 편집 툴이 없다면 Visual Studio Code(이하 VS Code)를 사용하겠습니다.

다운로드 사이트 링크 주소: https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

위 사이트에 접속하시면 화면 중앙에 바로 Download for Windows 버튼이 보입니다. 다운로드한 파일을 실행하여 설치합니다. 설치 시 유의할 점이 없기 때문에 여기서는 바로 다음으로 넘어가겠습니다(VS Code에서 추가로 세팅할 내용은 나중에 설명하겠습니다).

 

 

2. Node.js 설치

Node.js는 서버사이드 자바스크립트이며 Google Chrome V8JavaScript 엔진으로 빌드된 네트워크 앱 개발에 사용되는 소프트웨어입니다. 이벤트 기반으로 개발이 가능하며 Non-Bloking I/O를 지원하기 때문에 비동기식 프로그래밍이 가능합니다. 또한 Node Packged Manage(이하 NPM)를 통하여 기존에 공개된 라이브러리(Package = Module = Library 모두 유사한 개념) 자유롭게 사용하여 프런트엔드나 백엔드 개발에 활용할 수 있습니다. 

Node.js나 NPM이나 아직 정확히 이해하지 못하였어도 진행하면서 천천히 어떤 느낌인지 느끼시면 됩니다.

다운로드 사이트 링크 주소: https://nodejs.org/ko/

Node.js

마찬가지로 위 사이트에 접속하신 후 화면 중앙에 있는 16.14.0 LTS 안정적, 신뢰도 높음 버튼을 클릭하여 다운로드하여 설치합니다.

 

 

3. 작업 폴더 만들기

이제 앞으로 저희가 작업할 폴더를 만들어야 합니다. 저는 D드라이브에 dev 폴더 안에 New 폴더를 만들었습니다.

>> D:\dev\New

이 작업 폴더가 바로 프로젝트 폴더가 되는 것은 아니고 이후에 Vue 프로젝트를 만들면 새로운 폴더가 여기에 생성될 것입니다.

 

4. Vue CLI 설치

Vue CLI는 Vue 프로젝트를 쉽고 빠르게 빌드할 수 있도록 도와주는 노드 패키지입니다. 설치한 VS Code를 실행하고 좌측 상단의 "파일" 메뉴에서 "폴더 열기" 버튼을 클릭하여 작업할 폴더를 찾은 후 폴더 선택을 누릅니다. 저의 경우 앞에서 만들었던, 

>> D:\dev\New

경로를 선택하였습니다.

 

프로젝트를 연 후 단축키로 터미널을 엽니다(ctrl + `(1번 키보드 옆에 위치).

터미널에 다음과 같은 명령어를 입력합니다.

npm install -g @vue/cli

Vue CLI를 전역으로 설치한다는 내용입니다.

 

 

5. Vue 프로젝트 생성

이제 프로젝트를 생성할 준비가 모두 완료되었습니다.

다시 터미널에 다음과 같은 명령어를 입력합니다.

vue create '프로젝트명'

프로젝트명은 원하는 대로 입력해도 되지만 소문자만 입력해야 합니다.

저의 경우 프로젝트명을 'webproject'로 했습니다.

명령어를 입력하면 설치 옵션 선택이 나옵니다.

엔터 버튼을 눌러 넘어갑니다. (Default (Vue 3) [Vue 3] babel, eslint) 

설치 중 메시지가 나오며, 약 1분 정도의 시간을 기다리면 프로젝트 생성이 완료됩니다.

>> D:\dev\New\webproject

 

6. 프로젝트 실행

실행 중이던 VS Code를 닫은 후 다시 실행합니다.

이번에는 폴더 열기를 눌러 새롭게 생성된 프로젝트 폴더를 선택합니다. New 폴더에서 진행할 경우 경로 오류가 발생합니다.

>> D:\dev\New\webproject

 

프로젝트를 연 후 단축키로 터미널을 엽니다(ctrl + `(1번 키보드 옆에 위치).

터미널에 다음과 같은 명령어를 입력합니다.

npm run serve

서버가 정상적으로 실행된 경우 터미널에 아래 메시지가 출력됩니다. 인터넷에 http://localhost:8080/ 를 입력하거나 메시지의 주소 부분을 ctrl 클릭할 경우 작업 페이지로 이동할 수 있습니다.

Compiled successfully in 2754ms                                                                                                                                     오후 10:55:48


  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run yarn build.

 

7. 웹 페이지 

Vue CLI를 통해 Vue 프로젝트를 생성한 경우 Vue에서 미리 구성한 기본 페이지가 자동으로 프로젝트에 생성됩니다.

Vue 기본 페이지

 

다음 포스팅에서는 이 기본 페이지가 프로젝트에서 어떻게 구성되어 있는지 살펴보겠습니다.