Building Vue3 Component Library from Scratch #1 Introduction

#vue

Preface

This is the first article in the series "Building Vue3 Component Library from Scratch". I have written several articles on this topic before, but upon reviewing them, I found many omissions and areas for improvement. Therefore, I decided to restructure this series and start over to build a complete Vue3 component library project from scratch. The goal is to provide a more detailed setup process and a better reading experience for everyone.

Why Build a Component Library

There are already many well-established component libraries in the world, such as ElementUI, Vant, Vuetify, and so on. So why should we build one from scratch?

For me, building my own component library isn't about having many people use it, but rather about learning a lot of knowledge that I don't come across in my daily work. For example, understanding some principles of Vite, pnpm package management, CLI scaffolding, Vitest testing, and many other topics. Additionally, writing articles on this topic can help others solve their problems and improve my writing skills.

For most people, building their own component library is about improving their professional skills, fulfilling the company project for a custom component library, or perhaps growing and open-sourcing their component library to gain wider use and recognition. Of course, everyone has their own reasons. Fortunately, you've come across this article. If you're interested in building your own component library, be sure to follow this series of articles.

Vue3 Component Library

The series "Building Vue3 Component Library from Scratch" will use Vite3 and TypeScript to set up a Vue3 component library project. The final product will be a scaffold that can be directly used to build a Vue3 component library. You can use command npm create stellarnovaui to get a complete Vue3 component library framework.

As for whether to write specific components, that will depend on future circumstances. There might be tutorials for developing some commonly used components.