最佳实践 monorepo + pnpm + vue3 + element-plus 0-1 完整教程monorepo最

前言：

本文将教会大家如何快速搭建 monorepo + pnpm + vue3 + element-plus 项目架构

目标：即使初学者也可以跟随教程完整搭建 monorepo 架构

温馨提示：码字不易，先赞后看，养成习惯！！！

0：monorepo是什么？

维基百科：In version-control systems, a monorepo is a software-development strategy in which the code for a number of projects is stored in the same repository.

翻译：在版本控制系统中，monorepo 是一种软件开发策略，其中许多项目的代码存储在同一存储库中。

听着挺唬人，说白了就是多仓库项目统一在一个 git 仓库管理的这种管理模式叫做 monorepo

1：安装环境

1：pnpm: 8.1.0

2：node: 16.16.0

2：架构搭建

2.1：创建项目

新建一个文件夹命名为 monorepo 通过 vscode 打开，新建终端。

2.2：初始化项目根目录

在package.json里加一行 "private": true 加这个为防止我们意外地将私有项目发布

{ 
    "name": "monorepo",
    "version": "1.0.0",
    "description": "", 
    "main": "index.js", 
    "private": true, 
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"  
    }, 
    "keywords": [],
    "author": "",
    "license": "ISC"
}

2.3：创建根目录

按照 pnpm 官网指导在根目录创建 pnpm-workspace.yaml 文件

修改一下如图：

packages:  
  # 放置各种项目  
  - 'packages/*'  
  # 放置各种公用代码  
  - '_public_/**'

接下来创建对应的文件夹，如下图：

2.4：初始化目录

将 _public_ 文件夹下的模块初始化，添加一下 "private": true ，name 字段修改成自定义名称

同上步骤修改 utils

2.5：新建 `index.js`

在 components & utils 目录下新建 index.js 文件

这里要注意，如果是用 ts 请创建 index.ts 文件

这时候需要思考一个问题，components 与 utils 的定位。对于组件我们需要模板，而工具库我们是不需要的。所以需要对 components 进行 git 初始化，

在该目录下新建一个组件文件夹 components

执行命令 pnpm i vue element-plus

同时新建两个组件 button.vue & switch.vue 文件

在组件 button.vue & switch.vue 中写入以下代码

Button：

<script setup>  
  import 'element-plus/dist/index.css'  
  import { ElButton } from 'element-plus'  
  import { add } from 'utils'  
</script>  
      
<template>  
    <div>  
        <el-button @click="add(1,2)">我是 ElButton</el-button>  
    </div>  
</template>  

<style scoped>  
</style>

Switch：

<script setup>  
  import 'element-plus/dist/index.css'  
  import { ElSwitch } from 'element-plus'  
  import { ref } from 'vue'  
  const value1 = ref(true)  
</script>

<template>  
    <div>  
        <el-switch v-model="value1" />  
    </div>  
</template> 

<style scoped>  
</style>

在 utils 里新建一个工具函数 fun.js

代码如下

// 调用弹框提示  
export const windowAlert = (str) => {  
    window.alert(str)  
}  
export const add = (a, b) => {  
    window.alert(`相加的结果为:${a+b}`)  
}

在 index.js 中引入 fun.js

export * from './fun.js'

index.js 中导出两个组件

import Button from './components/button.vue'  
import Switch from './components/switch.vue'  
export {  
    Button,  
    Switch  
}

2.6：创建子项目

在 packages 里创建项目 demo1

执行 pnpm create vite 然后按照提示选择自己想要创建的项目（如何创建？更多细节指导？请看这里）

同理创建 demo2

2.7：安装公用组件、工具

执行命令： pnpm i akubela-components akubela-utils

可以看到创建的 akubela-components & akubela-utils 两个组件包已经安装到 demo1 中。同理将 demo2 也安装一下

进入 demo1 项目，将 App.vue 文件修改一下，如下：

代码如下：

<script setup>  
import { windowAlert } from 'akubela-utils'  
import { Button, Switch } from 'akubela-components'

windowAlert('我是demo1')  
</script>  
<template>  
  <div>  
    <h1>我是demo1</h1>  
    <Button></Button>  
    <Switch />  
  </div>  
</template>

<style scoped>  
</style>

把 demo1 项目先跑起来试试，执行：pnpm dev

如下图报错了，原因是我们在在组件仓库中引入了另外一个仓库的代码，所以找不到该文件

如何解决，既然是项目组件那在 monorepo 下就可以当做包处理，我们直接安装到全局即可

回到根目录安装

执行命令：pnpm i akubela-components akubela-utils

报错了，看了一下报错信息就是告诉我们，如果要安装到根项目中（即全局项目中）那么可以在指令后面加上 -w

重新执行命令：pnpm i akubela-components akubela-utils -w

全局安装成功，再试试看能不能跑起来了

重新执行命令：pnpm dev

还是没找到，找了一下发现是安装包名搞错了，改一下 utils → akubela-utils

重新执行命令：pnpm dev

打开浏览器试试

可以完美运行，试试 demo2

2.8：当前实现了什么？

1：实现了多项目共用公共项目组件库

2：实现了公用项目组件库间的相互调用

3：实现项目全量启动

3：说明

可以看到 pnpm + monorepo + vue3 + element-plus 这个一个架构雏形就基本形成了，目前在这个架构下可以干什么？

1：支持多项目并存在一个仓库下，不限于原来项目所使用的架构技术方案等

2：可以将各项目进行分包管理

3：可以精简大量公用代码（项目级别）

4：打包

既然是全流程，那自然缺少不了构建打包流程，推荐使用 Turborepo

但如果不喜欢或者不习惯使用的也可以使用 pnpm 来进行此流程，也完全没有问题。

4.1：安装 `Turborepo`

执行命令： pnpm install turbo --global

使用 turbo -v 查看是否安装成功

安装成功后在根文件夹中加入 turbo.js 文件

默认代码：

{  
    "$schema": "<https://turbo.build/schema.json>",  
    "pipeline": {  
        "dev": {  
          "cache": false  
        },  
      "build": {  
        "dependsOn": ["^build"],  
        "outputs": [".next/**", "!.next/cache/**"]  
      },  
      "test": {  
        "dependsOn": ["build"],  
        "inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts", "test/**/*.tsx"]  
      },  
      "lint": {}  
    }  
  }