Vue Academy · 강의

Vue CLI 설치

Vue CLI를 설치하고 사용해 새 프로젝트를 만듭니다.

Vue CLI 설치은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

Vue CLI란 무엇인가요?

Vue CLI는 Vue 프로젝트의 뼈대를 생성하고 관리하는 전통적인 명령줄 도구입니다.

합리적인 기본값으로 프로젝트를 생성합니다
플러그인을 통해 빌드 구성을 관리합니다
webpack을 기반으로 만들어졌습니다

수년 동안 표준 도구로 사용되었지만, 현재 최신 Vue에서는 Vite를 더 선호합니다.

Vue CLI 전역 설치

어디서나 vue 명령을 사용할 수 있도록 CLI를 전역으로 설치합니다.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

프로젝트 생성

vue create를 사용해 새 프로젝트의 뼈대를 생성합니다. 프로젝트 이름을 입력하면 됩니다.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

프리셋 선택

CLI에서 다음 프리셋 중 하나를 선택하라는 메시지가 표시됩니다.

기본값은 Babel과 ESLint를 제공하는 빠른 경로입니다
기능 수동 선택을 사용하면 Router, Vuex, TypeScript, 테스트 등을 추가할 수 있습니다

프리셋은 저장해 두었다가 이후 프로젝트에서 다시 사용할 수 있습니다.

기능 수동 선택

수동 선택을 고르면 원하는 기능을 켜거나 끌 수 있습니다.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

프로젝트 실행

생성이 끝나면 CLI에서 앱을 시작하는 명령을 출력합니다.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Vite의 등장

Vite는 Vue 팀이 만든 최신 빌드 도구입니다.

네이티브 ES 모듈을 사용해 즉시 시작됩니다
핫 모듈 교체가 매우 빠릅니다
webpack 기반의 Vue CLI보다 훨씬 빠릅니다

현재 새 Vue 프로젝트에는 Vite가 권장됩니다.

Vite와 Vue CLI 비교

두 도구를 비교하면 다음과 같습니다.

Vue CLI는 webpack을 사용하며, 콜드 스타트는 더 느리지만 성숙하고 구성 가능성이 높습니다
Vite는 esbuild와 네이티브 ESM을 사용하며, 거의 즉시 시작되고 앞으로의 기본 도구가 될 예정입니다

Vue CLI는 현재 유지 관리 모드입니다. 레거시 프로젝트를 유지 관리하는 경우가 아니라면 Vite를 사용하세요.

npm create vue@latest

Vite 기반의 새 Vue 프로젝트를 시작하는 공식적인 방법은 create-vue 도구를 사용하는 것입니다.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

create-vue 프로젝트 실행

create-vue는 표준 Vite 스크립트를 사용합니다.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

어떤 도구를 사용해야 하나요?

선택할 때는 다음 지침을 참고하세요.

2024년 이후에 새로 시작하나요? npm create vue@latest(Vite)를 사용하세요
Vue CLI로 만든 오래된 프로젝트를 유지 관리하나요? 계속 사용하세요
가장 빠른 개발 경험을 원하나요? Vite가 더 좋습니다

빠른 확인

Vue 도구 선택에 대해 제대로 이해했는지 테스트해 보세요.

복습: Vue CLI 설치

Vue 프로젝트 뼈대 생성 도구에 대해 배웠습니다.

Vue CLI는 npm install -g @vue/cli로 설치합니다
vue create는 프리셋을 사용해 프로젝트 뼈대를 생성합니다
Vite는 최신의 빠른 대안입니다
npm create vue@latest는 최신 프로젝트를 시작할 때 권장되는 방법입니다

다음에는 생성된 프로젝트 구조를 살펴봅니다.

자주 묻는 질문

“Vue CLI 설치” 강의는 무료인가요?

네 — “Vue CLI 설치” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“Vue CLI 설치”에서 뭘 배우나요?

Vue CLI를 설치하고 사용해 새 프로젝트를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 1번째 강의입니다.

“Vue CLI 설치” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기