构建vue组件库脚手架_Vue.js的原型组件库构建

构建vue组件库脚手架

原语 (Protovue)

A prototyping component library.

原型组件库。

入门 (Getting Started)

• Hacker Noon Tutorial

  黑客中午教程

• Protovue Examples

  原型实例

组件 (Components)

格 (Grid)

<v1-grid />
<v1-grid size="8x8" /> // Default: 12x10
<v1-grid gap="0" /> // Default: 10
<v1-grid guides /> // Shows guides to help build cells
<v1-grid flat /> // Makes all cells flat (no background)

细胞 (Cell)

<v1-cell />
<v1-cell size="2x4" /> // WxH: size="2,4" and size="2 4" also work
<v1-cell x="1" /> // Default: 0
<v1-cell y="3" /> // Default: 0
<v1-cell flat /> // Removes background color
<v1-cell middle /> // Vertically aligns content in middle
<v1-cell bottom /> // Vertically aligns content in bottom
<v1-cell border /> // Adds border to all sides of cell
<v1-cell borderTop /> // Adds border to top of cell
<v1-cell borderRight /> // Adds border to right of cell
<v1-cell borderBottom /> // Adds border to bottom of cell
<v1-cell borderLeft /> // Adds border to left of cell

文本 (Text)

<v1-text />
<v1-text rows="5" /> // Default: 3
<v1-text center /> // Centers rows
<v1-text justify /> // Makes rows full width

图片 (Image)

<v1-image />
<v1-image width="100px" /> // Default: 100%
<v1-image height="100px" /> // Default: 200px
<v1-image round /> // Makes circle if width equals height
<v1-image center /> // Centers horizontally

头像 (Avatar)

<v1-avatar />
<v1-footer count="5" /> // Default: 1

导航 (Nav)

Works best in a vertically narrow cell

在垂直狭窄的单元中效果最佳

<v1-nav />
<v1-nav links="5" /> // Default: 4

页脚 (Footer)

Works best in a vertically narrow cell

在垂直狭窄的单元中效果最佳

<v1-footer />
<v1-footer links="5" /> // Default: 4

图表 (Chart)

Shows a filled line chart.

显示实线图。

<v1-chart />
<v1-chart height="300" /> // Default: 200
<v1-chart margin="100" /> // Horizontal margin, Default: 50

介绍 (Intro)

Shows a model explaining the prototype. Helps your users get into the right mind set.

显示一个解释原型的模型。 帮助您的用户进入正确的思维模式。

Works best if you include it before <v1-grid>.

如果在<v1-grid>之前包含它，则效果最好。

<v1-intro title="Testing Feature {X}" version="v1">
  <p>Imagine your job title is {A} while working for company {B}. This prototype explores a solution for problem {C}.</p>
  <p>Please take it for a test run. Then we'd like to know if you\'re excited about this direction and if you've got any feedback or ideas.</p>
  <p>Thanks for your input!</p>
</v1-intro>
<v1-grid />

翻译自: https://vuejsexamples.com/a-prototyping-component-library-build-for-vue-js/

构建vue组件库脚手架