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

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

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

分享一个实用的 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 文件中的 namemain ,内容如下:

{
   
  "name": "@yyg-demo-ui/utils",
  "version": "1.0.0",
  "description": "通用工具函数",
  "main": "index.ts",
  "scripts":
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员优雅哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值