Vue.js와 Vue CLI의 관계?

Vue와 Vue CLI는 서로 밀접한 관련이 있지만, 역할과 목적이 다릅니다. 다음은 두 개념의 관계와 차이를 설명한 내용입니다.

Vue.js

• Vue.js는 프론트엔드 프레임워크로, 주로 사용자 인터페이스(UI)를 개발하는 데 사용됩니다.
• 단일 파일 컴포넌트(Single File Components, SFC)를 기반으로 컴포넌트를 작성하고, 반응형 데이터 바인딩 및 뷰 렌더링 등을 제공합니다.
• 핵심 라이브러리로써, 가볍고 유연하며, Vue를 설치한 후 바로 사용할 수 있습니다.
    

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

와 같은 방식으로 간단히 웹 페이지에 추가 가능.

728x90

Vue CLI

• Vue CLI는 Vue 애플리케이션 개발을 위한 도구 및 프로젝트 생성 툴입니다.
• 복잡한 Vue 프로젝트를 쉽게 시작하고 관리할 수 있도록 돕습니다.
• 역할:
  • 프로젝트 생성: 초기 설정 및 디렉토리 구조를 자동화.
  • 빌드 도구 설정: Webpack, Vite 등 빌드 도구를 미리 구성.
  • 플러그인 지원: TypeScript, ESLint, PWA 등과 같은 추가 기능을 플러그인으로 간단히 통합 가능.
  • 개발 서버 제공: 실시간으로 변경 사항을 확인할 수 있는 Hot Module Replacement(HMR) 지원.
• Vue CLI는 Vue.js를 사용하는 프로젝트를 더 효율적이고 체계적으로 관리할 수 있게 합니다.

Vue.js와 Vue CLI의 관계

• Vue CLI는 Vue.js를 기반으로 한 프로젝트를 생성하고 관리하기 위한 도구입니다.
• Vue.js는 프레임워크 자체이고, Vue CLI는 이를 사용하는 개발 환경을 제공하는 보조 도구입니다.
• Vue CLI를 사용하면 수동으로 설정해야 하는 개발 환경(예: Webpack 설정, Babel 설정 등)을 자동화하여 시간을 절약할 수 있습니다.

예시

1. Vue.js 단독 사용:
   
   단순 HTML 파일로도 Vue 사용 가능.       

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">{{ message }}</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

Vue CLI 사용:

더 큰 규모의 애플리케이션을 체계적으로 개발 가능.

# Vue CLI 설치
npm install -g @vue/cli

# 프로젝트 생성 (Vue 3 기반)
vue create my-project

# 프로젝트 디렉토리 이동
cd my-project

# 개발 서버 실행
npm run serve

# 프로젝트 빌드
npm run build

 

728x90

 

요약

Vue는 UI를 만드는 프레임워크이고, Vue CLI는 이를 효율적으로 개발하기 위한 도구입니다. Vue CLI를 사용하면 복잡한 설정을 간소화하고, 빠르게 프로젝트를 시작할 수 있습니다.