Skip to content

빠른 시작

사용 사례 및 기본 설정에 따라 빌드 과정을 포함하거나 포함하지 않고 Vue를 사용할 수 있습니다.

Try Vue Online

  • Vue를 빠르게 체험해 보려면 Playground에서 직접 사용해 보세요.

  • 빌드 단계가 없는 일반 HTML 설정을 선호하는 경우, 이 JSFiddle을 시작점으로 사용할 수 있습니다.

  • Node.js와 빌드 도구의 개념에 이미 익숙하다면, StackBlitz에서 브라우저 내에서 바로 전체 빌드 설정을 시도해 볼 수도 있습니다.

Vue 애플리케이션 만들기

전제 조건

  • 명령줄에 대한 친숙함
  • Node.js 버전 16.0 이상 설치

이 섹션에서는 로컬 컴퓨터에서 Vue 싱글 페이지 애플리케이션을 스캐폴드하는 방법을 소개합니다. 생성된 프로젝트는 Vite를 기반으로 빌드 설정을 사용하고 Vue 싱글 파일 컴포넌트(SFC)를 사용할 수 있도록 합니다.

최신 버전의 Node.js가 설치되어 있는지 확인한 다음 명령줄에 다음 명령을 실행합니다(> 기호 제외):

> npm init vue@latest

이 명령은 공식 Vue 프로젝트 스캐폴딩 도구인 create-vue를 설치 및 실행합니다. TypeScript 및 테스트 지원과 같은 몇 가지 선택적 기능에 대한 프롬프트가 표시됩니다:

 Project name: <your-project-name>
 Add TypeScript? No / Yes
 Add JSX Support? No / Yes
 Add Vue Router for Single Page Application development? No / Yes
 Add Pinia for state management? No / Yes
 Add Vitest for Unit testing? No / Yes
 Add Cypress for both Unit and End-to-End testing? No / Yes
 Add ESLint for code quality? No / Yes
 Add Prettier for code formatting? No / Yes

Scaffolding project in ./<your-project-name>...
Done.

옵션에 대해 확신이 서지 않는다면 일단 엔터키를 눌러 No를 선택하면 됩니다. 프로젝트가 생성되면 지침에 따라 종속 요소를 설치하고 개발 서버를 시작합니다:

> cd <your-project-name>
> npm install
> npm run dev

이제 첫 번째 Vue 프로젝트가 실행 중일 것입니다! 생성된 프로젝트의 예제 컴포넌트는 Options API 대신 <script setup>Composition API를 사용하여 작성되었음을 유의하세요. 다음은 몇 가지 추가 팁입니다:

When you are ready to ship your app to production, run the following:

> npm run build

이렇게 하면 프로젝트의 ./dist 디렉터리에 프로덕션에 사용할 수 있는 앱 빌드가 생성됩니다. 프로덕션 배포 가이드](/guide/best-practices/production-deployment.html)를 확인하여 앱을 프로덕션에 배포하는 방법에 대해 자세히 알아보세요.

Next Steps >

CDN에서 Vue 사용

스크립트 태그를 통해 CDN에서 직접 Vue를 사용할 수 있습니다:

html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

여기서는 unpkg를 사용하고 있지만, jsdelivr 또는 cdnjs와 같이 npm 패키지를 제공하는 모든 CDN을 사용할 수도 있습니다. 물론 이 파일을 다운로드하여 직접 제공할 수도 있습니다.

CDN에서 Vue를 사용하는 경우 "빌드 단계"가 필요하지 않습니다. 따라서 설정이 훨씬 간단해지며 정적 HTML을 향상시키거나 백엔드 프레임워크와 통합하는 데 적합합니다. 하지만 싱글 파일 컴포넌트(SFC) 구문은 사용할 수 없습니다.

글로벌 빌드 사용

위의 링크는 모든 최상위 API가 글로벌 Vue 객체에 프로퍼티로 노출되는 Vue의 글로벌 빌드를 로드합니다. 다음은 글로벌 빌드를 사용하는 전체 예제입니다:

html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

JSFiddle demo

ES 모듈 빌드 사용

이 문서의 나머지 부분에서는 주로 ES 모듈 구문을 사용할 것입니다. 현재 대부분의 최신 브라우저는 ES 모듈을 기본적으로 지원하므로 이와 같은 기본 ES 모듈을 통해 CDN에서 Vue를 사용할 수 있습니다:

html
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script type="module">을 사용하고 있으며, 가져온 CDN URL이 대신 Vue의 ES 모듈 빌드를 가리키고 있음을 알 수 있습니다.

JSFiddle demo

임포트맵 활성화

위의 예에서는 전체 CDN URL에서 임포트하고 있지만 나머지 문서에서는 다음과 같은 코드를 볼 수 있습니다:

js
import { createApp } from 'vue'

임포트 맵를 사용하여 브라우저에 vue를 어디에서 가져와야 할지 알려줄 수 있습니다:

html
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

JSFiddle demo

임포트 맵에 다른 종속성에 대한 항목을 추가할 수도 있지만 사용하려는 라이브러리의 ES 모듈 버전을 가리키는지 확인해야 합니다.

임포트 맵 브라우저 지원

임포트 맵는 기본적으로 크롬 기반 브라우저에서 지원되므로 학습 과정에서 크롬 또는 엣지를 사용하는 것이 좋습니다.

Firefox를 사용하는 경우, 버전 102 이상에서만 지원되며 현재 'about:config'의 dom.importMaps.enabled 옵션을 통해 활성화해야 합니다.

선호하는 브라우저가 아직 임포트 맵를 지원하지 않는 경우, es-module-shims를 사용하여 폴리필할 수 있습니다.

운영 환경에서 사용

지금까지의 예제는 Vue의 개발 빌드를 사용한 것으로, 프로덕션 환경에서 CDN의 Vue를 사용하려면 프로덕션 배포 가이드를 확인하시기 바랍니다.

모듈 분할

가이드를 자세히 살펴볼수록 코드를 관리하기 쉽도록 별도의 JavaScript 파일로 분할해야 할 수도 있습니다. 예를 들어

html
<!-- index.html -->
<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>
js
// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

위의 index.html을 브라우저에서 직접 열면 ES 모듈이 file:// 프로토콜을 통해 작동할 수 없기 때문에 오류가 발생하는 것을 확인할 수 있습니다. 이 문제를 해결하려면 로컬 HTTP 서버를 사용하여 http:// 프로토콜을 통해 index.html을 제공해야 합니다.

로컬 HTTP 서버를 시작하려면 먼저 Node.js를 설치한 다음 HTML 파일이 있는 디렉터리에서 명령줄에서 npx serve를 실행합니다. 올바른 MIME 타입의 정적 파일을 제공할 수 있는 다른 HTTP 서버를 사용할 수도 있습니다.

가져온 컴포넌트의 템플릿이 자바스크립트 문자열로 인라인되어 있는 것을 보셨을 것입니다. VSCode를 사용하는 경우, es6-string-html 확장자를 설치하고 문자열 앞에 /*html*/ 주석을 추가하면 구문 강조 표시를 받을 수 있습니다.

빌드 단계 없이 컴포지션 API 사용

컴포지션 API에 대한 많은 예제에서는 <script setup> 구문을 사용합니다. 빌드 단계 없이 컴포지션 API를 사용하려면 setup() 옵션 사용법을 참조하세요.

Next Steps

소개를 건너뛰셨다면, 나머지 설명서를 읽기 전에 반드시 읽어보시길 권장합니다.

빠른 시작 has loaded