vue组件编写 组件库_用于记录Vue组件的库

vue组件编写 组件库

阐发 (Elucidate)

A library that makes it a breeze to "shed light" on your Vue component.

一个使“ Vue组件”上的“照明”变得轻而易举的库。

View demo 查看演示 Download Source 下载源

安装(纱线) (Installation (Yarn))

yarn add vue-elucidate

安装(在Vue项目中) (Installation (in a Vue project))

import Elucidate from 'vue-elucidate'
Vue.use(Elucidate)

用法 (Usage)

<elucidate :component="button" :example="example"></elucidate>

The <elucidate> component takes two props, component and example.

<elucidate>组件采用两个道具， component和example 。

The former is, quite literally, a single Vue component (either imported into your current app, or defined inline), or an array of Vue components.

从字面上看，前者是单个Vue组件(要么导入到当前应用程序中，要么内联定义)，或者是Vue组件数组。

The latter is either a single example object shaped thusly, or an array of example objects shaped thusly:

后者可以是这样成形的单个示例对象，也可以是这样成形的示例对象数组：

Key	Value
markup	An HTML code snippet that you would like to document
props	An object defining the props referenced by your HTML code snippet
methods	An object defining the methods referenced by your HTML code snippet
name	(OPTIONAL) A display name for the given component if part of an array of examples

键	值
markup	您要记录HTML代码段
props	定义HTML代码段引用的props的对象
methods	定义HTML代码段引用的方法的对象
name	(可选)给定组件的显示名称(如果是示例数组的一部分)

它是如何工作的？ (How does it work?)

Let's assume you have a component named custom-button. It's defined in custom-button.vue thusly:

假设您有一个名为custom-button的组件。 因此，它在custom-button.vue中custom-button.vue ：

<template>
  <button :class="classList">
    <slot></slot>
  </button>
</template>

<script>
  export default {
    name: 'custom-button',
    props: {
      variant: {
        type: String,
        default: 'primary'
      },
      size: {
        type: String,
        default: 'medium'
      }
    },
    computed: {
      classList () {
        return `btn-${this.variant} btn-${this.size}`
      }
    }
  }
</script>

<style>
  .btn-primary {
    background: blue;
    color: white;
  }

  .btn-small {
    font-size: 12px;
  }
</style>

Elucidate works by:

通过以下方式阐明作品：

• Rendering an example code snippet, e.g., <custom-button size="small">Hello</custom-button>

  呈现示例代码段，例如<custom-button size="small">Hello</custom-button>

• Documenting that snippet, as well as any props/functions that were passed to it

  记录该代码段以及传递给它的任何道具/功能

• Documenting all of the props exposed by <custom-button>, in this case variant and size.

  记录由<custom-button>公开的所有道具，在这种情况下为variant和size 。

So, the following code:

因此，以下代码：

<elucidate :component="button" :example="example"></elucidate>

import CustomButton from '@/components/CustomButton'
import '@/darcula.css'

export default {
  data () {
    return {
      button: CustomButton,
      example: {
        markup: `<custom-button size="small">Hello</custom-button>`
      }
    }
  }
}

...would produce the following result:

...将产生以下结果：

客制化 (Customization)

Elucidate is very customizable. I've included some light CSS here and there to make things look half-way decent. Here are a few guidelines for customization.

阐明是非常可定制的。 我在这里和那里都添加了一些简单CSS，以使事情看起来像样的。 以下是一些自定义准则。

BYOCSS (BYOCSS)

Elucidate uses Prism JS for syntax highlighting. Elucidate doesn't ship out-of-the-box with a particular syntax highlighting theme, so feel free to pick one from Prism Themes

Elucidate使用Prism JS进行语法突出显示。 Elucidate并没有附带特定的语法突出显示主题，因此请随时从Prism Themes中选择一个

默认CSS (Default CSS)

Include Elucidate's default styles by including the following line of code in your project:

通过在项目中包含以下代码行来包含Elucidate的默认样式：

import 'vue-elucidate/dist/style.css'

Elucidate maintains a light footprint, and affords you the following classes for purposes of customization:

Elucidate保持较小的占用空间，并为您提供以下用于自定义目的的类：

.elucidate-example-picker {}

.elucidate-example-picker label {}

.elucidate-select {}

.elucidate-select select {}

.elucidate-select::after {}

@supports (-webkit-appearance: none) or (appearance: none) or ((-moz-appearance: none) and (mask-type: alpha)) {
  .elucidate-select::after {
  }

  .elucidate-select select {}

  .elucidate-select select:focus {}
}

.elucidate-preview {}

.elucidate-tabs {}

.elucidate-tabs .nav-tabs {}

.elucidate-tabs .tab {}

.elucidate-tabs .tab:hover {}

.elucidate-tabs .tab.active {}

.elucidate-tabs .tab:not(:last-of-type) {}

.elucidate-tabs .tab a {}

.elucidate-table-wrap {}

.elucidate-table {}

.elucidate-table th {}

.elucidate-table td {}

去做 (To-Do)

• [ ] Test Coverage

  []测试范围

• [x] Accommodate multiple components in a single example

  [x]在一个示例中容纳多个组件

• [x] Accommodate multiple examples

  [x]容纳多个例子

• [ ] Investigate slot-based API for further customization of sub-components

  []研究基于插槽的API，以进一步自定义子组件

翻译自: https://vuejsexamples.com/a-library-for-documenting-vue-components/

vue组件编写 组件库