[Vue] Vue 컴포넌트 구성해보기

저번 시간에 Vue 프로젝트를 간단하게 만들어 봤으며

[Vue] Vue 란? (프로젝트 생성 까지)

이번 시간에는 컴포넌트를 구성 하는 실습을 진행해보자!

컴포넌트는 화면을 구성하는 단위로 3가지 컴포넌트를 만들어 볼 예정이다.

- Header.vue

- Menu.vue

- Content.vue

우선 프로젝트에서 생성된 App.vue 파일은 최상위 컴포넌트로 해당 컴포넌트에서 3개의 컴포넌트를 불러와 배치 할 것이다.

우선 vue 파일 구성을 보면 아래와 같이 세가지로 나뉘며 각각 기능에 맞게 개발하면 된다.

- <template> : html

- <script> : script

- <style> : style

프로젝트 구조중에 components 디렉토리에 세가지 컴포넌트를 생성한다.

App.vue

<template>
  <div>
    <Header/>
  </div>
  <div class="wrap">
    <Menu/>
    <Content/>
  </div>
</template>

<script>
  import Header from "@/components/Header";
  import Menu from "@/components/Menu";
  import Content from "@/components/Content";

export default {
  name: "app",
  components: {
    Header,
    Menu,
    Content
  }
}
</script>

<style>
  .wrap{
    display: flex;
  }
</style>

 <script> 부분의 경우

import 는 컴포넌트를 import 하는 부분이며 @는 src 경로를 의미한다.

- import [원하는명칭] from [컴포넌트경로]

export default 부분에서는 components 에서 선언한 컴포넌트를 등록해주어야 <template> 에서 사용 가능하다.

<template> 부분의 경우

<컴포넌트명/> 으로 컴포넌트를 배치 할 수 있으며 원하는 형태에 맞게 html 을 작성한다.

<style> 부분의 경우

css 를 정의해주면 되며 display 를 flex 로 설정하여 컴포넌트에 설정된 flex 값에 따라 비율을 조정하여 나타낸다.

Menu.vue

<template>
    <div>Menu Component</div>
</template>

<script>
    export default {
        name: "Menu"
    }
</script>

<style scoped>
    div {
        flex: 1;
    }
</style>

Header.vue

<template>
    <div>Header Component</div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style scoped>
div{
    position: sticky;
    height: 50px;
    border-bottom: 1px solid gray;
}
</style>

Content.vue

<template>
    <div>Content Component</div>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>
div {
    flex: 2;
}
</style>

각각 컴포넌트를 구현하고 완성된 화면은 아래와 같다.

# 오류 

1) Component name "Menu" should always be multi-word  vue/multi-word-component-names
- 원인 : Component 명을 단어의 조합으로 만들지 않아서 생기는 이슈
- 해결 : 단어의 조합으로 이름을 만들거나 단어의 조합으로 생성하지 않아도 되도록 설정
// vue.config.js
- lintOnSave : false 로 설정
설정 후에는 재기동 해야 적용 된다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})