[vue] vue tutorial 뷰 튜토리얼 -2- (뷰 컴포넌트 쪼개기)

소스코드 첨부합니다(https://github.com/jaeho310/vue-tutorial)

목차

vue tutorial -1- (뷰 시작하기)

vue tutorial -2- (컴포넌트와 인스턴스)

vue tutorial -3- (앱바 만들기)

vue tutorial -4- (props 사용하기)

vue tutorial -5- (뷰 라우터 사용하기)

vue tutorial -6- (뷰티파이 테이블)

 

 

이번 게시글에서는 vue로 컴포넌트를 쪼개서 랜더링 시키는 방법과 vue 기본 생김새를 정리합니다.

 

1.  프로젝트 구조

|-- App.vue
|-- assets
|   |-- logo.png      
|   `-- logo.svg      
|-- components        
|   `-- core
|       |-- AppBar.vue
|       |-- Footer.vue
|       `-- View.vue
|-- main.js
`-- plugins
    `-- vuetify.js

src 디렉토리 내부를 이런식으로 변경해줍니다.

(1). Helloworld.vue 삭제

(2). core 디렉토리 생성

(3). core 디렉토리 아래에 AppBar.vue, Footer.vue, View.vue를 생성

 

2. main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

우리 애플리케이션의 시작점입니다.

뭔가 복잡하지만 Vue 인스턴스를 생성해주고 App.vue를 렌더링 시킨다는 내용입니다.

저번 게시글에서 추가했던 vuetify도 인자로 추가된게 보입니다.

 

3. App.vue

<template>
  <v-app>
    <core-app-bar />
    <core-view />
    <core-footer />
  </v-app>
</template>

<script>
import CoreAppBar from '@/components/core/AppBar'
import CoreView from '@/components/core/View'
import CoreFooter from '@/components/core/Footer'

export default {
  name: 'App',
  components: {
    CoreAppBar,
    CoreView,
    CoreFooter
  },
};
</script>

main.js에서 가져가서 랜더링 시키는 최초의 vue 파일 입니다.

 

(1). template 태그

html을 작성하는 곳입니다.

core-app-bar, core-view, core-footer를 순서대로 넣어줍니다.

해당태그는 원래 html에 존재하는 태그가 아닙니다.

vue파일을 컴포넌트로 쪼개서 넣어준 것입니다.

(3)까지 완료해야 동작합니다.

(thymeleaf의 fragment나 innerhtml과 비슷한 느낌입니다)

(2). script 태그

자바스크립트의 내용이 들어가는 곳입니다.

export default 로 vue인스턴스를 외부로 던져줘야 됩니다.

 

(3). vue 인스턴스

해당 파일에는 name과 components라는 인스턴스를 사용하였습니다.

components안에 들어가는 내용은 아까 생성했던 vue파일을 import 해서 넣어줍니다.

해당 작업을 완료하면 template태그안에 존재하는 core-view 같은 태그를 내 vue파일로 인식합니다.

 

컴포넌트들은 파스칼 케이스로 가져오고 html에 넣을때는 케밥케이스로 넣는게 컨벤션입니다.  

 

4. AppBar.vue, Footer.vue, View.vue

<template>
</template>

<script>
export default {

}
</script>

<style>

</style>

 

해당 내용을 복사해서 넣어 줍니다.(vscode의 vetur 플러그인을 사용하면 자동완성 기능을 사용할 수 있습니다)

 

이제 template태그안에 각각

<p>앱바</p>

<p>뷰</p>

<p>푸터</p>

라고 작성합니다.

 

AppBar.vue, Footer.vue, View.vue들을 App.vue라는 상위 컴포넌트에서 가져가서 html에 표현해놨으므로

브라우저는 앱바 뷰 푸터 라는 글자를 랜더링 해 주게 됩니다.

 

각각의 vue 파일에서 export default로 외부로 던져줬기에 App.vue 파일에서 import 할수 있습니다.

5. 브라우저에서 확인

$ npm run serve 명령어를 입력해 프론트 서버를 띄우고

웹 브라우저에서 localhost:8080으로 접근합니다. 

App.vue에 세개로 쪼개놓은 컴포넌트가 정상적으로 랜더링 된걸 확인할 수 있습니다.