基于vite + pnpm monorepo 实现一个UI组件库
基于vite + pnpm monorepo的vue组件库
仓库地址
思路
好多文章都是直接咔咔咔的上代码。跟着做也没问题,但总觉得少了些什么。下次做的时候还要找文章参考。。
需求有三个模块,那么就需要三个包。使用monorepo进行分包管理。
a. 组件库
b. 组件库文档
c. 开发环境
项目结构
这里主要记录项目架构中各个模块的联系。
考虑问题:
- 开发组件总不能盲写吧,总要有个能预览的地方吧?
- play 包的作用就出来了!
- 组件库文档中要有组件的使用方式以及代码展示、效果展示。
- docs 包中如何实现这些?
- play 包中该如何使用组件库中的组件呢?总不能写一点儿就打包发布一次吧!?
- pnpm 工作区的作用!package.json 中"@ceel-ui/utils": “workspace:*” 的作用是什么?
- 开发组件的时候如何使用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
项目初始化
docs
文件夹中执行npx vitepress init
, 使用vitepress初始化。play
文件夹中执行npx create vite
,初始化一个普通的vite + vue
项目。packages
文件夹中添加components
、ceel-ui
(你的组件库名)、utils
。packages/ceel-ui
、packages/components
、packages/utils
文件夹中使用pnpm init
初始化一个package.json
。name
字段对应的值改为对应的名字
例如: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 或其他远程仓库下载。
这种方式的好处包括:
- 版本同步:
○ 所有使用 “workspace:*” 引用的项目都会引用 monorepo 中的同一个子项目,这保证了版本的一致性。- 开发速度提升:
○ 由于不需要从网络下载依赖,构建速度和开发迭代速度会有所提升。- 便于开发和测试:
○ 你可以在 monorepo 的子项目中进行修改,而无需重新发布到 NPM,就能立即在其他子项目中看到效果,非常适合开发和测试阶段。- 节省磁盘空间:
○ 当你需要更新 @ceel-ui/utils 的功能或修复 bug 时,只需要在一个地方修改即可,所有依赖它的子项目会自动获取更新。
带着答案往下走
play包中通过vite初始化后,就可以启动了(记得下载依赖 pnpm i)。
play 启动后就可以看到一个常见的vite+vue项目。
如果此时你已经新建了一个button组件。那么该如何在这个play中展示呢?
答案很简单,
- 在主项目的package.json 中添加软链(本地依赖) “ceel-ui”: “workspace:*”
- 在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 即可。
相关文章:
基于vite + pnpm monorepo 实现一个UI组件库
基于vite pnpm monorepo的vue组件库 仓库地址 思路 好多文章都是直接咔咔咔的上代码。跟着做也没问题,但总觉得少了些什么。下次做的时候还要找文章参考。。 需求有三个模块,那么就需要三个包。使用monorepo进行分包管理。 a. 组件库 b. 组件库文档…...
FDM3D打印系列——Luck13关节可动模型打印和各种材料的尝试
luck13可动关节模型FDM3D打印制作过程 大家好,我是阿赵。 最近我沉迷于打印一个叫做Luck13的关节超可动人偶。 首先说明一下,这个模型是分为了外甲和骨骼两个部分的。 为什么我会打印了这么多个呢? 一、第一次尝试——PLATPU 刚开始…...
windows10 获取磁盘类型
powershell Get-PhysicalDisk | Select FriendlyName, MediaType FriendlyName MediaType ------------ --------- NVMe PC SN740 NVMe WD 256GB SSD WDC WD10EZEX-75WN4A1 HDD 适用场景 SSD: 适合需要快速访问速度和较高响…...
数据库之运算符
目录 一、算数运算符 二、比较运算符 1.常用比较运算符 2.实现特殊功能的比较运算符 三、逻辑运算符 1.逻辑与运算符(&&或者AND) 2.逻辑或运算符(||或者OR) 3.逻辑非运算符(!或者NOT&#…...
【自动化机器学习AutoML】AutoML工具和平台的使用
自动化机器学习AutoML:AutoML工具和平台的使用 目录 引言什么是AutoMLAutoML的优势常见的AutoML工具和平台 Google Cloud AutoMLH2O.aiAuto-sklearnTPOTMLBox AutoML的基本使用 Google Cloud AutoML使用示例Auto-sklearn使用示例 AutoML的应用场景结论 引言 自动…...
【每日一练】python求最后一个单词的长度
""" 求某变量中最后一个单词的长度 例如s"Good morning, champ! Youre going to rock this day" 分析思路: 遇到字符串问题,经常和列表结合使用来解决, 可以先用列表的.split()分割方法进行单词分割, 再…...
[红明谷CTF 2021]write_shell 1
目录 代码审计check()$_GET["action"] ?? "" 解题 代码审计 <?php error_reporting(0); highlight_file(__FILE__); function check($input){if(preg_match("/| |_|php|;|~|\\^|\\|eval|{|}/i",$input)){// if(preg_match("/| |_||p…...
【Go - sync.once】
sync.Once 是 Go 语言标准库中的一个结构体,它的作用是确保某个操作在全局范围内只被执行一次。这对于实现单例模式或需要一次性初始化资源的场景非常有用。 典型用法 sync.Once 提供了一个方法 Do(f func()),该方法接收一个没有参数和返回值的函数 f …...
Spark RPC框架详解
文章目录 前言Spark RPC模型概述RpcEndpointRpcEndpointRefRpcEnv 基于Netty的RPC实现NettyRpcEndpointRefNettyRpcEnv消息的发送消息的接收RpcEndpointRef的构造方式直接通过RpcEndpoint构造RpcEndpointRef通过消息发送RpcEndpointRef Endpoint的注册Dispatcher消息的投递消息…...
win10安装ElasticSearch7.x和分词插件
说明: 以下内容整理自网络,格式调整优化,更易阅读,希望能对需要的人有所帮助。 一 安装 Java环境 ElasticSearch使用Java开发的,依赖Java环境,安装 ElasticSearch 7.x 之前,需要先安装jdk-8。…...
Linux中,MySQL的用户管理
MySQL库中的表及其作用 user表 User表是MySQL中最重要的一个权限表,记录允许连接到服务器的帐号信息,里面的权限是全局级的。 db表和host表 db表和host表是MySQL数据中非常重要的权限表。db表中存储了用户对某个数据库的操作权限,决定用户…...
个人电脑网络安全 之 防浏览器和端口溢出攻击 和 权限对系统的重要性
防浏览器和端口溢出攻击 该如何防 很多人都不明白 我相信很多人只知道杀毒软件 却不知道网络防火墙 防火墙分两种 : 1、 病毒防火墙 也就是我们说的杀毒软件 2、 网络防火墙 这是用来防软件恶意通信的 使用防火墙 有两种 1、 半开式规则…...
美食聚焦 -- 仿大众点评项目技术难点总结
1 实现点赞功能显示哪些用户点赞过并安装时间顺序排序 使用sort_set 进行存储,把博客id作为key,用户id作为value,时间戳作为score 但存储成功之后还是没有成功按照时间顺序排名,因为sql语句,比如最后in(5…...
拓扑图:揭示复杂系统背后的结构与逻辑
在现代软件开发和运维中,图形化的表示方式越来越重要。拓扑图,作为一种关键的可视化工具,不仅能够帮助我们理解系统的结构和组件间的关系,还能提升系统的可维护性和可扩展性。 什么是拓扑图? 拓扑图是一种展示系统或网络中各个节点(如服务器、交换机、数据库等)及其连…...
Java面试八股之什么是spring boot starter
什么是spring boot starter Spring Boot Starter是Spring Boot项目中的一个重要概念。它是一种依赖管理机制,用于简化Maven或Gradle配置文件中的依赖项声明。Spring Boot Starter提供了一组预定义的依赖关系,这些依赖关系被封装在一个单一的包中&#x…...
探究项目未能获得ASPICE 1、2级能力的原因及改进策略
项目整体未能获得ASPICE 1、2级能力的原因可能涉及多个方面,以下是基于参考文章中的信息和可能的情境进行的分析: 1.过程成熟度不足:ASPICE(Automotive Software Process Improvement and Capability Determination)是…...
WHAT - 不同 HTTP Methods 使用场景、使用方法和可能遇到的问题
目录 前言基本介绍具体介绍前置知识:幂等和非幂等幂等操作非幂等操作幂等性和非幂等性的应用场景总结 1. GET2. POST3. PUT4. PATCH1. 确保操作是幂等的2. 使用版本控制或条件更新3. 全量更新部分属性4. 使用特定操作指令5. 幂等标识符示例代码总结 5. DELETE6. HEA…...
Pytorch使用教学4-张量的索引
1 张量的符号索引 张量也是有序序列,我们可以根据每个元素在系统内的顺序位置,来找出特定的元素,也就是索引。 1.1 一维张量的索引 一维张量由零维张量构成 一维张量索引与Python中的索引一样是是从左到右,从0开始的ÿ…...
【Git多人协作开发】同一分支下的多人协作开发模式
目录 0.前言场景 1.开发者1☞完成准备工作&协作开发 1.1创建dev分支开发 1.2拉取远程dev分支至本地 1.3查看分支情况和分支联系情况 1.4创建本地dev分支且与远程dev分支建立联系 1.5在本地dev分支上开发file.txt 1.6推送push至远程仓库 2.开发者2☞完成准备工作&…...
Vue使用FullCalendar实现日历/周历/月历
Vue使用FullCalendar实现日历/周历/月历 需求背景:项目上遇到新需求,要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色,一个工单内部,需要以不同颜色显示三个阶段。 效果图 日历 周历 月历 安装插件…...
社交圈子聊天交友系统搭建社交app开发:陌生交友发布动态圈子单聊打招呼群聊app介绍
系统概述 社交圈子部天交友系统是一个集成即时通讯、社区互动、用户管理等功能的在线社交平台。它支持用户创建个人资料,加入兴趣围子,通过文字、图片、语音、视频等多种方式进行交流,满足用户在不同场景下的社交需求 核心功能 -,…...
【微信小程序实战教程】之微信小程序原生开发详解
微信小程序原生开发详解 微信小程序的更新迭代非常频繁,几乎每个月都会有新版本发布,这就会让初学者感觉到学习的压力和难度。其实,我们小程序的每次版本迭代都是在现有小程序架构基础之上进行更新的,如果想要学好小程序开发技术&…...
PHP身份证实名认证接口集成守护电商购物
在这个万物互联的世界里,网购已成为日常生活中不可或缺的一部分。然而,随着线上交易的增加,如何保护消费者和商家免受欺诈,确保每一笔交易的安全,成了亟待解决的难题。这时,身份证实名认证接口应运而生&…...
为什么有了MAC还需要IP?
目录 MAC地址(Media Access Control Address)IP地址(Internet Protocol Address)为什么需要两者? IP地址和MAC地址在网络通信中扮演着不同的角色,它们各自有独特的功能和用途。下面是它们的主要区别和为什么…...
SpringBoot中如何使用RabbitMq
一,RabbitMQ简介和基本概念 RabbitMQ 是一个开源的消息中间件,基于 AMQP(高级消息队列协议)实现。 它由 Erlang 语言开发,并且支持多种编程语言,包括 Java、Python、Ruby、PHP 和 C# 等, 下载…...
LangChain自定义Embedding封装 之 ERNIE Bot
LangChain自定义Embedding封装 之 ERNIE Bot 百度飞浆平台的 ERNIE Bot 导入下面方法 和 环境 ,即可验证 embedding ERNIE_Bot_embedding() class ERNIE_Bot_embedding(BaseModel, Embeddings):client: Anyroot_validator()def validate_environment(cls, value…...
Git 安装教程
1、登录git 官方网站:https://git-scm.com/ 点击左边的 Downloads 或者 右边标识的下载标志,它根据电脑操作系统自动匹配版本 Downloads for Windows 2、以 windows 为例下载对应版本 网络有时可能不大好,阿里镜像下载超快。 下载好以后&a…...
Lua 类管理器
Lua 类管理器 -- ***** Class Manager 类管理*****‘local ClassManager {}local this ClassManagerfunction ClassManager.Class(className, ...)print(ClassManager::Class)--print(className)-- 构建类local cls {__className className}--print(cls)-- 父类集合local …...
实现领域驱动设计(DDD)系列详解:领域模型的持久化
领域驱动设计主要通过限界上下文应对复杂度,它是绑定业务架构、应用架构和数据架构的关键架构单元。设计由领域而非数据驱动,且为了保证定义了领域模型的应用架构和定义了数据模型的数据架构的变化方向相同,就应该在领域建模阶段率先定义领域…...
配置sublime的中的C++编译器(.sublime-build),实现C++20
GCC 4.8: 支持 C11 (部分) GCC 4.9: 支持 C11 和 C14 (部分) GCC 5: 完全支持 C14 GCC 6: 支持 C14 和 C17 (部分) GCC 7: 支持 C17 (大部分) GCC 8: 完全支持 C17,部分支持 C20 GCC 9: 支持更多的 C20 特性 GCC 10: 支持大部分 C20 特性 GCC 11: 更全面地支持 C20 …...
Android14 - 前台Service、图片选择器 、OpenJDK 17、其他适配
前台服务 1. 指定前台服务类型 以 Android 14(API 级别 34)或更高版本为目标平台的应用,需要为应用中的每项前台服务指定服务类型,因为系统需要特定类型的前台服务满足特定用例。具体介绍如下: 在Android 10 在 <service> 元素内引入了 android:foregroundServiceT…...
数据恢复教程:如何从硬盘、SD存储卡、数码相机中恢复误删除数据。
您正在摆弄 Android 设备。突然,您意外删除了一张或多张图片。不用担心,您总能找到一款价格实惠的数据恢复应用。这款先进的软件可帮助 Android 用户从硬盘、安全数字 (SD) 或存储卡以及数码相机中恢复已删除的数据。 Android 上数据被删除的主要原因 在…...
谷粒商城实战笔记-47-商品服务-API-三级分类-网关统一配置跨域
文章目录 一,跨域问题1,跨域问题产生的原因2,预检请求3,跨域解决方案3.1 CORS (Cross-Origin Resource Sharing)后端配置示例(Spring Boot) 3.2 JSONP (JSON with Padding)3.3 代理服务器Nginx代理配置示例…...
stm32平台为例的软件模拟时间,代替RTC调试
stm32平台为例的软件模拟时间,代替RTC调试 我们在开发项目的时候,如果用到RTC,如果真正等待RTC到达指定的时间,那调试时间就太长了。 比如每隔半个小时,存储一次数据,如果要观察10次存储的效果࿰…...
《设计模式之美》读书笔记2
从Linux学习应对大型复杂项目的方法: 1、封装与抽象:封装了不同类型设备的访问细节,抽象为统一的文件访问方式,更高层的代码就能基于统一的访问方式,来访问底层不同类型的设备。这样做的好处是,隔离底层设备…...
C++ STL set_difference 用法
一:功能 给定两个集合A,B;计算集合的差集,即计算出那些只包含在A中而不包含在B中的元素。 二:用法 #include <vector> #include <algorithm> #include <iostream>int main() {std::vector<int&…...
【基础算法总结】优先级队列
优先级队列 1.最后一块石头的重量2.数据流中的第 K 大元素4.前K个高频单词4.数据流的中位数 点赞👍👍收藏🌟🌟关注💖💖 你的支持是对我最大的鼓励,我们一起努力吧!😃😃 1…...
python-绝对值排序(赛氪OJ)
[题目描述] 输入 n 个整数,按照绝对值从大到小排序后输出。保证所有整数的绝对值不同。输入格式: 输入数据有多组,每组占一行,每行的第一个数字为 n ,接着是 n 个整数, n0 表示输入数据的结束,不做处理。输…...
成功者的几个好习惯,你具备了几个
每个人都想成为自己领域的佼佼者,然而,成功并非偶然,它往往与一系列良好的习惯紧密相连。这些习惯如同灯塔,指引着成功者在波涛汹涌的大海中稳健前行。 一、设定明确目标 没有明确的目标,就如同航海没有指南针&#…...
centos中zabbix安装、卸载及遇到的问题
目录 Zabbix简介Zabbix5.0和Zabbix7.0的区别监控能力方面模板和 API 方面性能、速度方面 centos7安装Zabbix(5.0)安装zabbix遇到的问题卸载Zabbix Zabbix简介 Zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。zabbix 能监视各种网络参…...
php编译安装
一、基础环境准备 # php使用www用户 useradd -s /sbin/nologin -M www二、下载php包 # 下载地址 https://www.php.net/downloads wget https://www.php.net/distributions/php-8.3.9.tar.gz三、配置编译安装 编译安装之前需要处理必要的依赖,在编译配置安装&…...
[K8S] K8S资源控制器Controller Manager(4)
文章目录 1. 常见的Pod控制器及含义2. Replication Controller控制器2.1 部署ReplicaSet 3. Deployment3.1部署Deployment3.2 运行Deployment3.3 镜像更新方式3.4 Deployment扩容3.5 滚动更新3.6 金丝雀发布(灰度发布)3.7 Deployment版本回退3.8 Deployment 更新策略 4. Daemon…...
C#,.NET常见算法
1.递归算法 1.1.C#递归算法计算阶乘的方法 using System;namespace C_Sharp_Example {public class Program{/// <summary>/// 阶乘:一个正整数的阶乘Factorial是所有小于以及等于该数的正整数的积,0的阶乘是1,n的阶乘是n࿰…...
KubeSphere介绍及一键安装k8s
KubeSphere介绍 官网地址:https://kubesphere.io/zh/ KubeSphere愿景是打造一个以 Kubernetes 为内核的云原生分布式操作系统,它的架构可以非常方便地使第三方应用与云原生生态组件进行即插即用(plug-and-play)的集成࿰…...
Spring 系列
SpringBoot 实体类(Entity)层 实体类(Entity)通常属于模型层(Model Layer)或领域层(Domain Layer)。它们代表应用程序中的核心业务数据结构,与数据库表结构紧密对应。在…...
基于opencv[python]的人脸检测
1 图片爬虫 这里的代码转载自:http://t.csdnimg.cn/T4R4F # 获取图片数据 import os.path import fake_useragent import requests from lxml import etree# UA伪装 head {"User-Agent": fake_useragent.UserAgent().random}pic_name 0 def request_pic…...
配置SSH公钥互信
目录 第一台主机:servera(172.25.250.101) 第一步:查看 . ssh目录下面是否为空 第二步:输入命令ssh-keygen 第三步: 再看查看一下. ssh目录 第四步: 输入命令 ssh-copy-id root172.25.250…...
WEB渗透Web突破篇-SQL注入(MSSQL)
注释符 -- 注释 /* 注释 */用户 SELECT CURRENT_USER SELECT user_name(); SELECT system_user; SELECT user;版本 SELECT version主机名 SELECT HOST_NAME() SELECT hostname;列数据库 SELECT name FROM master..sysdatabases; SELECT DB_NAME(N); — for N 0, 1, 2, ……...
DAY15
数组 冒泡排序 冒泡排序无疑是最为出名的排序算法之一,总共有八大排序 冒泡的代码还是相当简单的,两层循环,外层冒泡轮数,里层依次比较,江湖中人人尽皆知 我们看到嵌套循环,应该马上就可以得到这个算法的…...
pytest结合allure-pytest插件生成测试报告
目录 一、安装allure-pytest插件 二、下载allure 三、生成allure报告 四、效果展示 一、安装allure-pytest插件 二、下载allure 下载之后解压,解压之后还要配置环境变量(把allure目录下bin目录配置到系统变量的path路径),下…...