Vue3 Component Library Archetype

Overview

The vue3-component-library-archetype is a scaffold for creating independent component libraries using Vue3 and Vite. It is designed to be customizable for both enterprise and personal use. The scaffold follows the monorepo style and uses pnpm as the package manager. It provides features for component development, building, and publishing, as well as documentation writing and creating demo examples. The technology stack used includes Vite 4, Vue 3, TypeScript, Vitepress 1.0, and ESLint.

Features

• Component Development: The scaffold provides a development environment for creating components.
• Building and Publishing: It allows for building and packaging the component library for release.
• Documentation Writing: The scaffold includes tools for writing documentation for the component library.
• Demo Example: It provides a demo example to showcase the components.
• CLI Component Creation: The scaffold provides a command-line interface for quickly creating new components.
• Local Development: It supports local development with live reloading for both components and documentation.

Installation

To install the vue3-component-library-archetype, follow these steps:

1. Clone the code repository to your local machine.
2. Install the dependencies using pnpm. If you don’t have pnpm installed, you can install it by following the instructions provided.
3. Start local development in the “example” folder to develop components using the command mentioned.
4. Access the development server at the specified address.
5. Start developing components in the component library documentation using the provided command.
6. Access the development server for the documentation.
7. Use the provided command to create a new component by following the prompts for component name, Chinese name, and type.
8. Build the documentation using the provided command. The built files will be located in the specified directory.
9. Build the example using the provided command. The built files will be located in the specified directory.
10. If needed, publish the component library to a local private server for testing. Start the private server and follow the instructions to access it in the browser.
11. Use the provided commands in the package.json file to perform various tasks related to development, building, and previewing.
12. Use the provided command to quickly create a new component by entering the component name, description, and type.
13. Use the provided command to start the verdaccio private server for local development and testing.
14. Use the provided command to publish the component library to the local private server.

Summary

The vue3-component-library-archetype is a scaffold that simplifies the process of creating independent component libraries using Vue3 and Vite. It provides a comprehensive set of features for component development, building, and publishing, as well as documentation writing and creating demo examples. With its monorepo style and use of pnpm, it offers a streamlined development experience. The scaffold’s extensive command-line interface allows for efficient development and testing workflows. Overall, it is a valuable tool for developers looking to create and release custom component libraries.