写一个 Vue3 库能收获 🍎 什么？

2020年毕业的我至今踏入职场已经满两年，和大部分人一样，前期对新鲜事物的好奇，对技术的无比狂热，让我快速进军了前端圈子，技术栈是 react ，vue2 过渡 react 期间的历程这里不赘述了，有大哥带着，我的项目组只有我们两个，总体过的很不错。一年过去，我开始沾沾自喜，觉得啥都会，感觉ts 用的好六，react 写业务好优雅～ 直到一天，我浏览GitHub的时候，才发现自己的渺小 🤏。我明白我应该有阶段性的学习提升计划，前端技术这行没有上限，不能沉浸在业务原地踏步。

公司正好有个h5的项目,我力争采用 vue3 轻量化开发，由于那时 VueUse 的网络请求不太好用，于是便有了写库的想法。说干就干，写一个库给项目使用，长期迭代当作学习 ⛽️。

下面分享一下，在公司没办法学到的东西 & 写一个库对我的提升有多大？

🍎 收获

Vue3

• 学习使用组合式API，不仅仅可以写库，还能运用到项目。
• Vue3 组合式API的执行机制，尝试阅读源码。
• React 和 Vue3 的区别。
• hooks 我学习了很多react 中优秀的hook和结合自身业务进行书写。

库构建

• Vite 进行库打包构建。
• 发现只能打包成单文件库，虽然有tree shaking 但我还是希望模块分文件夹进行打包 (包括ts)。
• 研究很久，使用了 Vite 循环多包多页面的形式去做，需要用户自定build，后来发现有大佬做了插件 vite-build。
• 学习优秀库思想将配置插件抽离到scripts文件夹进行处理。
• 学习 vite 的源码和周期，写插件运行 👇。

文档

• 学习使用 vitepress 搭建。
• 开发文档首页，首屏 SSG 加 base64资源速度会更快。
• 项目中集成文档 md 和 示例 demo.vue,这里是使用一个大佬的插件，在运行文档的时候会去读取src下的md文件，然后会解析出md里面引入的demo组件，进行示例展示。
• 发现大佬的插件有点bug怎么办？学习 vscode 调试大佬的插件并且打包发布。
• 发现vitepress 在执行工作流的时候程序不会被kill，阅读源码进行调试，提的PR 也被 Merge 了。

Typescript

• 更高级的ts用法和实践。
• 搭建 packages 下库、测试、文档的 ts 类型。
• 学习 ts config 的配置。

单元测试

• 学习使用 Vitest 配置单元测试。
• 学习单元测试对于各场景的简单用法，模拟请求、模拟时间、模拟用户等操作。
• 思考实现模拟vue环境的函数renderHook，用于测试vue的组合式API。

npm

• 发布 npm 包，包括包的版本管理、package.json 字段的含义，记忆深刻的是 peerDependencies字段，限制vue版本需要3以上才能安装。
• 发布 npm 组织包，平时看到@xxx/xxx 带 @ 开头的包为组织包。
• 使用pnpm 搭建 monorepo 架构优雅管理依赖。

node

• 学习node对文件进行操作，移动、复制、写入等操作。
• 学习并写了简单 vite 插件用于项目打包完进行文件移动删除操作。
• 借此机会了解了eggjs 服务端框架。

服务器

• 配置使用nginx进行文档部署。
• 学习使用shell 脚本进行文档自动化部署。
• 发现服务器没有GitHub page 就迁移了。

开发格式规范

• 学习配置 eslint、prettier、commitlint。
• 学习优秀的库思想对函数、对组件封装导出的方式。

GitHub

• 建立组织进行多人开发协作。
• 学习code review、PR、issue 的处理。
• 编写CI工作流校验提交。
• 学习编写README 学习 English，中英一起（包括pr、issue等）。

👨‍🏫 结语

一起尝试看看，try it!，共同进步 🏃‍♀

库 VueHooks Plus，高质量可靠，内置方便业务的钩子和强大的网络请求hook。

GitHub地址

文档地址

大家多多支持 🌟