monorepo基础搭建教程（从0到1 pnpm+monorepo+vue）

前言

有个项目要引入一个第三方库，但是第三方库下载下来的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