【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo

猿创征文 | 开箱即用 yyg-cli:快速创建 vue3 组件库和vue3 全家桶项目 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架。在 npm 上发布了两个月,11月1日进行了大升级,发布1.1.0 版本:支持创建 vue3 全家桶项目和 vue3 组件库项目。 阅读详情

前两篇文章分享了基于 vite3 vue3 的组件库基础工程 vue3-component-library-archetype 和用于快速创建该工程的工具 yyg-cli,但在中大型的企业级项目中,通常会自主搭建这些脚手架或加速器。优雅哥希望每位前端伙伴能知其所以然,故接下来的文章将进入 Vue3 企业级优雅实战 系列,整个系列将包括五大部分:

image-20221103232852183

首先会分享如何从 0 开始搭建一套组件库基础工程,即如何从 0 实现 vue3-component-library-archetype。

1 组件库工程应该具备的功能

在参考 Element Plus、Ant Design、Van UI 等 Vue3 开源 UI 项目后,优雅哥认为一套企业组件库工程需要具备如下功能:

  1. 组件库的开发:这是最基础的,组件库工程必须要支持组件库的开发,在工程中开发各种组件;
  2. 组件库的构建:组件库开发完成后,不可能让所有使用该组件库的项目都使用源码的方式引入到各个项目中,而是要将其构建打包后发布到私服或 npm 上,各个项目通过依赖的方式引入使用。在这个过程中,就涉及类型定义的提取、不同模块化规范的打包等;
  3. 组件库的发布:上面提到组件库构建打包后需要发布到私服或 npm,那难道在组件库开发阶段就频繁的发布到私服上吗?这样做也没问题。不过优雅哥的建议是在本地启动一个迷你私服,当组件库开发到一个阶段(如 beta版本)可以提供给其他项目使用时,便可以按照常规流程发布到公司的私服或 npm 上。
  4. 组件库文档的编写和发布:通常会采用 Ma
【Monorepo实战】pnpm+turbo+vitepress构建公共组件库文档系统 Monorepo架构可以把多个独立的前端系统放到一个仓库中去进行联调,这里记录基于pnpm中workspace功能,如何构建将vitepress和组件库进行联调,并且使用turbo进行任务顺序编排。 阅读详情

相关推荐

【猿创征文】 Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root

上文已经搭建了的基础环境,本文对进行初始化配置,包括:通用配置文件、公共依赖、ESLint。

youyacoder的博客 904

使用 pnpm 搭建 monorepo 项目

在软件开发中,随着项目的逐渐庞大和复杂化,管理多个相关联的代码库就变成了一项挑战。这时,Monorepo(单体代码仓)应运而生,它能有效管理多个项目或模块。Monorepo 是指在一个单一的版本控制系统仓库中管理多个模块/项目的策略。统一的工作流程和工具链:整个仓库的项目可以共享构建,测试,部署等流程。更容易的代码共享和重用:不同项目之间共享代码变得直接和高效。依赖管理:确保各个模块间依赖的版本一致性。原子性提交和版本控制:可以在单个提交中跨多个项目进行更改,简化版本跟踪。

子洋 Blog 3373

使用 Next.js 搭建 Monorepo 组件库文档

组件化开发是前端的基石,正因为组件化,前端得以百花齐放,百家争鸣。我们每天在项目中都写着各种各样的组件,如果在面试的时候,跟面试官说,你每天的工作是开发组件,那么显然这没有什么优势,如果你说,你开发了一个组件库,并且有一个在线文档可以直接预览,这可能会是你的一个加分项。今天我们就来聊聊组件库的开发,主要是组件库的搭建和文档建设,至于组件数量,那是时间问题,以及你是否有时间维护好这个组件库的问题。

斌擎科技 1131

网络基础(二):数制转换与分类编址的IPv4地址

本文介绍数制转换、IP地址、分类编址的IPv4地址,希望对你有帮助!

十七拾的博客 1057

FPGA,关于安装使用libero IDE V9.2 及其gold floating license配置

3、license安装根据,下面的提示进行,跟随setting up the license server on a host教程操作。1、从官网下载Libero IDE v9.2(如下图中的Libero IDE v9.2 software)4、下载完成license解压包后还需要下载 Daemons license ,地址如下。(2)第一行并不是在内填写,而是直接用您电脑名替换掉(1)修改license.bat前四行是,其务必保持和案例位置相同(避免出错)............

JasonK的博客 4298

大数据之VIP(Virtual IP,虚拟IP)负载均衡

VIP(Virtual IP,虚拟IP)负载均衡是一种在计算机网络中常用的技术,用于将网络请求流量均匀地分散到多个服务器上,以提高系统的可扩展性、可靠性和性能。

赵玉的专栏 4124

Synopsys PCIe IP 实战笔记:手把手教你配置本地数字回环(PIPE/RMMI)

本文详细介绍了Synopsys PCIe IP本地数字回环(PIPE/RMMI)的配置与调试全流程,涵盖硬件连接、寄存器操作及实战技巧。通过数字回环模式,开发者可在无真实对端设备的情况下验证PCIe接口功能,适用于芯片验证和FPGA原型开发。文章还提供了常见问题排查和性能优化建议,助力高效完成协议解析与调试。

weixin_30394669的博客 323

API Streaming Failed 400 <400>InternalError.Algo.InvalidParameter input content must be a string解决方案

本文主要介绍了API Streaming Failed 400 <400> InternalError.Algo.InvalidParameter input content must be a string解决方案,希望能对使用vscode中cline的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案

weixin_43178406的博客 3万+

华为OD机试真题2025双机位A卷 Java&Go 实现【采购订单】

在一个采购系统中,采购申请(PR)需要经过审批后才能生成采购订单(PO)。每个PR包含商品的单价(假设相同商品的单价一定是一样的)及数量信息。系统要求对商品进行分类处理:单价高于100元的商品需要单独处理,单价低于或等于100元的相同商品可以合并到同一采购订单PO中。针对单价低于100的小额订单,如果量大可以打折购买。

MISAYAONE的博客 1259

Qt版Dalsa线扫相机的采集Demo

Qt Dalsa

追赶时代的博客 605

PY32F406K1CU6+I2C+ AT24C64 基本配置

【代码】PY32F406K1CU6+I2C+ AT24C64 基本配置。

sam的博客 90

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

上一篇: 猿创征文 | 开箱即用 yyg-cli:快速创建 vue3 组件库和vue3 全家桶项目
下一篇: 【猿创征文】 Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root
程序员优雅哥
博客等级 码龄4年 52粉丝 58原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员优雅哥

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

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

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

打赏作者

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

抵扣说明:

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

余额充值