[Vue] Vue 컴포넌트 구성해보기
저번 시간에 Vue 프로젝트를 간단하게 만들어 봤으며
[Vue] Vue 란? (프로젝트 생성 까지)
구글에 검색해보면 오픈소스 프로그레시브 자바스크립트 프레임워크 라고 나오는것을 볼 수 있다. 하나씩 보자면 - 오픈 소스 : 무료 - 프로그레시브 : 진보적인 , 앞서 나아가는 - 자바스크립트
co-de.tistory.com
이번 시간에는 컴포넌트를 구성 하는 실습을 진행해보자!
컴포넌트는 화면을 구성하는 단위로 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
})