[VueJS] Vue 환경 구축

1. Vetur 설치

Visual Studio Code에서 Extensions - Vetur를 검색하여 설치한다.

 

2. NodeJS 환경 구축

Vue뿐 아니라 Angular, React와 같은 모던 자바스크립트 프레임워크는 대부분 NodeJS를 사용하여 코드를 빌드한다.

2021.03.17 - [프로그래밍] - Window10 - Node.js 설치

Window10 - Node.js 설치

node -v

npm -v

이 명령어들을 이용해서 node와 npm(node package manager)의 버전을 확인하여 node js가 잘 설치되었는지 확인할 수 있다.

 

3. vue/cli 설치

VS Code에서 현재 폴더로 터미널 또는 cmd창을 열고 아래 명령어를 실행한다.

npm install -g @vue/cli

이전 버전의 vue-cli (1.x or 2.x)를 제거하고 싶다면 uninstall vue-cli -g 명령을 사용하면 된다.

 

참고: cli.vuejs.org/guide/installation.html

Installation | Vue CLI

버전 확인 명령어

vue --version

나는 powershell을 이용하여 설치하였는데, 버전을 확인하려고 하면 아래와 같은 오류?가 발생하였다.

이것은 단순하게 명령어만 아래로 바꾸면 해결할 수 있고,

vue.cmd --version

또는 powershell을 cmd로 터미널 창을 변경하면 된다.

숫자 2는 열려있는 터미널 창 중 몇번째인지를 의미한다.

그래서 이후로는 cmd창에서 작업을 진행한다.

또, 매번 경로를 가리는 게 귀찮아서 해당 폴더 위치를 이동시켰다.

 

이렇게 하면 환경 구축은 완료했고, 이후 프로젝트를 생성하여 프로젝트를 진행하면 된다.

 

2021.03.17 - [WEB] - [Vue JS] Vue 프로젝트 생성

[Vue JS] Vue 프로젝트 생성