Ubuntu 20.04에 Vue CLI를 설치하는 방법

이 기사에서는 Ubuntu 20.04에 Vue CLI를 설치하는 방법을 설명합니다.

Vue.js는 오픈 소스 모델-뷰-뷰모델 프런트 엔드 JavaScript 프레임워크입니다. 이 문서에서는 설치 프로세스와 Hello World First 프로젝트를 만드는 방법을 안내합니다.

전제 조건

• Ubuntu 20.04가 설치된 전용 서버 또는 KVM VPS.
• 루트 사용자 액세스 또는 관리 권한이 있는 일반 사용자입니다.

Ubuntu 20.04에 Vue CLI 설치

1 - 서버를 최신 상태로 유지

# apt update -y

2 - NodeJS 다운로드

NodeJS의 안정적인 최신 릴리스를 다운로드하십시오.

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

3 - NodeJS 설치

다음으로 다음 명령을 사용하여 NodeJS를 설치합니다.

# apt-get install -y nodejs

4 - 설치 확인

# node -v && npm -v

산출:

v15.9.0
7.5.4

5. Vue CLI 설치

다음 명령은 Vue CLI를 설치합니다.

# npm install -g @vue/cli

설치 확인:

# vue --version

산출:

@vue/cli 4.5.11

6. Vue 프로젝트 생성

# vue create hello-world

사전 설정을 선택하라는 메시지가 표시됩니다. 기본 Babel + ESLint 설정과 함께 제공되는 기본 사전 설정을 선택하거나 "기능 수동 선택"을 선택하여 필요한 기능을 선택할 수 있습니다.

산출:

Vue CLI v4.5.11
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features

프로젝트 hello-world를 성공적으로 만들었습니다.
다음 명령으로 시작하십시오.

# cd hello-world
# npm run serve

산출:

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

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

브라우저로 이동하여 http://[server_IP]:8080을 엽니다.

그게 다야 설치가 완료되었습니다.

이 기사에서는 Ubuntu 20.04에 Vue CLI를 설치하는 방법을 살펴보았습니다.