Vue 기반 ui 구성 요소 라이브러리 개발 방법

Vue 기반 ui 구성 요소 라이브러리 개발 방법
 
개발 모델
데모 미리 보기
ui 구성 요소 라이브러리를 개발할 때 데모를 미리 보고 코드를 수정해야 합니다.
흔히 볼 수 있는 해결 방안은 일반 프로젝트를 개발하는 것처럼 webpack-dev-server 미리 보기 구성 요소를 사용하거나 vue-cli를 통해 프로젝트를 초기화하거나 스크립트를 직접 설정하는 것이다.
문예는 parcel 데모의 개발 설정을 간소화하는 데 사용될 수 있다. (예: muse-ui)
프레젠테이션 문서
ui 구성 요소 라이브러리로서, 자신의 구성 요소가 문서를 보여 주어야 합니다.
일반적으로 업계에서 흔히 볼 수 있는 방안은 스스로 전시 문서를 개발하는 것이다.
그러나 이렇게 하면 구성 요소 라이브러리와 문서가 어떻게 동기화되는지 문제를 가져올 수 있다.
왜 vuepress를 사용하지 않습니까?
vuepress는markdown에 구성 요소를 삽입하는 것을 지원하기 때문에 우리는 문서를 작성하면서 구성 요소를 개발할 수 있습니다.
개발 절차상 문서 설명을 먼저 쓰고 코드를 구체적으로 작성해 구성 요소 기능을 실현할 수도 있다.이렇게 하면 문서가 미리 보기 데모로 구성 요소 개발과 동기화하여 업데이트할 수 있습니다.
p.s. React의 구성 요소 문서는 다음 두 라이브러리를 시험해 볼 수 있습니다.
  • docz
  • doc-scripts

  • 유형 선언
    개발과 사용 과정에서 만약에 일부 대상, 방법의 매개 변수에 대해 스마트하게 제시할 수 있다면 좋지 않겠는가?
    어떻게 실현합니까?
    사실은 해당 폴더에 구성 요소와 관련된 형식 설명 ((*.d.ts) 을 추가하고 src/index.d.ts 을 통해 내보냅니다.
    {
        "typings": "src/index.d.ts",
    }

    처음에 성명 파일을 모두types/ 폴더 아래에 있지만 실천에서는 현재 폴더 아래에 두는 것이 좋다고 생각합니다.한편으로는 유지보수에 유리하고, 다른 한편으로는 원본 코드를 읽을 때도 유형 알림이 있다.
    어떻게 포장합니까
    패키지 도구
    패키지 라이브러리와 마찬가지로 롤러를 선택했습니다.
    단일 파일 구성 요소
    개발 중에 *.vue 이런 단일 파일 구성 요소로 개발할까요?
  • muse-ui는 전혀 쓰지 않습니다
  • 좋은 웹페이지 즐겨찾기