【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包

置顶

程序员优雅哥

于 2022-11-15 14:36:01 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端 typescript

本文链接：https://blog.youkuaiyun.com/youyacoder/article/details/127865333

本文介绍了如何在Vue3组件库开发中构建和使用通用工具包。通过创建一个名为`utils`的npm包，包含封装的mitt事件总线和测试用的`testLog`函数。详细步骤包括初始化工具包、编写工具函数以及在组件中安装依赖和使用这些工具。工具包的创建提高了组件开发的效率和代码复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文继续组件库开发环境的搭建，前面两篇分别介绍了组件库中组件项目的初始化、组件库 CSS 架构，本文介绍通用工具库的搭建。在组件开发过程中，可能会调用一些通用的工具函数，这些工具函数便可以提取到一个独立的 npm 包中。

到目前为止，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":