Vue3 组件库开发模板 & Vue3 组件库次佳实践指南。
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!!!
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.
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.