Vue 3에 SwaggerUI를 통합하고, 제다이 개발자처럼 확장하세요

Vue 3 애플리케이션에 Swagger UI를 통합하는 과정은 패키지를 설치하고 Vue 애플리케이션에서 초기화하는 것을 포함합니다. SwaggerUI 패키지는 UI에 SwaggerUI를 마운트하기 전에 DOM이 완전히 렌더링되었는지 확인하기 위해 `onMounted` 라이프사이클 훅에서 초기화됩니다. SwaggerUI 인스턴스는 Open API 스펙 파일 또는 서버 URL로 구성할 수 있습니다. 사용자 정의 플러그인을 만드는 것은 기존 UI 컴포넌트를 래핑하거나 새로운 컴포넌트를 생성하여 SwaggerUI를 사용자 정의하는 것을 포함합니다. SwaggerUI는 React를 기반으로 구축되었으므로 플러그인도 React로 구축해야 합니다. 플러그인 구조는 래핑할 컴포넌트를 포함하는 객체를 반환하는 함수를 생성하는 것을 포함합니다. Vue 애플리케이션과 플러그인 간의 상태를 동기화하려면 새로운 상태가 정의되고, 문자를 설정하기 위해 액션이 디스패치됩니다. 그런 다음, 상태는 스토어에서 선택되어 `CharacterCard` 컴포넌트를 렌더링하는 데 사용됩니다. 플러그인의 타입을 지정하려면 `tsconfig.json` 파일을 구성하여 합성 기본 가져오기 및 `esModuleInterop`을 허용해야 합니다. 마지막으로, SwaggerUI 인스턴스 및 시스템 매개변수의 타입을 지정하려면 SwaggerUI 인스턴스 및 시스템 매개변수에 대한 인터페이스를 생성합니다.