Component Level

Component VUE

컴포넌트는 4가지로 레벨링을 한다.

Element Component

최소단위의 Component이며 Stand Alone Component입니다. (-Sa suffix 생략)

해당 Componet는 다른 곳에서 Import 해서 쓸 수 있지만 수정사용은 불가합니다.

예: Button, Input,

Naming Convention: { FileName }El.vue

  1. Element Component만 Import할 수 있다. ??
  2. Block Component / 최상위 Component에서 재사용이 가능하다.

Block Component

예: Modal, Card, Drawer, Form 등

Naming Convention: { FileName }Bl.vue / { FileName }BlSa.vue

  1. Element Component를 Import 할 수 있다.
  2. Block Component는 Import 할 수 없다.
  3. 최상위 Component에서 재사용 가능하다.

Alliance Component

예:

Naming Convention: { FileName }Al.vue / { FileName }Sa.vue

  1. 작성필요

Article Component

ComponentView 바로 아래 레벨의 Component이며, Component하나로서 독립적인 역할을 합니다.

Naming Convention: { FileName }.vue / { FileName }Sa.vue

예: Dashboard.vue

  1. Element Component를 Import 할 수 있다.
  2. Block Component를 Import 할 수 있다.
  3. 다른 최상위 Componentfmf Import 할 수 없다.
  4. View파일 에서만 재사용되어 사용된다.

참고 {File Name }Bl.vue 뒤에 SA(Stand Alone)을 붙이면, 해당 파일은 다른곳에서 Import해서 스타일링을 할 수 없습니다. 무조건 SA내부에서만 스타일링이 가능합니다.

View Component VUE

layout이 주 목적인 Component 파일입니다.

Naming Convention: { FileName }View.vue

예: DashboardView.vue

Root Component VUE

App.vue 파일이다.

view 파일만 Import할 수 있다.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *