Vue.js 1. 뷰 시작하기

송지윤·2026년 1월 5일

vue

Vue

목록 보기

5/6

VS Code 필요한 확장팩 설치
Vue (Official)

Live Server

Prettier - Code Formatter

Auto Rename Tag

HTMl CSS Support

HTML to CSS autocompletion

Code Runner

Korean Language Pack for Visual Studio

Vue 폴더 생성 후 code . 으로 VS Code 실행
Vue 폴더 안에 v01 폴더 만들고 ctrl shift `으로 터미널 열어줌
cd v01 입력해서 v01 폴더로 이동
npm create vue@latest .
입력한 다음 Package name 만 v01 입력
나머지는 다 No 선택해줌

npm install

npm run dev

서버 실행

package.json

{
  "name": "v01",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.26"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.3",
    "vite": "^7.3.0",
    "vite-plugin-vue-devtools": "^8.0.5"
  }
}

애플리케이션 정보, 의존성 모듈 정보, 스크립트 명령어 정보들을 담고있음.

name : 패키지 정보
version : 버전 정보
private : 해당 프로젝트가 npm 레지스트리(저장소)에 공개적으로 게시(publish)되지 않도록 제한하는 설정 (기본값 false는 공개하겠다는 뜻)
type : module -> 패키지를 모듈 타입으로 하겠다.
scripts : npm run dev 했을 때 dev 가 "dev"에 해당 -> vite 실행 "dev" 를 "aaa"로 바꾸면 npm run aaa로 실행해줘야함
dependencies : 프로젝트 작업 중에 npm install 명령어를 통해서 설치한 라이브러리들이 들어가 있음. 애플리케이션을 배포할 때 사용할 라이브러리들이 담겨있는 곳. 애플리케이션의 동작을 도와주는라이브러리들이 저장됨 dependencies에 설치된 라이브러리는 배포할 때 포함됨.
devDependencies : 애플리케이션 동작과 직접적인 연관은 없지만, 개발할 때 필요한 라이브러리를 설치하면 됨. devDependencies에 설치를 하려고 할 때는 npm i somethis -D를 붙여서 설치. 뒤에 -D를 붙이면 dev에 넣겠다는 말
devDependencies에 설치된 라이브러리는 개발할 때 필요한 라이브러리이기 때문에 배포할 때 포함되지 않음. 때문에 어플의 로직과 연관이 없다고 판단되는 라이브러리가 있다면 dev에 넣는 것이 좋음.

package.json 파일을 바탕으로 필수 패키지들이 설치가 진행되기 때문에 꼭 필요함
package-lock.json 파일은 지워도 다시 생성됨(중요 파일은 아님)

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

npm run dev 했을 때 제일 먼저 참조하는 파일이 index.html 파일

js 파일을 실행해서 그 결과를

<div id="app"></div>

여기에 렌더링 시켜준다고 보면 됨

main.js

src/main.js

import './assets/main.css' // css 가져오겠다

import { createApp } from 'vue' // vue.js 에서 createApp을 가져와서 사용하겠다.
import App from './App.vue'
// ./App.vue 파일에서 export default 된 값을 가져와서, 그걸 App 이라는 이름으로 쓰겠다.

createApp(App).mount('#app')
// Vue 애플리케이션 하나를 생성함 App -> 루트(root) 컴포넌트
// -> 이 Vue 앱의 시작 컴포넌트는 App이다.
// .mount('#app')
// -> HTML에서 id="app"인 요소에 Vue 앱을 붙인다.(렌더링한다.)
// => App 컴포넌트를 루트로 하는 Vue 앱을 만들고, HTML의 #app 요소에 그려라.
// => index.html 에 있는 <div id="app"></div> Vue 가 이 div 안을 전부 App.vue 내용으로 교체함

App.vue

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

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

Vue 3에서는 script setup 사용해서 컴파일 시 자동으로 export default {...} 만들어줌
그래서 main.js에서

import App from './App.vue'

import 해서 사용할 수 있음.

확장팩으로 Auto Rename Tag 받으면 컴포넌트로 인식 못하고 self-closing 에 빨간줄 생김.

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

<template>
  <!-- <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main> -->
  <h1>App.vue 파일</h1>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

template 태그 안에 주석처리하고 내용 바꿔주면 화면 바뀜

송지윤

이전 포스트

00_Vue.js

다음 포스트