[Vue.js] 설치 및 시작하기

Frontend 프레임워크로 Vue.js를 선정하고, 설치부터 시작하는 과정까지를 기록한다.

• Vue.js 버전 : 3.5.13 (최신 안정 릴리즈)

 

VS Code 설치

터미널을 사용해야 하고, 비교적 가볍게 운영 가능한 IDE로 VS Code를 선택. Extension을 이용하면 더 편하기도 하고?

Visual Studio Code - Code Editing. Redefined

 

 

Node.js 설치

npm을 이용하여 Vue를 설치하기 위해 Node.js가 필요하다. 홈페이지에서 운영체제별 설치 파일을 다운로드할 수 있는데, 대부분은 LTS(안정 버전)을 사용하면 된다. 윈도우는 .msi 파일로 다운로드.

Node.js — 어디서든 JavaScript를 실행하세요

Next 계속 누르다 Automatically~ 체크해줌

 

cmd창과 파워쉘이 차례로 나오고 조금 기다리면 설치가 완료된다.

cmd에서 npm -v 명령어 입력해서 버전 나오면 성공

 

 

Vue.js 설치

사내망 등으로 인해 SSL 인증서 검증을 통과하지 못하는 경우, 아래 명령어를 실행하여 해결한다.

$ npm config set strict-ssl false -g

 

cmd 창을 열고 아래 명령어를 입력하여 vue cli와 vue를 설치한다.

# 기본 Vue 개발 환경 설정 도구
$ npm install -g @vue/cli@5.0.8
$ npm install vue@3.5.13

 

* Vue CLI

Vue 개발을 편하게 시작할 수 있도록 프로젝트를 구성해 주는 도구로, 초기 프로젝트 구성을 자동적으로 해주어 설정에 대한 고민 없이 쉽게 프로젝트를 만들 수 있는 환경을 제공한다. (폴더 구조, build, webpack ...)

• npm install -g @vue/cli : 컴퓨터 환경 전역에 vue cli를 설치하는 것으로, 설치 시 터미널에서 vue 명령어 사용 가능!

vue/cli 설치 완료

vue 설치 완료

vue 버전 확인 ( 설치가 되지 않는다면, 환경 변수 확인)

 

 

Vue 프로젝트 생성

프로젝트를 생성할 경로로 이동하여 아래 명령어를 입력한다.

해당 경로에 생성할 예정

설치할 Vue 버전 선택 (3)

에러... 나는데 프로젝트는 생성됨

$ cd {프로젝트명}
$ npm run serve

실행 완료

localhost:8080 접속 시 화면

 

 

Vue Router 설치

Vue에서 페이지를 왔다갔다하는 라우터를 설치해야 함. 프로젝트 생성 후 라우터부터 설치해야 오류가 없다고 ... 프로젝트가 실행되어 있으면 일단 종료한다.

프로젝트 실행한 터미널에서 Ctrl + C 누른 후 Y 입력

$ vue add router

생성한 프로젝트 디렉토리 내에서 vue add router 명령 입력

router 폴더 생성되면 성공