What is a component library?

In my opinion, a complete system consisting of a collection of components, component analysis, component compilation package, component documentation, and component examples can be called a component library.

When do you need to build your team’s own component library?

  1. Third-party component libraries are insufficient for front-end business scenarios.
  2. When there are objections to third-party components or bugs, raising an issue requires long feedback and iteration cycles.
  3. The front end team has encapsulated multiple business components based on the business.
  4. The front-end project has reached the point where a dedicated repository maintains component code and outputs it as documentation.

rayx-ui

Rayx-ui, a vUE-oriented component library scaffolding, is also introduced today. All you need to do is develop components according to the documentation specification, write markdown, write examples, and then execute commands to generate documentation, package and compile.

Advantages:

  1. Simple and easy to use, significantly reduce the front end team to build component library threshold.
  2. The document page is developed by VUE, and developers can completely transform the layout freely in it. The corresponding component data of the page is completely generated by Builder, and there is no strong relationship with the page.
  3. Quickly categorize components by adding comments in Markdown.
  4. Quick generation of props, methods description

Quick learning

Cloning of warehouse

git clone https://github.com/WangXueZhi/rayx-ui.git
Copy the code

Install dependencies

Yarn or NPM ICopy the code

Create components from the built-in templates

npm run create -- --name=compnent-name
Copy the code

Component naming rules, we use all lowercase components, such as: Button, for multi-word names, must use kebab-case for components such as my-component. Use the command to create a small hump, a large hump, or a dash, which internally converts to a dash

Note:

  1. If you only need to display documents, write Markdown in the components directory. Other files can be deleted. This directory will not be packaged as a component.
  2. If you do not need to display documents, simply add a component and delete the MD file in the component directory. No document will be generated for the component.

Start the component development service

Yarn dev or NPM run devCopy the code

Component document

Development of the document

Have to build a team component library of small partners quickly take to try it, like words to give a thumbs-up, add a star to the project github.com/WangXueZhi/…