컴포넌트

UI(HTML , CSS , JS)를 재사용할 수 있도록 정의한 것

컴포넌트 만들기

컴포넌트 정의 → 컴포넌트 등록 → 컴포넌트 사용

컴포넌트 정의

1. 문자열 템플릿

   // BookComponent.js 파일
   export default {
     data() {
       return {
         subtitle: '도서명'
       }
     },
     template: `
       <article class="book">
         <div class="book__subtitle">{{ subtitle }}</div>
         <div class="book__title">
           HTML 강좌
         </div>
       </article>
     `
   }

2. Single File Component

• .js는 HTML과 Javascript는 모듈화 할 수 있지만 css는 빠져있음

• 문자열 템플릿은 가독성이 떨어짐

• template script style 로 구성

  // BookComponent.vue 파일
  <template>
    <article class="book">
      <div class="book__subtitle">{{ subtitle }}</div>
      <div class="book__title">
        HTML 강좌
      </div>
    </article>  
  </template>
  
  <script>
  export default {
    data() {
      return {
        subtitle: '도서명'
      }
    },
  }
  </script>
  
  <style scoped>
  </style>

컴포넌트 등록

1. 전역등록

   app.componet를 이용해서 애플리케이션 전역에서 사용할 수 있도록 설정

   const app = createApp({ ... })
   app.component('BookComponent', BookComponent)

2. 지역등록

• vue인스턴스의 component 속성 안에 정의

• 해당 Vue인스턴스에서 지역 등록된 컴포넌트 사용

  const app = createApp({
  	components: {
  		BookComponent: BookComponent
  	}
  })

컴포넌트사용

• PascalCase OR kebab-cased

<BookComponent></BookComponent>
<book-component></book-component> 

프로젝트 구성

Vue 설치방법

1. 페이지에 CDN 으로 import

   <script src="https://unpkg.com/vue@next"></script>
   <!-- 또는 -->
   <script src="https://unpkg.com/vue@3.2.31"></script>

2. npm을 사용하여 import

   npm install vue@next

3. CLI를 사용하여 프로젝트의 기본구성을 완료한 상태에서 프로젝트 구성

• Vue CLI

  • 현재는 유지관리 모드라서 비추

• Vite

  npm init vue@latest

  cd {product name}
  npm install
  npm run dev

ESlint,Prettier

• ESLint : ESLint는 코드 검사기로 코드에 에러가 있는지 검사해주 도구 입니다.
• Prettier : Prettier는 코드 포매터로 코드를 일관성있고 예쁘게 정렬해 주는 도구입니다.