[콜럼Vue스] Vue CLI와 프로젝트 구조: 컴포넌트 기반

1. Vue CLI 도구

Vue CLI는 Vue.js 프로젝트를 빠르고 쉽게 시작할 수 있도록 도와주는 강력한 도구임. CLI는 “Command Line Interface”의 약자로, 터미널 명령어를 통해 프로젝트 생성부터 설정까지 관리할 수 있게 해줌.

npm install -g @vue/cli
vue create my-project

설치 과정에서 Babel, TypeScript, Vue Router, Vuex, Linting, CSS Pre-processors 등 다양한 옵션을 선택할 수 있어서 프로젝트에 필요한 도구들을 빠르게 설정할 수 있음.

Vue CLI의 장점:

• 복잡한 설정 없이 바로 사용할 수 있음.
• 다양한 플러그인과 설정을 지원해 유연한 개발 환경 제공.
• Webpack과 Vite 등 빌드 도구와도 호환 가능.

---

2. 생성된 프로젝트 구조 살펴보기

Vue CLI로 프로젝트를 생성하면 기본적으로 다음과 같은 디렉토리 구조가 만들어짐:

my-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── package.json
└── README.md

주요 폴더와 파일 설명:

• public/: 정적 파일을 배치하는 폴더로, index.html이 기본적으로 위치함.
• src/: 소스 파일들이 저장되는 폴더. 여기에 컴포넌트, 페이지, 스타일, 이미지 등을 관리함.
  • components/: 재사용 가능한 Vue 컴포넌트를 모아두는 폴더.
  • App.vue: Vue.js 애플리케이션의 최상위 컴포넌트.
  • main.js: 애플리케이션의 진입 파일로, Vue 인스턴스를 생성하고 App.vue를 렌더링함.
• package.json: 프로젝트의 설정 및 의존성 정보가 담긴 파일.

---

3. 컴포넌트의 조합

Vue.js는 컴포넌트 기반 개발이 핵심임. 컴포넌트는 UI의 특정 부분을 독립적으로 관리하고 재사용할 수 있는 단위임. 여러 개의 컴포넌트를 조합하여 복잡한 페이지나 애플리케이션을 만들 수 있음.

예를 들어, 간단한 HelloWorld 컴포넌트를 만들어보면:

// src/components/HelloWorld.vue
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: ['msg']
}
</script>

이런 작은 컴포넌트를 App.vue 같은 상위 컴포넌트에 추가하여 조합할 수 있음:

// src/App.vue
<template>
  <div id="app">
    <HelloWorld msg="Vue 컴포넌트 조합을 배워보세요!" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>