Component VUE
컴포넌트는 4가지로 레벨링을 한다.
Element Component
최소단위의 Component이며 Stand Alone Component입니다. (-Sa suffix 생략)
해당 Componet는 다른 곳에서 Import 해서 쓸 수 있지만 수정사용은 불가합니다.
예: Button, Input,
Naming Convention: { FileName }El.vue
- Element Component만 Import할 수 있다. ??
- Block Component / 최상위 Component에서 재사용이 가능하다.
Block Component
예: Modal, Card, Drawer, Form 등
Naming Convention: { FileName }Bl.vue / { FileName }BlSa.vue
- Element Component를 Import 할 수 있다.
- Block Component는 Import 할 수 없다.
- 최상위 Component에서 재사용 가능하다.
Alliance Component
예:
Naming Convention: { FileName }Al.vue / { FileName }Sa.vue
- 작성필요
Article Component
ComponentView 바로 아래 레벨의 Component이며, Component하나로서 독립적인 역할을 합니다.
Naming Convention: { FileName }.vue / { FileName }Sa.vue
예: Dashboard.vue
- Element Component를 Import 할 수 있다.
- Block Component를 Import 할 수 있다.
- 다른 최상위 Componentfmf Import 할 수 없다.
- 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할 수 있다.
Leave a Reply