Vue 애플리케이션의 구성 요소에 대한 감독을 놓친 적이 있습니까?



이 경우 구성 요소를 문서화하는 데 확실히 신경을 써야 합니다. 첫 번째 아이디어는 무엇입니까? Wiki에서 페이지를 시작하고 각 구성 요소가 수행하는 작업을 기록하십시오. 그러나 이것은 사람들이 문서 업데이트를 잊는 경향이 있기 때문에(또는 나처럼 원하지 않기 때문에) 최선의 접근 방식이 아닐 수 있습니다.



그렇다면 코드에서 직접 매끄러운 문서 페이지를 자동으로 생성하지 않는 이유는 무엇입니까? 하지만 어떻게?



괜찮아요! vuese는 당신의 등을 가지고 있습니다. 구성 요소에 대한 문서를 자동 생성하고 깔끔하고 간단한 html 페이지로 렌더링할 수 있습니다.

보기 / 보기

🤗 vue 컴포넌트 문서화를 위한 원스톱 솔루션. 원본 조직: https://github.com/vuese

보기

vue 컴포넌트 문서화를 위한 원스톱 솔루션

이 프로젝트는 당사Backers에서 지원합니다.

문서

자세한 문서: vuese.org

개요

Vuese vue 구성 요소에 대한 문서를 자동으로 생성하고 다양한 요구 사항을 충족하는 구성 요소 문서를 생성하기 위한 다양한 솔루션을 제공합니다.

@vuese/cli

@vuese/cli은 사용이 매우 간편한 명령줄 도구입니다. vue 구성 요소에 대한 문서 사이트를 빠르게 구축하거나 markdown 구성 요소에 대한 vue 문서를 생성하려는 경우 이 도구를 선택하는 것이 좋습니다. 세부 사항으로 이동하십시오: @vuese/cli

@vuese/파서

@vuese/parser 모듈은 vue 구성 요소에 대한 파서이며, @vuese/cli은 @vuese/parser 모듈을 통해 vue 구성 요소를 내부적으로 구문 분석하고 원하는 정보를 추출합니다. @vuese/parser 모듈에서 제공하는 인터페이스로 더 많은 고급 작업을 수행할 수 있습니다. API 설명서를 보려면 @vuese/parser으로 이동하십시오.

온라인 경험

다음을 방문하십시오 👇…

View on GitHub

다음과 같이 설치하여 지금 바로 Vue 프로젝트에 추가할 수 있습니다.

npm install -g @vuese/cli 

그런 다음 vuese를 실행하여 문서를 생성합니다.

vuese gen

그게 다야, 맹세해 🙌🏻

이제 어떻게 작동하는지 살펴보겠습니다.

다음 구성 요소가 있다고 상상해보십시오.

<template>
  <div>
    <!-- Form header -->
    <slot name="header">
      <!-- `<th>title</th>` -->
      <th>title</th>
    </slot>
  </div>
</template>

<script>
// This is a description of the component
export default {
  name: 'TestComponent',
  props: {
    // The name of the form, up to 8 characters
    name: {
      type: [String, Number],
      required: true,
      validator () {}
    }
  },
  methods: {
    // @vuese
    // Used to manually clear the form
    clear () {
      // Fire when the form is cleared
      // @arg The argument is a boolean value representing xxx
      this.$emit('onclear', true)
    }
  }
}
</script>

이렇게 하면 다음과 같은 깔끔한 html 페이지가 생성됩니다.



vuese는 슬롯, 소품, 메서드 및 이벤트에서 그리고 코드에서 직접 구성 요소 자체에 대한 데이터 및 주석을 검색합니다. 보시다시피 name 소품에서 유형 및 필수 상태도 추출합니다.

여기에서 결과를 확인할 수 있습니다: https://berniwittmann.github.io/vuese-demo/index.html

주석을 가지고 놀면서 얼마나 간단한지 느낄 수 있는 작은 저장소도 만들었습니다.

베르니비트만 / vuese 데모

Vue 구성 요소용 Vuese 문서 생성의 짧은 데모

vuese로 Vue 구성 요소를 위한 빠르고 쉬운 문서 생성 - 데모

이 저장소는 Vue.js 구성 요소에 대한 구성 요소 문서를 생성하는 도구vuese의 짧은 데모입니다.

The accompanying blog post can be found on

결과

설정

종속성 설치

npm install

문서 생성

다음을 실행하여 문서 생성

npm run docs

View on GitHub


따라서 구성 요소 문서를 재미있게 만들고 자세한 내용은 vuese.org을 확인하십시오.

읽어 주셔서 감사합니다. 이것은 제 첫 번째 블로그 게시물이기 때문에 몇 가지 피드백에 대해 기쁘게 생각합니다 💪🏻