1. 왜 Vue CLI를 써야 할까?
이전까지는 CDN으로 <script src="https://cdn.jsdelivr.net/npm/vue"> 형태로 예제를 만들었습니다.
이 방식은 가볍게 Vue를 맛볼 때는 좋지만, 실제 프로젝트에서는 한계가 있습니다.
파일이 많아지면 스크립트 관리가 힘들고, 컴포넌트를 .vue 파일로 쪼개서 쓰기 어렵고,
번들링, 코드 스플리팅, ESLint, 테스트 같은 개발 환경을 직접 다 세팅해야 합니다.
그래서 실무에서는 보통 Vue CLI(또는 Vite)를 사용해서
프로젝트 뼈대를 자동으로 생성하고, SFC(.vue 파일) 기반 구조,
개발 서버(Hot Reload), 빌드 설정까지 한 번에 세팅해서 시작합니다.
이 글은 Vue CLI로 Vue 프로젝트를 생성하는 것과
CDN으로 만들었던 예제들을 SFC 구조로 옮겨보는 것을 목표로 합니다.
2. Vue CLI 설치하기
Vue CLI는 Node.js 기반 도구라 먼저 Node.js가 설치되어 있어야 합니다.
https://nodejs.org/ko/download
Node.js — Node.js® 다운로드
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
nodejs.org
윈도우 기준으로, 위 링크에서 .msi 프로그램을 다운받아주세요.
다운로드가 완료되면 cmd창에 node -v 명령어로 node.js가 설치됐는지, 버전이 몇인지 확인해주면 됩니다.
여기까지 완료가 되었다면 vue cli를 설치하면 됩니다.
npm install -g @vue/cli
# 또는
yarn global add @vue/cli설치가 완료되었다면 버전 확인을 해줍니다.
vue --version버전이 잘 나오면 설치가 완료된 상태입니다.
3. 새 Vue 프로젝트 만들기
이제 CLI로 프로젝트를 한 번 만들어보겠습니다.
vue create 프로젝트명실행하면 몇 가지 질문이 나오는데,
Vue 2 기준으로 공부 중이라면 Manually select features -> Vue 2를 선택하고,
기본 옵션으로 가볍게 시작하고 싶다면 Default (Vue 2)를 시작해도 괜찮습니다.
설정이 끝나면 프로젝트 폴더가 만들어지고, 안에 기본 파일들이 들어있습니다.
프로젝트 폴더로 이동해서 개발 서버를 띄워봅니다.
cd 프로젝트명
npm run serve
# 또는
yarn serve터미널에 표시되는 로컬 주소(http://localhost:8080)에 접속하면 Vue 기본 화면이 보입니다.
4. Vue CLI 프로젝트 구조 한 번에 훑어보기
생성된 프로젝트의 대표적인 구조는 대략 이런 느낌입니다.
my-vue-app/
├ node/modules/
├ public/
│ └ index.html
├ src/
│ ├ main.js
│ ├ App.vue
│ └ components/
│ └ HellowWorld.vue
├ package.json
└bable.config.js (또는 기타 설정 파일들)핵심 파일에 대해서 정리해보겠습니다.
1️⃣ public/index.html
실제로 브라우저가 처음 로딩하는 HTML입니다.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<title>my-vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- 빌드된 JS가 여기 삽입됨 -->
</body>
</html><div id="app"></div> 이 부분이 Vue 앱이 마운트되는 자리입니다.
2️⃣ src/main.js
Vue 애플리케이션의 진입점입니다.
import Vue from 'vue'
import App from './App.vue'
Vue.config.productiontip = false
new Vue({
render: h => h(App)
}).$mount('#app')- App.vue를 루트 컴포넌트로 사용
- #app에 마운트 -> public/index.html의 <div id="app">와 연결
Router, Vuex도 나중에 여기서 import해서 .use() 해주게 됩니다.
3️⃣ src/App.vue
전체 화면 구조를 담당하는 루트 컴포넌트입니다.
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png"/>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
/* 전역 스타일 */
</style>앞에서 공부했던 것처럼
- <template>: 화면 구조
- <script>: 로직
- <style>: 스타일
구조는 동일합니다. 이제 단지 CLI가 이 구조를 기반으로 번들링해 줄 뿐입니다.
4️⃣ src/components/HelloWorld.vue
원래 CDN 예제에서 <script> 안에 넣었던 Vue 인스턴스 코드가
이제는 이런 식으로 컴포넌트 파일 단위로 쪼개져 있다고 보면 됩니다.
이 파일을 지우고,
우리가 직접 만든 컴포넌트들(TodoList.vue, UserCard.vue 등)로 교체하면 됩니다.
5. CDN 예제를 SFC로 옮겨보기
예를 들어, CDN을 활용한 코드가 아래와 같다고 가정하겠습니다.
<div id="app">
<p>Count: {{ count }}</p>
<button @click="increment">+1</button>
</div>
<script src="https://cdn.jsdeliv.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return { count: 0 }
},
methods() {
increment() {
this.count++
}
}
})
</script>이제는 이걸 SFC로 옮겨서 Counter.vue로 만들 수 있습니다.
<!-- src/components/Counter.vue -->
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">+1</button>
</div>
</template>
<script>
export default {
name: 'Counter',
data() {
return {
count: 0
}
},
methods() {
increment() {
this.count++
}
}
}
</script>그리고 App.vue에서 사용합니다.
<!-- src/components/Counter.vue -->
<template>
<div id="app">
<h1>Vue CLI 프로젝트에서의 카운터</h1>
<Counter/>
</div>
</template>
<script>
import Counter from './components/Counter.vue'
export default {
name: 'App',
components: {
Counter
}
}
</script>이렇게 하면 기존 CDN 예제의 개념은 그대로 유지하면서,
CLI 기반 프로젝트 구조로 자연스럽게 넘어갈 수 있습니다.
정리
이번 글에서는 Vue CLI를 설치하고, 새 Vue 2 프로젝트를 만들고,
폴더 구조를 훑어보고, 기존 CDN 예제를 SFC 컴포넌트로 옮기는 방법까지 정리해 봤습니다.
출처
'Framework > Vue' 카테고리의 다른 글
| Vue3 Composition API: setup, ref, reactive로 상태 관리 (0) | 2025.11.24 |
|---|---|
| Vue3 입문: Vite로 프로젝트 생성하고 createApp 큰 그림 잡기 (0) | 2025.11.24 |
| Vuex 모듈(modules)로 스토어 깔끔하게 나누기 (0) | 2025.11.21 |
| Vuex를 이용한 Vue 전역 상태 관리 예제 (0) | 2025.11.20 |
| Vuex 기초: Vue 전역 상태 관리 (state, getters, mutations, actions, modules) (1) | 2025.11.20 |
