# Vue3+Vite+Lerna+Monorepo微前端实践

**Repository Path**: steveouyang/lerna-monorepo-demo

## Basic Information

- **Project Name**: Vue3+Vite+Lerna+Monorepo微前端实践
- **Description**: Vue3+Lerna+Monorepo：落地大型SaaS应用的微前端解决方案
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2023-10-06
- **Last Updated**: 2024-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 引子
微前端，这个前端界的热门词汇，你听说过吗？它就像是前端世界的"复仇者联盟"，将各种技术集结在一起，共同对抗复杂的前端问题。

今天，我将向你展示如何使用 Vue3、Lerna 和 Monorepo 这三个超级英雄，来实现微前端在大型SaaS应用中的实践。 

[源码地址](https://gitee.com/steveouyang/lerna-monorepo-demo)


### 准备工作
  
首先，我们需要确保你的电脑上已经安装了 Node.js 和 npm。然后，我们需要安装 Lerna，这个可以让你像指挥官一样管理你的项目的工具：


```js
npm install --global lerna
```

现在，你已经拥有了管理前端项目的超能力！  


### 创建你的超级项目

在你的工作目录中，创建一个新的目录作为你的超级项目（也就是 Monorepo），并进入这个目录：


```js
mkdir SuperProject && cd SuperProject
```

然后，使用 Lerna 初始化你的超级项目：

```js
npx lerna init
```

恭喜，你的超级项目已经创建成功！  


### 添加你的子项目

  
将你的 TodoList 和 Cart 项目复制到 packages 目录中。你的目录结构应该如下：


```js
SuperProject/
  packages/
    TodoList/
    Cart/
  lerna.json
  package.json
```

看，你的子项目已经整齐地排列在你的超级项目中了！  


### 安装依赖

  
在你的超级项目的根目录中，使用 Lerna 安装所有的依赖：


```js
npm install
```

这就像是给你的子项目喂食一样，让它们拥有生长的能量。  


### 配置路由

  
在你的 Navigator 项目中，你需要配置 Vue Router 来正确地导航到 TodoList 和 Cart 项目。在你的路由配置文件（通常是 router.ts 或 router.js）中，你可以添加新的路由来引用 TodoList 和 Cart 项目的组件。  
  
首先，你需要在 TodoList 和 Cart 项目的 package.json 文件中添加一个 name 字段，这个字段的值将被用作在其他项目中引用这个项目的名称。例如：


```js
{
  "name": "todolist",
  "version": "1.0.0",
  ...
}
```

然后，在你的 Navigator 项目中，你可以像引用 npm 包一样引用 TodoList 和 Cart 项目。例如，如果你想要引用 TodoList 项目的 Home.vue 文件，你可以这样做：


```js
import TodoListHome from 'todolist/src/App.vue';
```

最后，你可以在你的路由配置中添加新的路由，以显示 TodoList 和 Cart 项目的 Home.vue 组件。例如：


```js
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

import TodoListHome from 'todolist/src/App.vue';

import CartHome from 'cart/src/App.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/todos',
    component: TodoListHome
  },
  {
    path: '/cart',
    component: CartHome
  },

  // 其他路由...

];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;
```

现在，当你访问 /todos 和 /cart 路径时，你应该能看到 TodoList 项目和 Cart 项目的首页组件了。  


### 打包你的项目

  
现在，你可以使用 Vite 来打包你的 Navigator 项目：


```js
cd packages/Navigator
npm run build
```

这就像是把你的子项目打包成一个礼物一样，准备好分享给世界。  


### 查看你的项目

  
你可以使用 serve 命令来快速查看你的打包结果：


```js
npm install -g serve
serve -s dist
```

现在，你可以在浏览器中访问 http://localhost:5000 来查看你的项目了。  


![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d1730becbf9496888b5b101808ce82b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=939&h=655&s=42494&e=png&b=ffffff)
---
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa28041b3f314d42b74915a54183d355~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=940&h=655&s=45399&e=png&b=ffffff)

### 关于Git仓库的维护
虽然这个项目在分工上是由三个人各自维护三个不同的工程，但显然项目最终是一个整体大项目，应该维护为一个单一仓库，Monorepo的字面意思也就是**单一仓库**！


### 结论
  
恭喜你，你已经成功地创建了一个使用 Vue3、Lerna 和 Monorepo 的微前端项目！现在，你可以像搭积木一样轻松地管理你的前端项目了。记住，每个问题都不是问题，只是你还没有找到解决它的方法。所以，让我们一起探索前端的世界，享受编程的乐趣吧！



> - 微前端是一种将一个大型前端应用分解为多个较小、更易于管理和维护的微应用的架构风格。每个微应用可以由不同的团队独立开发、测试和部署，可以使用不同的技术栈，可以有自己的开发和发布周期。  
>   
> - 在本项目中，TodoList 和 Cart 可以被视为微应用，它们可以独立开发和部署，也可以被 Navigator 应用（或其他应用）复用。Navigator 应用则扮演了微前端架构中的“容器”或“壳子”角色，它负责协调和组合微应用，提供统一的用户界面和用户体验。  
>   
> - Lerna 和 Monorepo 提供了一种有效的方式来管理和协调微应用的依赖关系，确保它们可以正确地工作在一起。Vite 则提供了一种高效的方式来打包和部署你的应用。  
>   
> - 所以，本项目结构和工作流程不仅是微前端的一种实践方案，而且是一种非常有效和高效的实践方案！