빠른 시작 #

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

Try Vue Online #

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

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

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

Vue 애플리케이션 만들기 #

이 섹션에서는 로컬 컴퓨터에서 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를 사용하여 작성되었음을 유의하세요. 다음은 몇 가지 추가 팁입니다:

• 권장 IDE 설정은 Visual Studio Code + Volar extension입니다. 다른 편집기를 사용하는 경우 IDE 지원 섹션을 확인하세요.
• 백엔드 프레임워크와의 통합을 포함한 자세한 툴링 내용은 툴링 가이드에서 확인할 수 있습니다.
• 기본 빌드 도구인 Vite에 대해 자세히 알아보려면 Vite 문서를 확인하세요.
• 타입스크립트를 사용하기로 선택한 경우 타입스크립트 사용 가이드를 확인하세요.

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를 사용할 수 있습니다:

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

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

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

글로벌 빌드 사용 #

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

<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를 사용할 수 있습니다:

<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에서 임포트하고 있지만 나머지 문서에서는 다음과 같은 코드를 볼 수 있습니다:

import { createApp } from 'vue'

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

<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 모듈 버전을 가리키는지 확인해야 합니다.

모듈 분할 #

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

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

  createApp(MyComponent).mount('#app')
</script>

// 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 #

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