Overview

This project is primarily for learning purposes, but you can also use it as a basic template to modify. If it is helpful to you, please contribute your star, thank you! The project is mainly used for learning purposes, and special features can be modified by yourself. Each branch of this project only contains the necessary initial features and will make necessary error updates without adding major updates, ensuring that the code in the article is consistent with the code in the repository. Each branch of this project is a relatively independent feature, and each implementation does not represent the best solution. You can refer to it as needed or implement another solution. The code in this project is executable in the current version, but errors may occur due to destructive upgrades caused by dependencies (you can provide feedback on upgrading dependencies). The tools or libraries mentioned in this series of articles need to be researched and learned in advance, and there is no detailed introduction on how to use them from scratch. Some learning materials will be provided. Due to not often writing articles, my writing skills are limited. Please forgive me for the parts that are not well written, but I still have confidence in the code quality. You can find all the latest content in the "喵呜~工程化" column, and you can also see the column directory in the right navigation of Juejin. In Chapter 01, we use ESLint, StyleLint, TypeScript ESLint, and other tools and tool plugins to build the code specifications of the project and design them into a shared preset configuration. This allows your team to share the same code specifications. Of course, we will also add submission specification tools such as Husky, Commitlint, and Lint Staged to the project. In Chapter 02, we use VuePress to build component documents, and we will implement a parsing plugin ourselves to achieve component effect display, making it convenient for you to implement various custom requirements. If you prefer VitePress, there will be a separate implementation for you to switch and choose later. In Chapter 03, we extend a component (SFC + TSX) based on the Vant component library. The reason for choosing to extend a component library is that we basically don't build components from scratch in our work. There are some points to pay attention to when developing based on a component library. If you want to base it on other component libraries or not based on a component library, that's okay. There is no strong binding in the later code. In Chapter 04, we use Vitest and Vue Test Utils to understand the basic concept of unit testing and supplement the unit test of the component. In Chapter 05, we develop a component template and write a creation script to generate a new component template with one click to avoid copying the component structure when developing a component. In Chapter 06, we use Gulp, Rollup, ESBuild to write various sub-tasks, package component products in various formats, and generate type declaration files for components. In Chapter 07, we use Gulp's ecosystem plugins to package style code, and develop an unplugin-vue-components parser to automatically import and load components and styles on demand. In Chapter 08, we understand the configuration principles of VSCode and WebStorm editor's code prompts for global components, and implement the automatic generation of these configuration files based on the documentation to optimize the development experience. In Chapter 09, we publish our components, use changesets as our multi-package management tool to publish the project, and use Actions to automate the release of components. This is the temporary plan for now, and if there are any new ideas in the future, they will be added. If you think there are any necessary additions, we can interact and communicate. So let's start our journey of building a component library!!!

Features

Learning project for building a component library
Each branch contains necessary initial features
Code in the article is consistent with the code in the repository
Each branch represents a relatively independent feature
Code is executable in the current version
Provides tools and libraries for code specifications and submission rules
Builds component documentation and implements custom parsing plugin
Extends a component from the Vant component library
Implements unit testing for components
Develops a component template and creation script
Packages component products in various formats
Packages style code and implements automatic import and on-demand loading of components and styles
Configures code prompts for global components in code editors
Publishes components using changesets and automates the release process

Summary

This project is primarily for learning purposes, serving as a foundation for building a component library. It provides various features and tools for code specifications, component documentation, component extension, unit testing, component template generation, component packaging, style packaging, code editor configuration, and component publishing. Each branch represents an independent feature, and the code in the article is consistent with the code in the repository. The project is designed to enable team members to share the same code specifications and submission rules.

Bfehub

Vlib Starter

Vuepress Plugins

Vuepress Plugins