【猿创征文】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
1

修改自动生成的 package.json 文件中的 name 和 main ，内容如下：

{
   
  "name": "@yyg-demo-ui/utils",
  "version": "1.0.0",
  "description": "通用工具函数",
  "main": "index.ts",
  "scripts":
1
2
3
4
5
6