screenshot of ShotCat_doc




The shotCat_doc is a tool built on top of vuepress that helps users quickly create their own component library documentation. It is inspired by the element-ui documentation and provides features such as component display, code display, live demo, API table display, document version switching, and comment support. It aims to help users quickly prototype their component documentation by providing pre-configured settings and an out-of-the-box experience.


  • Component Display: Showcase your component library by displaying individual components.
  • Code Display: Display the code for each component, allowing users to easily understand how to use them.
  • Live Demo: Provide a live demo for each component, allowing users to interact with them directly.
  • API Table Display: Display the API documentation for each component in a tabular format, making it easy for users to find the information they need.
  • Document Version Switching: Allow users to switch between different versions of the documentation.
  • Comment Support: Support comments from users, providing a platform for discussions and issue tracking.


To install the shotCat_doc theme, follow these steps:

  1. Clone the project: git clone
  2. Navigate to the project directory: cd shotCat_doc
  3. Install dependencies: npm install (Note: It is recommended not to use cnpm to install dependencies as it may cause various issues. Instead, use the following command to solve slow download speeds: npm install --registry=
  4. Start the server: npm run dev
  5. Access the theme in your browser at: http://localhost:6868


The shotCat_doc is a powerful tool for quickly building component library documentation using Vue.js and vuepress. It provides a user-friendly interface and a range of features such as component display, code display, live demos, API table display, and comment support. By following the installation guide and leveraging the pre-configured settings, users can easily create their own component documentation from scratch. The project also offers comprehensive documentation with line-by-line explanations and pitfall avoidance, making it a valuable resource for developers.


Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.


VuePress is a minimalistic static site generator based on Vue.js that allows developers to create fast, SEO-friendly, and customizable documentation websites.


Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.