Vue의 어셈블리 모드

이 기사는 Advent Calendar사의 2021일 보도입니다.
이번에는 회사 내에서 자주 사용하는 Vue 구성 요소의 분할 모델에 대해 설명합니다.
마지막으로 책임과 의무를 총결하기 위해 구성 요소를 분리한다.
아래에 열거한 것은 그 책임과 의무의 한 기준을 고려해 주십시오.
나는 네가 구성 요소를 어떻게 분류하는지 판단하는 데 도움을 줄 수 있다면 좋겠다고 생각한다.
스타일 구성 요소
는 스타일을 제공하는 어셈블리입니다.border와color 등 외관 관련 요소.

구성 요소 레이아웃
레이아웃의 구성 요소를 제공합니다.flex의 설정과margin 등 레이아웃과 관련된 요소.

<!-- 以下に上げるclassはtailwindcssに準拠します -->
<template>
  <div class="flex flex-col items-start">
    <div class="w-full">
      <slot name="header" />
    </div>
    <div class="w-full">
      <slot name="content" />
    </div>
  </div>
</template>

기능 구성 요소
는 기능을 제공하는 구성 요소입니다.
학생들로 하여금 동작과 통제와 관련된 요소를 갖추게 하다.
이것은 스크립트만 기술하면 완성되기 때문에 Vue3에서 Composition API를 사용하면 구성 요소를 만들 필요조차 없을 수 있습니다.

function useRequestButton(action: () => Promise<void>) {
  const disabled = ref(false);

  async function onClick() {
    try {
      disabled.value = true;
      await action();
    } finally {
      disabled.value = false;
    }
  }

  return {
    disabled,
    onClick,
  };
}

단일 입력 구성 요소
는 특정 프로젝트에 대해 특별히 제작된 입력 어셈블리입니다.
선택 목록의 입력 항목은 각 항목에 표시 이름, 순서 및 값 요소가 있으므로 임시 어셈블리로 잘라냅니다.

구성 요소 보기
간단한 디스플레이 처리를 하는 구성 요소

창 구성 요소 입력
입력 창의 구성 요소로
새 로그인, 화면 편집 등에 사용됩니다.
새로 등록하고 편집할 때 같은 항목을 요구하는 경우가 많기 때문에 기본적으로 모두 사용할 수 있다.

전환 구성 요소 표시
조건에 따라 어셈블리를 표시하는 어셈블리를 전환합니다.
예를 들어 참고 모드, 편집 모드와 전환을 실현하는 데 사용된다.

<template>
  <ComponentA v-if="type==='a'" />
  <ComponentB v-else-if="type==='b'" />
  <ComponentC v-else-if="type==='c'" />
</template>

목록 항목 구성 요소v-for에서 중복된 어셈블리입니다.
탁자의 한 줄 등은 이것과 맞먹는다.
데이터가 많으면 구성 요소를 잘라내지 않으면 관리가 어려워집니다.

Organisms 구성 요소
나는 아토믹 디자인의 이름을 빌렸다.
어느 정도 통일된 구성 요소입니다.
화면 디자인에서 어느 정도 통일된 요소를 정리했다.
페이지 구성 요소
이것은 페이지의 주요 구성 요소입니다.
Router를 등록한 것은 이 구성 요소입니다.
마지막으로 모두 이곳에 집중할 것이다.