vue3 환경 및 프로젝트 구축 방법을 설명하는 예

Vue는 구성 요소화를 통해 강력한 재사용성과 유지 관리가 쉬운 코드 구조를 제공하는 인기 있는 JavaScript 프레임워크입니다. Vue3은 Vue 프레임워크의 최신 버전이며 성능과 경험이 크게 향상되었습니다. 이 기사에서는 Vue3 환경을 설정하고 간단한 Vue3 애플리케이션을 만드는 방법을 소개합니다.

1단계: Node.js 설치

Vue3 환경을 설정하기 전에 먼저 Node.js를 설치해야 합니다. Node.js는 JavaScript 코드를 실행하기 위한 오픈 소스 환경으로 Google Chrome 브라우저에 내장된 V8 엔진을 사용합니다. Node.js 공식 웹사이트에서 최신 버전을 다운로드하여 설치할 수 있습니다.

2단계: Vue-CLI 설치

Vue-CLI는 Vue 기반 프로젝트를 빠르게 생성할 수 있는 Vue의 공식 스캐폴딩 도구입니다. Vue-CLI는 Node.js와 함께 제공되는 패키지 관리자인 npm을 사용하여 쉽게 설치할 수 있습니다.

터미널(Mac 사용자) 또는 명령 프롬프트(Windows 사용자)를 열고 다음 명령을 입력하세요.

npm install -g @vue/cli

이 명령은 Vue-CLI를 전역적으로 설치합니다.

3단계: Vue3 프로젝트 만들기

Vue3 프로젝트를 만드는 것은 쉽습니다. 터미널이나 명령 프롬프트를 열고 원하는 경로를 입력한 후 다음 명령을 실행하세요.

vue create my-project

이 명령은 "my-project"라는 Vue3 프로젝트를 생성합니다. 다음 단계에서는 구성을 위해 몇 가지 정보를 입력해야 합니다.

4단계: Vue3 설치

npm을 사용하여 Vue3 설치:

npm install vue@next

이 명령은 Vue3을 설치합니다.

5단계: Vue3 애플리케이션 실행

Vue3 애플리케이션을 실행하려면 프로젝트 디렉터리로 이동하여 다음 명령을 실행해야 합니다.

npm run serve

이 명령은 개발 서버를 시작하여 Vue3 애플리케이션을 미리 볼 수 있도록 합니다. 브라우저 프로그램.

6단계: Vue3 구성 요소 만들기

Vue3에서 구성 요소는 코드의 기본 구성 요소입니다. 간단한 Vue3 컴포넌트를 만들어 보겠습니다. 프로젝트에서 "src/comComponents" 폴더를 찾아 "HelloWorld.vue"라는 새 파일을 만듭니다.

"HelloWorld.vue"에 다음 코드를 추가하세요.

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

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
}
</script>

이 구성 요소는 데이터 속성("message")을 포함하고 이를 사용하여 제목을 표시합니다.

7단계: Vue3 애플리케이션에서 컴포넌트 사용

이제 Vue3 애플리케이션에서 새로 생성된 "HelloWorld" 컴포넌트를 사용해 보겠습니다. "src/App.vue" 파일에서