基于vite + pnpm monorepo 实现一个UI组件库

基于vite + pnpm monorepo的vue组件库

仓库地址

思路

好多文章都是直接咔咔咔的上代码。跟着做也没问题,但总觉得少了些什么。下次做的时候还要找文章参考。。

需求有三个模块,那么就需要三个包。使用monorepo进行分包管理。

a. 组件库

b. 组件库文档

c. 开发环境

项目结构

这里主要记录项目架构中各个模块的联系。
考虑问题:

  1. 开发组件总不能盲写吧,总要有个能预览的地方吧?
    • play 包的作用就出来了!
  2. 组件库文档中要有组件的使用方式以及代码展示、效果展示。
    • docs 包中如何实现这些?
  3. play 包中该如何使用组件库中的组件呢?总不能写一点儿就打包发布一次吧!?
    • pnpm 工作区的作用!package.json 中"@ceel-ui/utils": “workspace:*” 的作用是什么?
  4. 开发组件的时候如何使用utils中的工具函数呢?
    • 参考 问题3
├── docs
│   ├── 组件库文档
├── packages
│   ├── components
│   │   ├── Button
│   │   │   ├── index.js
│   │   │   ├── src/
│   ├── ceel-ui
│   │   ├── components.ts
│   │   ├── index.js  入口文件
│   │   ├── vite.config.ts
│   ├── utils
│   │   ├── index.js
├── play
│   ├── 组件库开发环境
├── .gitignore
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── package.json
├── README.md

项目初始化

  1. docs 文件夹中执行 npx vitepress init, 使用vitepress初始化。
  2. play 文件夹中执行 npx create vite,初始化一个普通的vite + vue 项目。
  3. packages 文件夹中添加 componentsceel-ui(你的组件库名)、utils
  4. packages/ceel-uipackages/componentspackages/utils 文件夹中使用pnpm init初始化一个package.jsonname字段对应的值改为对应的名字

例如:packages/components/ 模块

{"name": "@ceel-ui/components", "version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}

考虑一个问题:“@ceel-ui/utils”: “workspace:*” 的作用是什么?

千问回答如下:

在 package.json 文件中,当你看到 “@ceel-ui/utils”: “workspace:*” 这样的依赖项,这是在使用 pnpm 或其他一些支持 workspace 的包管理器(如 Yarn)时的一种特殊依赖引用方式。

“workspace:*” 的作用是告诉包管理器从当前 monorepo(多仓库)项目的 workspace 中引用该依赖,而不是从外部下载一个独立的版本。具体来说:

“workspace:*” 指代的是当前 monorepo 项目中定义的 workspace 下的任意版本。
这意味着,如果你的项目结构中有一个名为 @ceel-ui/utils 的子项目,那么这个依赖将直接从你的项目目录中引用该子项目,而不是去 NPM 或其他远程仓库下载。
这种方式的好处包括:

  1. 版本同步:
    ○ 所有使用 “workspace:*” 引用的项目都会引用 monorepo 中的同一个子项目,这保证了版本的一致性。
  2. 开发速度提升:
    ○ 由于不需要从网络下载依赖,构建速度和开发迭代速度会有所提升。
  3. 便于开发和测试:
    ○ 你可以在 monorepo 的子项目中进行修改,而无需重新发布到 NPM,就能立即在其他子项目中看到效果,非常适合开发和测试阶段。
  4. 节省磁盘空间:
    ○ 当你需要更新 @ceel-ui/utils 的功能或修复 bug 时,只需要在一个地方修改即可,所有依赖它的子项目会自动获取更新。

带着答案往下走

play包中通过vite初始化后,就可以启动了(记得下载依赖 pnpm i)。

play 启动后就可以看到一个常见的vite+vue项目。

如果此时你已经新建了一个button组件。那么该如何在这个play中展示呢?

答案很简单,

  1. 在主项目的package.json 中添加软链(本地依赖) “ceel-ui”: “workspace:*”
  2. 在play项目中就可以通过import引入后通过 app.use(ceelUi) 使用。

根目录下的 package.josn 如下

{"name": "ceel-ui-workspace","dependencies": {"vue": "^3.4.32"},..."devDependencies": {..."ceel-ui": "workspace:*",  // 添加这个...}
}

特别注意,ceel-ui不是根目录,而是 ceel-ui/packages/components/ceel-ui

ceel-ui 作为组件库的入口,那么它应该具备以下功能:

  • 默认导出一个含有install方法的对象,以供vue的use函数去调用(app.use(ceelUi))。
  • 在其install方法中应该循环注册所有的组件。
  • 如果要支持按需引入,那么应该导出各个组件。

ceel-ui/index.ts 内容如下:

// 导入所有的组件
import components from './component' //该文件应该整合所有的组件到一个 list 中,然后导出。const install = (app) => {循环 components 给每一项都执行 app.use(component)
}export default { install }// 如果要支持按需引入那么应该, 这里 @ceel-ui/components 模块应该导出各个组件。
export * from '@ceel-ui/components' 

到这儿你应该已经明白了大半儿,接下来你应该想到的不是去写组件,而是考虑为什么 from '@ceel-ui/components' 能导入组件,npm是怎么找到的我想要导出的东西呢?

提到 npm 你应该立马想到 package.json 因为npm的一些信息都在package.json中存放。

那么在子包components中的package.json应该配置该包的入口文件地址。也就是 main 字段的值。

文件components/package.json

{"name": "@ceel-ui/components","version": "1.0.0","description": "","main": "index.js", // 该包的入口地址 也就是 components/index.js"keywords": [],"author": "","license": "ISC"
}

这是没有打包的时候, 打包后该怎么写呢?
其实很简单,直接填写打包后的文件地址即可!

接下来你应该举一反三

  • utils 包盖如何配置
  • ceel-ui 包该如何配置

node_modules 冗余依赖问题

play包中有一些依赖,docs中也有,那么是不是可以把它们提取到根目录下?
只需要把play、docs中的依赖项提取的根目录下,重新执行 pnpm i 即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49008.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux C语言 54-目录操作

Linux C语言 54-目录操作 本节关键字&#xff1a;Linux、C语言、目录操作、遍历目录 相关C库函数&#xff1a;opendir、readdir、closedir 遍历目录 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <dirent.h> #include <…

如何在Linux上部署Django Web应用

在Linux上部署Django Web应用需要遵循以下步骤&#xff1a; 安装Python和虚拟环境&#xff1a; 首先&#xff0c;确保你的Linux系统已经安装了Python。可以使用以下命令检查Python版本&#xff1a; python --version如果没有安装Python&#xff0c;则可以使用包管理工具安装它&…

Java:114-Spring Boot的底层原理(上篇)

Spring Boot的底层原理 之前学习过了Spring Boot&#xff08;在88章博客&#xff09;&#xff0c;但是并没有很深入的了解&#xff0c;这里致力于在原来的基础上学习更多Spring Boot知识 回顾&#xff08;注意&#xff1a;只是回顾&#xff0c;所以更多细节在88章博客&#x…

MySQL零散拾遗(五)---- 对 GROUP BY 要点进行详细介绍

在GROUP BY的使用过程中&#xff0c;SELECT 中出现的非组函数的字段必须声明在 GROUP BY 中。 还记得 MySQL零散拾遗&#xff08;四&#xff09; 中&#xff0c;提到的 GROUP BY 的使用要点嘛&#xff1f; SELECT 中出现的非组函数的字段必须声明在 GROUP BY 中。反而&#x…

array.some() ==> 查找数组list中,是否有包含与当前currKey的值不一样的misId

需求&#xff1a; const list [ {misId: e, name: 小白}, {misId: e, name: 小白白}, {misId: r, name: 小王}, {misId: r, name: 小小王} ] let currKey r 查找数组list中&#xff0c;是否有包含与当前currKey的值不一样的misId 解决&#xff1a; 要查找数组lis…

【2】Spring Cloud 工程搭建

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;Spring Cloud实战&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 1.声明项目依赖和项目构建插件 2.完善子项目订单服务 2.1完善启动…

开源发票识别InvoiceNet项目Windows部署踩坑记(1)

今天安装在github上的InvoiceNet开源项目&#xff0c;准备对它进行测试&#xff0c;安装过程出现了一些问题&#xff0c;做个记录&#xff0c;给遇到兄弟爬坑。 第一个问题&#xff0c;conda的问题&#xff0c; 这是另外一个包管理器&#xff0c;不仅仅可以管理python的虚拟…

layui+thymeleaf+jquery实现多图片,多视频的上传、预览、放大、编辑功能

layuithymeleafjquery实现多图片&#xff0c;多视频的上传、预览、放大、编辑功能 html: <!--多图片上传--> <div class"layui-row layui-col-space10"><div class"layui-form-item"><div class"layui-form-item layui-form-te…

mybatis xml 文件中引用Java类的静态方法

MyBatis-Plus 支持在 XML 映射文件中使用 ${} 来直接嵌入字符串&#xff0c;以及使用 #{} 来引用传入参数。但是&#xff0c;$ 的使用需要小心&#xff0c;因为它会直接将参数内容嵌入到 SQL 语句中&#xff0c;这可能会导致 SQL 注入问题。 在 MyBatis-Plus 中&#xff0c;如果…

Android 防止重复点击

1.第一种方式&#xff1a; private static final int MIN_DELAY_TIME 2000; // 两次点击间隔不能少于2000ms private static long lastClickTime System.currentTimeMillis(); public static boolean isFastClick() { boolean flag true; long currentClickTime …

苹果电脑怎么清理缓存和垃圾 mac如何关闭正在运行的程序 苹果电脑怎么清理后台

苹果电脑以其出色的性能和用户友好的界面而广受好评&#xff0c;但在使用过程中&#xff0c;后台程序的堆积可能会影响到系统的运行效率。太多应用和进程在后台默默运行&#xff0c;就像是无形的背包&#xff0c;让你的Mac背负了太多不必要的重量。不过&#xff0c;别担心&…

08、Tomcat 部署及优化

8.1 Tomcat概述 8.1.1 Tomcat介绍 自从 JSP 发布之后,推出了各式各样的 JSP 引擎。Apache Group 在完成 GNUJSP1.0的开发以后&#xff0c;开始考虑在 SUN 的 JSWDK 基础上开发一个可以直接提供 Web 服务的 JSP服务器&#xff0c;当然同时也支持 Servlet, 这样 Tomcat 就诞生…

使用LSTM完成时间序列预测

c 在本教程中&#xff0c;我们将介绍一个简单的示例&#xff0c;旨在帮助初学者入门时间序列预测和 PyTorch 的使用。通过这个示例&#xff0c;你可以学习如何使用 LSTMCell 单元来处理时间序列数据。 我们将使用两个 LSTMCell 单元来学习从不同相位开始的正弦波信号。模型在…

Perl 哈希

Perl 哈希 Perl 哈希是一种强大的数据结构&#xff0c;用于存储键值对集合。它是 Perl 语言的核心特性之一&#xff0c;广泛应用于各种编程任务中。本文将详细介绍 Perl 哈希的概念、用法和最佳实践。 什么是 Perl 哈希&#xff1f; Perl 哈希是一种关联数组&#xff0c;其中…

MYSQL 七、mysql 日志与备份

一、其他数据库日志 千万不要小看日志。很多看似奇怪的问题&#xff0c;答案往往就藏在日志里。很多情况下&#xff0c;只有通过查看日志才 能发现问题的原因&#xff0c;真正解决问题。所以&#xff0c;一定要学会查看日志&#xff0c;养成检查日志的习惯&#xff0c;对提升你…

C语言-预处理详解

1.预处理符号 C语言中设置了一些预定义符号&#xff0c;可以直接使用&#xff0c;预定义符号是在预处理期间处理的。 __FILE__//代表当前进行编译的源文件 __LINE__//文件当前行号 __DATE__//文件当前日期 __TIME__//文件当前时间 __STDC__//如果编译器遵循ANSIC&#xff0c;…

重复图片查找:巧用Python和OpenCV进行图像哈希与汉明距离检测以从海量图片中找出重复图片

重复图片查找&#xff1a;巧用Python和OpenCV进行图像哈希与汉明距离检测以从海量图片中找出重复图片 1. 导言2. 环境准备3. 图像哈希&#xff08;pHash&#xff09;原理4. 汉明距离原理5. 代码实现导入必要的库图像哈希计算函数汉明距离计算函数查找重复图片函数示例使用 在处…

【ELK+Kafka+filebeat分布式日志收集】kibana基本使用教程

基本功能 查询数据 在Discover中查看数据: 进入Discover视图。 选择之前创建的索引模式。 使用搜索框和过滤器来查询和过滤数据。 使用KQL(Kibana Query Language): KQL是一种简单的查询语法,用于过滤Elasticsearch中的数据。 支持Terms Query、Boolean Queries、Range …

分布式锁的实现:Redis和Zookeeper

在分布式系统中&#xff0c;确保数据的一致性和避免并发问题是非常重要的。分布式锁是解决这些问题的关键技术之一。本文将详细介绍如何使用Redis和Zookeeper实现分布式锁&#xff0c;并通过Java代码示例帮助读者理解其实现原理。 1. 分布式锁的基本概念 分布式锁是一种用于协…

乐鑫AWS IoT ExpressLink方案,简化物联网设备连接AWS IoT服务

在现代科技迅速发展的今天&#xff0c;物联网&#xff08;IoT&#xff09;已经成为连接物理世界与数字世界的重要桥梁&#xff0c;越来越多的设备开始接入网络&#xff0c;实现智能化控制。 在这个大背景下&#xff0c;乐鑫携手亚马逊&#xff0c;推出了AWS IoT ExpressLink方…