첫 번째 Vue.js 구성 요소 빌드

Vue.js는 컴포넌트 기반 프레임워크로, 재사용 가능한 컴포넌트를 사용하여 애플리케이션을 빌드한다는 의미입니다. 각 컴포넌트는 자체 HTML, CSS 및 JavaScript를 캡슐화합니다. 이 문서에서는 처음부터 첫 번째 Vue.js 컴포넌트를 빌드하는 과정을 안내합니다.

새로운 Vue 컴포넌트 생성

Vue.js 구성 요소는 일반적으로 .vue 파일에 저장됩니다. 각 구성 요소 파일은 세 가지 주요 섹션으로 구성됩니다. '<template>', '<script>', '<style>'. Greeting.vue이라는 간단한 구성 요소를 만들어 보겠습니다.

1. 프로젝트 폴더로 이동합니다: 터미널을 사용하여 Vue 프로젝트 디렉토리로 이동합니다:

cd my-vue-project

2. 새 구성 요소 파일 만들기: src/components 디렉토리에 Greeting.vue이라는 이름의 새 파일을 만듭니다.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

이 Greeting.vue 구성 요소에는 다음이 포함됩니다.

• <template>: 구성 요소의 HTML 구조를 정의합니다.
• <script>: 데이터 속성 및 메서드와 같은 구성 요소의 JavaScript 논리를 포함합니다.
• <style>: 이 구성 요소에 범위가 지정된 CSS 스타일을 포함합니다. scoped 속성은 스타일이 이 구성 요소에만 적용되도록 합니다.

구성 요소 사용

구성 요소를 만든 후에는 Vue 애플리케이션 내에서 사용해야 합니다. src/App.vue 파일을 열고 Greeting 구성 요소를 포함하도록 수정합니다.

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

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

이 업데이트된 App.vue 파일에서:

• 구성 요소 가져오기: import Greeting from './components/Greeting.vue';를 사용하여 Greeting 구성 요소를 가져옵니다.
• 컴포넌트 등록: export default 블록의 components 객체에 Greeting을 추가합니다.
• Component: 사용 앱에서 해당 구성 요소를 사용하려면 '<Greeting />' 태그를 '<template>' 섹션에 삽입하세요.

구성 요소 테스트

변경 사항을 저장하고 개발 서버가 실행 중인지 확인합니다. 브라우저를 열고 http://localhost:8080로 이동합니다. 페이지에 렌더링된 Greeting 구성 요소의 콘텐츠를 볼 수 있습니다.

결론

첫 번째 Vue.js 구성 요소를 성공적으로 만들고 사용했습니다. 구성 요소는 Vue.js 애플리케이션의 빌딩 블록으로, 사용자 인터페이스의 다양한 부분을 캡슐화하고 관리할 수 있습니다. Vue.js에 익숙해지면 구성 요소 prop, 이벤트, 라이프사이클 후크와 같은 고급 기능을 탐색하여 더욱 상호 작용적이고 복잡한 애플리케이션을 빌드할 수 있습니다.

Vue.js 컴포넌트를 계속 실험하고 지식을 넓혀서 동적이고 매력적인 웹 애플리케이션을 만들어 보세요.