vue组件例子（Vue3 企业级优雅实战 – 组件库框架 – 5 组件库通用工具包）

该系列已更新文章：

分享一个实用的 vite + vue3 组件库脚手架工具  
    
    
  ，提升开发效率

开箱即用 yyg-cli 脚手架：快速创建 vue3 组件库和vue3 全家桶项目

Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo

Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root

Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境

Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构

本文继续组件库开发环境的搭建

     


     


     
，前面两篇分别介绍了组件库中组件项目的初始化    
    
    
、组件库 CSS 架构 




 




 




，本文介绍通用工具库的搭建    
    
    
。在组件开发过程中  

   

   

 ，可能会调用一些通用的工具函数

     

     

     ，这些工具函数便可以提取到一个独立的 npm 包中   


     


     


  。

1 创建工具包

1.1 初始化工具包

到目前为止  




  




  




，packages 目录下有三个包：foo 示例组件   


     


     


  、scss 样式



 




 




 
、yyg-demo-ui 组件库聚合  


  


  


，现创建第四个：utils



 




 




 
。

在命令行中进入 utils 目录
     
     
     ，使用 pnpm 初始化   

   

   

。

pnpm init

修改自动生成的 package.json 文件中的 name 和 main
   




   




   



，内容如下：

{ "name": "@yyg-demo-ui/utils", "version": "1.0.0", "description": "通用工具函数", "main": "index.ts", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }

由于工具包咱们也采用 TypeScript 编写 



 



 



，在 utils 下也提供一份 tsconfig.json 文件：

{ "compilerOptions": { "target": "es2015", "lib": [ "es2015" ], "module": "commonjs", "rootDir": "./", "allowJs": true, "isolatedModules": false, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true } }

1.2 编写第一个工具函数

需求描述：组件间通信是一个刚需               ，当组件层级较多时

    




    




    


，可以使用全局总线来通信    

     

     

 。Vue 2.x 中通常使用 EventBus 作为全局总线














，而 Vue 3.x 可以使用 mitt




  




  




  。mitt 体积小               ，支持全部事件的监听和批量移除

     



     



     

，不依赖 Vue 实例














，可以跨框架使用  


  


  


。咱们的第一个工具函数就是简单封装 mitt  
    
    
  ，导出 mitt 对象即可     
     
     
。

首先在 utils 包下安装 mitt 依赖：

pnpm install mitt@1.1.3

细心的同学会发现

     


     


     
，在引入 mitt 时优雅哥指定了版本号 1.1.3 




 




 




，这是因为  

   

   

 ，优雅哥在使用当前最新的 3.0.0 版本时一直提示类型错误或找不到类型声明文件

     

     

     ，由于没空处理  




  




  




，就简单粗暴的降到 1.1.3 版本




   




   




   。

在 utils 目录下创建源码目录 src  


  


  


，并在 src 中创建 emitter.ts 文件
 



 



 


。

utils/src/emitter.ts：

import mitt from mitt const Mitt = mitt export const emitter: mitt.Emitter = new Mitt() export default emitter

上面的第二行代码看着多余
     
     
     ，因为本质上就是 new mitt()
   




   




   



，这么做是为了满足 eslint 的规则：

A constructor name should not start with a lowercase letter.

1.3 编写第二个工具函数

上面的 emitter 对象会在后面的组件开发中使用到 



 



 



，在 foo 中并未使用到               ，所以咱们再创建一个测试使用的工具函数               。

在 utils/src/ 目录下创建 test-log.ts 文件：

export const testLog = (str: string) => { console.log(test log: , str) }

1.4 入口文件

前面的 package.json 中指定了 main 为 index.ts

    




    




    


，在 utils 目录下创建 index.ts 文件














，导入并导出所有的工具函数等 




    




    




   。

export { emitter } from ./src/emitter export { testLog } from ./src/test-log

总结一下               ，组件库通用工具包的目录结构如下：

packages/ |- utils/ |- src/ |- emitter.ts |- test-log.ts |- index.ts |- tsconfig.json |- package.json

2 在组件中使用工具包

2.1 安装依赖

前面已经开发了 foo 示例组件

     



     



     

，如果该组件要使用工具包














，首先需要安装依赖














。在命令行中进入 foo 目录：

pnpm install @yyg-demo-ui/utils

执行后 foo 的 package.json 中会多了一行依赖：

"dependencies": { "@yyg-demo-ui/utils": "workspace:^1.0.0" }

2.2 使用工具

由于 utils 包指定了 main 为 index.ts  
    
    
  ，并且所有的工具都在 index.ts 中导入并导出

     


     


     
，所以在使用时只需引入 utils 包即可               。

例如要使用上面创建的 testLog 函数 




 




 




，则只需要在代码中如下引入：

import { testLog } from @yyg-demo-ui/utils

在 setup 中的按钮点击事件调用该方法：

const onBtnClick = () => { console.log(点击按钮测试, props.msg) testLog(props.msg) }

后面再开发过程中如果新增工具函数：如 JSON Schema 的解析等  

   

   

 ，则往 utils 中添加即可

     

     

     ，并在 utils/index.ts 中统一将其导入并导出  



     



     



   。

感谢你阅读本文  




  




  




，如果本文给了你一点点帮助或者启发  


  


  


，还请三连支持一下
     
     
     ，点赞   

   

   

、关注    

     

     

 、收藏
   




   




   



，程序员优雅哥会持续与大家分享更多干货