🤔

在说明什么是 leisure-lib 前我们先了解为什么要做这个，抑或说为什么前端开发要有自己的 lib 库。

为什么要做 lib 库

❓

• 在日常开发中，如果一个页面或者方法被反复复制粘贴，为什么不将它抽离封装成一个组件或者公共方法。如果这个页面或者方法在多个项目中反复粘贴，为什么不将它封装成 npm 包发布到公司私服。
• 作为一名前端开发，在平常的开发和学习中如果只是一味的画页面，和服务端联调，在技术上不会有什么提升。开发中肯定会遇到的问题，我们一般会在网上找到解决方法，然后粘贴到自己的项目里这件事情就过去了，等到下次再遇到相识的问题，就重新百度或者去之前的代码段去粘贴，那这样这个解决方案不属于你。如果某天你看到某个技术博客有个很好的解决方案，你就可以思考能不能将它沉淀到自己的 lib 库。
• 不同的业务系统功能不同但都会引入主流成熟的 UI 库elementPlus arcoDesign antDesign等，这些 UI 组件库为了适配更多的场景一般使用起来都是比较繁琐的，我们可以结合自己的业务和公司内部的设计规范二次封装一些内部组件。
• 当前就业市场波谲云诡，IT 早已不是 22 年之前的井喷发展行业了。有个自己的 lib 库也算是自己的数据资产，存放在 npm 市场，更是自己的作品。
• 在你打造自己的 lib 库的时候，也会了解到很多自己在写业务时接触不到的技术和新的设计思路。包括但不限于： multirepo monorepo pnpm 模块化 软连接link和直连 库模式 build-publish typescript和dts vite分包 package.json nodejs脚本，这些都是作为一名开发的综合能力，无关乎框架和端。
• 很喜欢 deft 在夺冠时的发言：我唯一会的仅剩英雄联盟，如果在这条路上我不能成功，那我的人生将没有任何意义（这段可能只有喜欢电竞的人才懂）。我们唯一能谋生的技能就是编码了，虽然拼尽了全力可能都无法在这个行业掌控雷电，当前这个大环境可能有一天我们被淘汰出了这个行业，希望我们能留下一点自己在这个行业待过的痕迹。

leisure-lib 是什么

ℹ️

leisure-lib 是一个采用 monorepo 单仓模式下采用 pnpm 管理多个 workspace 的子项目，目前有@leisure-lib/ui组件库和@leisure-lib/utils工具库(后期会逐步添加新的子项目)，用 leisure-lib包 对多仓进行全量引用后导出的聚合，采用 vite 打包后发布 NPM 市场，可点击右上角 NPM 图标查看。项目自带 playground 直连开发库支持热更新的演练场，docs vitepress 打造的文档说明,热爱前端的小伙伴可以一起学习。

工程目录

leisure-lib
├── CHANGELOG.md
├── LICENSE
├── bin
│   └── index.ts
├── commitlint.config.ts
├── docs
│   ├── CHANGELOG.md
│   ├── index.md
│   ├── package.json
│   ├── public
│   │   ├── background.png
│   │   ├── background.svg
│   │   ├── icon.png
│   │   └── icon.svg
│   └── views
│       ├── api
│       │   └── index.ts
│       ├── components
│       │   ├── area
│       │   │   ├── area-local.vue
│       │   │   └── area-remote.vue
│       │   ├── area.md
│       │   ├── button
│       │   │   ├── button-disabled.vue
│       │   │   ├── button-loading.vue
│       │   │   ├── button-text.vue
│       │   │   └── button-type.vue
│       │   ├── button.md
│       │   ├── fliqo
│       │   │   └── countHomepage.vue
│       │   ├── fliqo.md
│       │   ├── form
│       │   │   └── diy-form.vue
│       │   ├── form.md
│       │   ├── icon
│       │   │   ├── icon-color.vue
│       │   │   ├── icon-rotate.vue
│       │   │   ├── icon-size.vue
│       │   │   └── iconList.vue
│       │   ├── icon.md
│       │   ├── lightwave
│       │   │   └── lightwave.vue
│       │   ├── lightwave.md
│       │   ├── lineText
│       │   │   └── lineText.vue
│       │   ├── lineText.md
│       │   ├── loading
│       │   │   └── loading.vue
│       │   ├── loading.md
│       │   ├── log
│       │   │   └── log.vue
│       │   ├── modal
│       │   │   ├── content2.vue
│       │   │   ├── content3.vue
│       │   │   ├── content4.vue
│       │   │   ├── modal.vue
│       │   │   ├── modal2.vue
│       │   │   ├── modal3.vue
│       │   │   └── modal4.vue
│       │   ├── modal.md
│       │   ├── switchTheme.md
│       │   ├── table
│       │   │   ├── add.vue
│       │   │   └── table.vue
│       │   ├── table.md
│       │   ├── typing
│       │   │   └── typing.vue
│       │   └── typing.md
│       ├── formDesigner.md
│       ├── guide
│       │   ├── how.md
│       │   ├── style.md
│       │   └── why.md
│       ├── log.md
│       └── utils
│           ├── vCopy
│           │   ├── vCopy-basic.vue
│           │   └── vCopy-content.vue
│           ├── vCopy.md
│           ├── vDebounce
│           │   └── index.vue
│           ├── vDebounce.md
│           ├── vPermission
│           │   ├── checkPermission.vue
│           │   └── index.vue
│           ├── vPermission.md
│           ├── vRipple
│           │   └── vRipple.vue
│           ├── vRipple.md
│           ├── vThrottle
│           │   └── index.vue
│           ├── vThrottle.md
│           ├── watermark
│           │   └── watermark.vue
│           └── watermark.md
├── nginx.conf
├── package.json
├── packages
│   ├── directives
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── copy
│   │   │   │   └── index.ts
│   │   │   ├── debounce
│   │   │   │   └── index.ts
│   │   │   ├── lightwave
│   │   │   │   └── index.ts
│   │   │   ├── permission
│   │   │   │   └── index.ts
│   │   │   ├── ripple
│   │   │   │   └── index.ts
│   │   │   ├── throttle
│   │   │   │   └── index.ts
│   │   │   └── viewTransition
│   │   │       ├── index.ts
│   │   │       └── index_js.html
│   │   └── vite.config.ts
│   ├── ui
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── public
│   │   │   └── icon.svg
│   │   ├── src
│   │   │   ├── ai-chat
│   │   │   │   └── index.vue
│   │   │   ├── api.ts
│   │   │   ├── area
│   │   │   │   ├── area.json
│   │   │   │   └── index.vue
│   │   │   ├── button
│   │   │   │   ├── button.less
│   │   │   │   └── index.vue
│   │   │   ├── fliqo
│   │   │   │   ├── fliqoItem.vue
│   │   │   │   ├── fliqo_js.vue
│   │   │   │   └── index.vue
│   │   │   ├── form
│   │   │   │   ├── bg.png
│   │   │   │   ├── index.vue
│   │   │   │   ├── nestedComponent.vue
│   │   │   │   └── test.vue
│   │   │   ├── form-designer
│   │   │   │   ├── command
│   │   │   │   ├── designer.ts
│   │   │   │   ├── form-widget
│   │   │   │   ├── formConfig.ts
│   │   │   │   ├── index.vue
│   │   │   │   ├── setting-panel
│   │   │   │   ├── toolbar-panel
│   │   │   │   ├── widget-panel
│   │   │   │   └── widget.ts
│   │   │   ├── form-render
│   │   │   │   ├── container
│   │   │   │   ├── index.vue
│   │   │   │   └── useRegisterEvt.ts
│   │   │   ├── icon
│   │   │   │   ├── api.ts
│   │   │   │   ├── icon.ts
│   │   │   │   ├── index.vue
│   │   │   │   └── svg
│   │   │   ├── lineText
│   │   │   │   └── index.vue
│   │   │   ├── loading
│   │   │   │   ├── index.ts
│   │   │   │   └── loading.vue
│   │   │   ├── modal
│   │   │   │   ├── index.ts
│   │   │   │   └── modal.vue
│   │   │   ├── page
│   │   │   │   ├── index.ts
│   │   │   │   └── page.vue
│   │   │   ├── table
│   │   │   │   ├── index.vue
│   │   │   │   └── ts
│   │   │   └── typing
│   │   │       └── index.vue
│   │   └── vite.config.ts
│   └── utils
│       ├── cLog
│       │   └── index.ts
│       ├── common
│       │   └── index.ts
│       ├── debounce&throttle
│       │   └── index.ts
│       ├── http
│       │   ├── index.ts
│       │   └── request.ts
│       ├── index.ts
│       ├── package.json
│       ├── permission
│       │   └── index.ts
│       ├── styleHelper
│       │   ├── addUnit.ts
│       │   ├── createNamespace.ts
│       │   └── index.ts
│       ├── vite.config.ts
│       └── watermark
│           └── index.ts
├── play_serve
│   ├── nest-cli.json
│   ├── package.json
│   ├── src
│   │   ├── ai
│   │   │   ├── ai.controller.spec.ts
│   │   │   ├── ai.controller.ts
│   │   │   ├── ai.module.ts
│   │   │   ├── ai.service.spec.ts
│   │   │   ├── ai.service.ts
│   │   │   ├── dto
│   │   │   │   ├── create-ai.dto.ts
│   │   │   │   └── update-ai.dto.ts
│   │   │   └── entities
│   │   │       └── ai.entity.ts
│   │   ├── app.controller.spec.ts
│   │   ├── app.controller.ts
│   │   ├── app.module.ts
│   │   ├── app.service.ts
│   │   ├── area
│   │   │   ├── area.controller.spec.ts
│   │   │   ├── area.controller.ts
│   │   │   ├── area.module.ts
│   │   │   ├── area.service.spec.ts
│   │   │   ├── area.service.ts
│   │   │   ├── dto
│   │   │   │   ├── Area.dto.ts
│   │   │   │   ├── create-area.dto.ts
│   │   │   │   └── update-area.dto.ts
│   │   │   └── entities
│   │   │       └── area.entity.ts
│   │   ├── auth
│   │   │   ├── auth.controller.spec.ts
│   │   │   ├── auth.controller.ts
│   │   │   ├── auth.module.ts
│   │   │   ├── auth.service.spec.ts
│   │   │   ├── auth.service.ts
│   │   │   ├── config.ts
│   │   │   ├── dto
│   │   │   │   ├── create-auth.dto.ts
│   │   │   │   ├── login-auth.dto.ts
│   │   │   │   └── update-auth.dto.ts
│   │   │   └── entities
│   │   │       └── user.entity.ts
│   │   ├── config
│   │   │   └── index.ts
│   │   ├── entities
│   │   │   └── student.entity.ts
│   │   ├── filters
│   │   │   └── http-exception
│   │   │       ├── http-exception.filter.spec.ts
│   │   │       └── http-exception.filter.ts
│   │   ├── guard
│   │   │   ├── global.guard.ts
│   │   │   └── whiteList.ts
│   │   ├── icon
│   │   │   ├── dto
│   │   │   │   └── icon.ts
│   │   │   ├── icon.controller.spec.ts
│   │   │   ├── icon.controller.ts
│   │   │   ├── icon.module.ts
│   │   │   ├── icon.service.spec.ts
│   │   │   └── icon.service.ts
│   │   ├── interceptor
│   │   │   └── transform.interceptor.ts
│   │   ├── main.ts
│   │   ├── middleware
│   │   │   └── log.middleware.ts
│   │   ├── minio-client
│   │   │   ├── minio-client.controller.spec.ts
│   │   │   ├── minio-client.controller.ts
│   │   │   ├── minio-client.module.ts
│   │   │   ├── minio-client.service.spec.ts
│   │   │   └── minio-client.service.ts
│   │   ├── service
│   │   │   └── pagination.service.ts
│   │   ├── statistics
│   │   │   ├── entities
│   │   │   │   └── statistics.entity.ts
│   │   │   ├── statistics.controller.spec.ts
│   │   │   ├── statistics.controller.ts
│   │   │   ├── statistics.module.ts
│   │   │   ├── statistics.service.spec.ts
│   │   │   └── statistics.service.ts
│   │   ├── teacher
│   │   │   ├── dto
│   │   │   │   ├── create-teacher.dto.ts
│   │   │   │   └── update-teacher.dto.ts
│   │   │   ├── entities
│   │   │   │   └── teacher.entity.ts
│   │   │   ├── teacher.controller.spec.ts
│   │   │   ├── teacher.controller.ts
│   │   │   ├── teacher.module.ts
│   │   │   ├── teacher.service.spec.ts
│   │   │   └── teacher.service.ts
│   │   └── user-behavior
│   │       ├── dto
│   │       │   └── userBehavior.ts
│   │       ├── user-behavior.controller.ts
│   │       ├── user-behavior.module.ts
│   │       └── user-behavior.service.ts
│   ├── test
│   │   ├── app.e2e-spec.ts
│   │   └── jest-e2e.json
│   ├── tsconfig.build.json
│   ├── tsconfig.json
│   └── uploads
├── playground
│   ├── App.vue
│   ├── index.html
│   ├── main.ts
│   ├── package.json
│   ├── public
│   │   ├── icon.png
│   │   └── icon.svg
│   ├── src
│   │   ├── api
│   │   │   └── index.ts
│   │   ├── components
│   │   │   └── menu.vue
│   │   ├── json
│   │   │   └── index.ts
│   │   ├── router
│   │   │   ├── index.ts
│   │   │   └── routes.ts
│   │   ├── style
│   │   └── views
│   │       ├── components
│   │       │   ├── ai
│   │       │   ├── area
│   │       │   ├── button
│   │       │   ├── form
│   │       │   ├── form-designer
│   │       │   ├── form-render
│   │       │   ├── icon
│   │       │   ├── modal
│   │       │   ├── page
│   │       │   ├── table
│   │       │   └── upload
│   │       ├── directives
│   │       │   └── permission
│   │       ├── index.vue
│   │       └── utils
│   │           └── debounce&throttle
│   ├── tsconfig.json
│   ├── types
│   │   ├── index.d.ts
│   │   └── vue-shims.d.ts
│   └── vite.config.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── public
│   ├── docs.jpg
│   └── icon.png
├── scripts
│   ├── build.ts
│   ├── changelog.ts
│   ├── release:all.ts
│   └── serve:publish.ts
├── src
│   ├── index.ts
│   └── installer.ts
├── style
│   ├── font
│   ├── index.less
│   ├── reset.less
│   └── var.less
├── tree.md
├── tsconfig.json
└── vite.config.ts

快速上手

点我快速上手