monorepo基础搭建教程(从0到1 pnpm+monorepo+vue)
monorepo
- 前言
- 1、搭建空项目并配置pnpm-workspace.yaml
- pnpm init
- pnpm-workspace.yaml
- 2.配置packages测试文件
- 配置相关内容
- 3.引入packages内容至公共package.json
- 4.创建测试项目,并引入公共包
- 结语
前言
有个项目要引入一个第三方库,但是第三方库下载下来的npm包不能满足完整需求。所以想用monorepo的方式来引入这个第三方库,并且可以修改第三方库的内容。基于此,学习了monorepo的相关基础知识,本文主要讲解monorepo如何从0到1搭建。
技术栈:npm、pnpm、vite
1、搭建空项目并配置pnpm-workspace.yaml
首先搭建一个空项目,也就是一个空文件夹,并且在vscode中打开这个文件夹,名称任意。

实现monorepo比较简单的方法就是用pnpm+workspace.yaml文件去实现,所以我们首先要初始化项目用pnpm,然后创建pnpm-workspace.yaml文件去配置我们monorepo具体地址。
pnpm init

初始化后,应该有一个package.json文件。这里需要加一行代码,"private":true,来设置私有化,防止被发布
pnpm-workspace.yaml
然后去手动添加一个文件,pnpm-workspace.yaml,并且在其中设置具体公共包与项目的地址,并且去创建对应的文件夹。
如图所示,就是初始化,也就是第一步完成了。
2.配置packages测试文件
首先一般公共包都有一个css也就是ui库和一个配置util库,那么我们新建两个文件夹cssUI和util文件夹,并且用pnpm init分别给他们初始化,初始化后记得要加上"private:true.结果如下:

名字可能会重复,所以我在前面加上了@lp/utils等。
配置相关内容
写测试文件的目录如下

myUI.vue
<template><div>我有多少钱: {{ data }}<el-button type="primary" @click="addData">加一百</el-button></div>
</template>
<script setup lang="ts">
import "element-plus/dist/index.css";
import { ElButton } from "element-plus";
import { addData, data } from '@lp/utils'
</script>
ui下的index.js
import myUI from './components/myUI.vue'export {myUI
}
ui下的package.json
{"name": "@lp/csss","version": "1.0.0","description": "","main": "index.js","private": true,"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"element-plus": "^2.8.3","pnpm": "^9.10.0","vue": "^3.5.6"}
}
dataUtil.js
import { ref } from 'vue'export let data = ref(100)export const addData = () => {data.value = data.value + 100;
}
utils下的index.js
export { addData, data } from './dataUtil'
utils下的package.json
{"name": "@lp/utils","version": "1.0.0","description": "","main": "index.js","private": true,"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}
最后因为cssui文件夹下用到了element-plus,所以需要下载element-plus,
pnpm install vue element-plus
3.引入packages内容至公共package.json
引入上述写入的内容到package里面,两种方案,第一种
pnpm install -w @lp/utils @lp/csss
这时候,有可能网络延迟下载包失败,那就只能手动引入后install。
"dependencies": {"@lp/utils":"workspace:^","@lp/csss":"workspace:^"}

然后 pnpm install

4.创建测试项目,并引入公共包
首先打开终端并跳到apps文件夹下。并通过pnpm create vite来设置一个vue项目,具体流程如下



然后根据流程来引入,并install
cd test
pnpm install
最后把app.vue的内容修改并运行,
<script setup>
import { myUI } from '@lp/csss'
</script><template><div><myUI></myUI></div>
</template>
最后成功引入

结语
最终其实就是这样的效果,其中monorepo除了最简单的pnpm外,还可以使用turborepo实现,这里就不赘述了。
相关文章:
monorepo基础搭建教程(从0到1 pnpm+monorepo+vue)
monorepo 前言1、搭建空项目并配置pnpm-workspace.yamlpnpm initpnpm-workspace.yaml 2.配置packages测试文件配置相关内容 3.引入packages内容至公共package.json4.创建测试项目,并引入公共包结语 前言 有个项目要引入一个第三方库,但是第三方库下载下…...
使用Docker Compose一键部署
文章目录 使用Docker Compose一键部署一、引言二、环境准备1、安装Docker和Docker Compose1.1、安装Docker1.2、安装Docker Compose 2、验证安装 三、编写Docker Compose文件1、创建目录结构2、编写Dockerfile3、编写docker-compose.yml 四、部署项目1、构建镜像2、启动服务3、…...
【GVINS】
【GVINS】 1. GVINS的系统特点2. GVINS的融合导航存在问题3. GVINS的信号的组成4. GVINS的信号的组成 原理推导知乎 1. GVINS的系统特点 概述了一种名为GVINS的系统,它旨在解决视觉-惯性里程计(VIO)在长时间运行时出现的漂移问题。GVINS通过…...
Linux 给 vmlinux 添加符号
文章目录 前言一、centos7 给 vmlinux 添加符号二、ubuntu22.04 给 vmlinux 添加符号 前言 使用内核源码下的script文件:scripts/extract-vmlinux 可以从/boot/vmlinuz 提取出来 内核镜像文件vmlinux: # ./extract-vmlinux vmlinuz-3.10.0-693.el7.x86…...
【mac】MacOS无法打开XXX文件,因为无法验证开发者的问题解决
博主介绍: 大家好,我是想成为Super的Yuperman,互联网宇宙厂经验,17年医疗健康行业的码拉松奔跑者,曾担任技术专家、架构师、研发总监负责和主导多个应用架构。 技术范围: 目前专注java体系,以及…...
Docker 无法拉取雷池 WAF 的解决方法
引言: 近日,许多用户反映在使用 Docker 命令拉取雷池 WAF 镜像时遇到了困难,主要表现为连接超时错误。本文将为大家提供解决此问题的有效方法。 问题描述: 当尝试通过 Docker 命令拉取雷池 WAF 镜像时,部分用户遇到…...
进制转换,原码,反码,补码,二进制位运算及应用
进制转换 2B(0--1),8O(0--7),10D,16H(0——9,A——F) 8位二进制数,左边高位,右边低位 2,8,16 -> 10进制整数,小数 整数:从后往…...
node.js居家养老服务系统—计算机毕业设计源码35247
目 录 摘要 1 绪论 1.1选题的背景 1.2研究的意义 1.3国内外居家养老信息化管理现状分析 1.4 express框架介绍 1.5node.js功能模块 1.6论文结构与章节安排 2 居家养老服务系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 2.2.2数据修改流程 2.2.…...
OpenHarmony(鸿蒙南向开发)——小型系统芯片移植指南(二)
往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~ OpenHarmony(鸿蒙南向开发)——轻量系统芯片移植指南(一) Op…...
Live800:从心出发,以情动人:构建深度客户服务文化
在当今这个竞争激烈的市场环境中,企业之间的较量已不仅仅局限于产品质量的比拼,更在于谁能提供更优质、更贴心的客户服务。在这个背景下,“从心出发,以情动人”成为了构建深度客户服务文化的核心理念,它要求企业不仅要…...
分布式事务一致性:本地消息表设计与实践
概念 本地消息表是一种常见的解决分布式事务问题的方法。其核心思想是将分布式事务拆分成本地事务来处理,通过消息队列来保证各个本地事务的最终一致性。 实现步骤 创建本地消息表:在数据库中创建一个本地消息表,用于存储待发送的消息以及消…...
深入浅出Docker
1. Docker引擎 Docker引擎是用来运行和管理容器的核心软件。通常人们会简单的将其指代为Docker或Docker平台。 基于开放容器计划(OCI)相关的标准要求,Docker引擎采用了模块化的设计原则,其组件是可替换的。 Docker引擎由如下主…...
Flink 与 Kubernetes (K8s)、YARN 和 Mesos集成对比
Flink 与 Kubernetes (K8s)、YARN 和 Mesos 的紧密集成,是 Flink 能够在不同分布式环境中高效运行的关键特性。 Flink 提供了与这些资源管理系统的深度集成,以便在多种集群管理环境下提交、运行和管理 Flink 作业。Flink 与 K8s、YARN 和 Mesos 集成的详…...
Python 集合的魔法:解锁高效数据处理的秘密
引言 集合作为 Python 的一种内置数据类型,其本质是一个无序且不重复的元素序列。虽然表面上看它似乎只是列表或元组的一种变体,但实际上,集合背后有着更为高效的查找机制。通过学习和掌握集合的高级操作,我们不仅能更好地理解 P…...
Go必知必会:构建复杂数据模型的基石
Go语言以其清晰的语法和强大的内置类型系统,为构建高效且易于维护的软件程序提供了坚实的基础。在Go的数据类型体系中,结构体(struct)扮演着至关重要的角色,它是实现复杂数据模型的关键工具。结构体允许开发者将多个不…...
大数据Flink(一百一十七):Flink SQL的窗口操作
文章目录 Flink SQL的窗口操作 一、窗口的概述 二、Group Windows 1、滚动窗口(TUMBLE) 2、滑动窗口(HOP) 3、Session 窗口(SESSION&am…...
【西电电装实习】6. 手装无人机的蓝牙断连debug
文章目录 前言零、闪灯状态零零、翻滚角,俯仰角,偏航角一、问题描述二、现象解释三、解决方案参考文献 前言 在 西电无人机电装实习 时遇到的问题使用蓝牙芯片 CH582F。沁恒的蓝牙芯片CH582F是一款集成了BLE(Bluetooth Low Energy࿰…...
AIGC实战之如何构建出更好的大模型RAG系统
大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…...
【数据结构-差分】力扣1589. 所有排列中的最大和
有一个整数数组 nums ,和一个查询数组 requests ,其中 requests[i] [starti, endi] 。第 i 个查询求 nums[starti] nums[starti 1] … nums[endi - 1] nums[endi] 的结果 ,starti 和 endi 数组索引都是 从 0 开始 的。 你可以任意排列…...
Spark部署文档
Spark Local环境部署 下载地址 https://dlcdn.apache.org/spark/spark-3.2.0/spark-3.2.0-bin-hadoop3.2.tgz 条件 PYTHON 推荐3.8JDK 1.8 Anaconda On Linux 安装 本次课程的Python环境需要安装到Linux(虚拟机)和Windows(本机)上 参见最下方, 附: Anaconda On Linux 安…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程,并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令,把数据流转换成Message,状态转变流程是:State::Created 》 St…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...
