Vue 3.0에서 프로젝트를 빌드하는 방법

Vue3.0의 공식 버전은 2020년 9월에 출시되어 개발자가 Vue 애플리케이션을 보다 유연하고 효율적으로 작성할 수 있도록 많은 개선이 이루어졌습니다. 이번 글에서는 Vue 3.0에서 프로젝트를 빌드하는 방법을 배워보겠습니다.

1. Vue CLI 설치

먼저 Vue CLI를 로컬에 설치해야 합니다. Vue CLI는 Vue에서 공식적으로 제공하는 스캐폴딩 도구로, Vue 애플리케이션용 템플릿을 빠르게 생성하는 데 사용됩니다.

Vue CLI를 설치하려면 명령줄에서 다음 명령을 실행하세요.

npm install -g @vue/cli

2. Vue 프로젝트 만들기

Vue CLI를 설치한 후 제공되는 명령을 사용하여 Vue 프로젝트를 빠르게 만들 수 있습니다.

명령줄에서 다음 명령을 실행하여 새 Vue 3.0 프로젝트를 만듭니다.

vue create my-project

여기서 my-project는 프로젝트 이름입니다.

위 명령을 실행하면 Vue CLI에 설치할 기능을 선택하라는 메시지가 표시됩니다. 위쪽 및 아래쪽 화살표 키를 사용하여 속성을 선택하고 스페이스바를 사용하여 속성을 선택/선택 취소할 수 있습니다. 기본 구성을 선택할 수 있습니다.

3. Vue 프로젝트 실행

Vue 프로젝트를 생성한 후 다음 명령을 사용하여 애플리케이션을 시작할 수 있습니다.

npm run serve

이 명령은 프로젝트를 컴파일하고 로컬 서버를 시작합니다. 서버가 시작된 후 브라우저에서 http://localhost:8080을 방문하여 애플리케이션에 액세스할 수 있습니다.

4. Vue 컴포넌트 작성

Vue 3.0에서는 컴포넌트를 작성하는 방식이 Vue 2.x와 다릅니다. Vue 3.0의 구성 요소는 Vue 2.x의 단일 파일 구성 요소 대신 단일 setup() 함수로 구성됩니다.

다음은 간단한 Vue 3.0 구성 요소 예입니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue 3!')
    return {
      message
    }
  }
}
</script>

보시다시피 setup() 함수를 사용하여 구성 요소의 논리적 부분을 생성하고 Vue 3.0의 반응형 ref() 기능을 소개합니다.

5. API와 상호 작용

Vue 3.0에서는 Vue에서 제공하는 두 가지 새로운 API인 Composition API와 API를 사용하여 API와 상호 작용할 수 있습니다. Composition API는 구성 요소의 코드를 작성하고 구성하는 보다 편리한 방법을 제공하는 반면, API는 Vue 인스턴스와 직접 상호 작용하는 기능을 제공합니다.

다음은 Composition API를 사용하여 API와 상호 작용하는 예입니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, onMounted } from 'vue'
import Axios from 'axios'

export default {
  setup() {
    const message = ref('')
    onMounted(() => {
      Axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {
        message.value = response.data.title
      })
    })
    return {
      message
    }
  }
}
</script>

위 예에서는 ref() 및 onMounted() 함수를 사용하여 반응형 메시지 변수를 생성하고 이를 컴포넌트에 마운트했습니다. API 데이터를 얻고 반환된 제목을 메시지 변수에 할당하는 Axios입니다.

6. 결론

Vue 3.0은 많은 개선 사항과 새로운 기능을 제공하여 Vue 애플리케이션 개발을 더욱 효율적이고 유연하게 만듭니다. 이번 글에서는 Vue CLI를 사용하여 Vue 3.0 프로젝트를 빠르게 생성하는 방법을 배웠고, Vue 3.0에서 컴포넌트 작성 방법과 API 상호작용 방법을 시연하기 위해 간단한 Vue 컴포넌트를 만들었습니다.

위 내용은 Vue 3.0에서 프로젝트를 빌드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!