开发一个基于 Vue3 的组件库

介绍

这是一个基于 Vue3 的组件库开发教程，我们将会从零开始，一步一步的开发一个组件库。

项目技术栈

一套完整的 vue 技术栈

• Vue3
• TypeScript
• SCSS
• iconify
• Vite
• Vitest

项目可以学到什么

• 🏆 一个项目从0-1的搭建过程
• 🏆 基于 TypeScript 的配置
• 🏆 完整的项目构建过程
• 🏆 清晰的项目结构
• 🏆 良好的编码习惯
• 🎉 Vue3 的综合使用
• 🎉 TypeScript 的在项目中的完全使用
• 🎉 构建完整的样式系统
• 🗝️ 普通组件的开发思路
• 🗝️ 复杂组件的开发思路
• 🗝️ 命令式组件的开发思路
• 🗝️ 自定义指令的开发过程
• 🗝️ 全局方法的配置
• 🗝️ 针对开发者的类型提示
• 🎈 让开发变得可控：完全的单元测试
• 🎈 让开发变简单：写一个自动化脚本
• 🎈 让开发变得轻松：从整体上优化结构的思路

在此基础上，可以更加深入理解 Vue3，包括但不限于：

• 🪄 setup 的使用
• 🪄 各种宏的使用
• 🪄 钩子方法的开发
• 🪄 如何单独挂载一个组件
• 🪄 样式是如何复用的
• 🪄 类型应该如何声明
• 🪄 测试到底怎么测，测什么
• 🪄 多关联组件之间是如何通信的
• 🪄 动画应该如何使用
• 🪄 如何优化渲染过程
• 🪄 如何优化打包过程

项目结构

├──packages
│  ├──components  # 组件
│  ├──directives  # 指令
│  ├──global      # 全局方法
│  ├──hooks       # 钩子
│  ├──styles      # 样式
│  ├──types       # 类型声明
│  ├──utils       # 共用工具
├──index.ts       # 入口文件
├──scripts        # 自动化脚本
├──vite.config.ts # vite 配置

项目进度

本项目共 29 个组件，2 个全局指令，4 个全局方法。

声明

本项目仅供学习交流使用，不建议用于商业用途。当然，你可以基于此项目进行二次开发，但请保留原作者信息。