[Vue.js][Single-File Components] 6. 원래 있던 프로젝트 구조 설명, Vue Component 사용 단계 ★

 

< 원래 있던 프로젝트 구조 설명 >

레고를 하나하나 쌓아가는 것처럼 페이지 만들기 

 

# App.view 

원래 있던 파일 내용 설명 

 

 

# icons

이미지 하나하나를 component로 나눴다 

---

▶ 컴포넌트 사용 단계

0. 사전 준비 1. 컴포넌트 파일 생성 2. 컴포넌트 등록 (import) 3. 결과 확인 4. 추가 하위 컴포넌트 등록 후 활용

---

0. 사전 준비

초기에 생성된 모든 컴포넌트 삭제 (App.vue 제외)

App.vue 코드 초기화

 

1. 컴포넌트 파일 생성

MyComponent.vue 생성

 

2. 컴포넌트 등록

App 컴포넌트에 MyComponent 등록

App(부모) -MyComponent(자식) 관계 형성 "@"는 "src/" 경로를 뜻하는 약어

 

3. 결과 확인 

Vue dev tools를 사용해 컴포넌트 관계 형성을 확인한다

 

4. 추가 하위 컴포넌트 등록 후 활용

MyComponentItem은 MyComponent의 자식 컴포넌트이다

컴포넌트의 재사용성 확인하기

 

 

* 참고 

Component 이름 지정 스타일 가이드 

(컴포넌트 이름 지을 때 규칙)

https://vuejs.org/style-guide/rules-strongly-recommended.html

Vue.js

 

---

* 참고