当前位置：首页 > 科技 > 软件

Vue 微前端开发的七大神器（译）

来源：责编：时间：2023-12-06 09:19:44 149观看

导读免责声明本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考，英文原味版请临幸 7 Best Tools for Vue.js Micro Frontends[1]。微前端彻底改变了 Web App 的构建和维护方式。使用正确的工具集，Vue 爱好者可以轻松克

免责声明
本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考，英文原味版请临幸 7 Best Tools for Vue.js Micro Frontends[1]。

微前端彻底改变了 Web App 的构建和维护方式。使用正确的工具集，Vue 爱好者可以轻松克服微前端的“管理危机”，并释放组件驱动开发的全部潜力。

虽然但是，选择最佳工具集是一项挑战，因为有一大坨具有不同功能的工具。因此，在本文中，我将探讨 Vue 微前端的七种人气工具，辅助您入股 Vue 微前端的最佳工具。

1. Bit（比特）

图片

Bit[2] 是一个独特的工具，具有强大的组件共享和协作功能。它允许开发者采用组件驱动开发，将具有较小自治组件的产品组合为松耦合协同工作的微应用程序。

它使开发者更容易构建和迭代不同的 App 部分，因为每个组件都是在分离关注点的情况下开发的，并且是独立发布的。

对于团队而言，拆分产品所有权并自主并肩工作也更简单，而无需在开发过程中耦合。组织可以分配职责并有效地协作处理组件，以大规模组合产品。

借助 Bit，开发者可以在集成开发环境中设计、开发和测试 Vue 组件，其中包含每个组件的单独源文件、依赖、元数据和配置。您可以始于足下，在项目外部构建新功能并向 App 添加组件，或者将现有功能提取并转换为自治组件。

功能特性：

将 Vue App 的开发拆分为松耦合组件，这些组件可用作微应用。组件可以是功能、UX/UI、边缘函数、逻辑和其他任何东西。
App 中每个组件的独立版本控制和更新，使团队能够大规模获得更大的自主权。
支持构建时和运行时集成，包括 single-spa 和模块联邦。
在多个 App 间共享和复用微前端，并在组件级别跨应用编排更新和更改。
提供集中式组件中心，实现团队内部的高效协作，内置支持自动化文档，实现可发现性。
支持组件版本控制和依赖管理。
与测试框架集成，使开发者能够独立测试其 Vue 组件。
支持创建组件库。

2. Single-SPA

图片

Single-SPA[3] 是一个强大的工具，用于在 Vue App 中编排微前端。它提供了一种灵活且可扩展的方法来构建模块化 App，允许不同的 Vue App 或微前端共存并无缝协作。Single-SPA 的框架不可知性增加了与其他前端框架集成的灵活性，使其成为复杂项目的多功能选择。

功能特性：

支持多种前端框架，包括 Angular 和 React。
控制微前端的初始化、挂载和卸载，优化性能和资源利用率。
提供微前端间通信和数据共享机制。
简化微前端架构中的路由和导航。

3. Vite

图片

Vite[4] 是下一代构建工具，可提高 Vue App 的开发速度和性能。它利用 ES 模块等现代 JS 功能来显著缩短构建和编译时间，实现近乎瞬时的 HMR（热模块替换）和快速服务器启动。借助这些功能，开发者可以轻松构建具有无与伦比的速度和性能的微前端。

功能特性：

具有即时 HMR 的超快开发服务器。
ES 模块筑基的架构，可实现更快的代码转换和打包。
按需编译，可快速启动服务器并提高性能。
支持 TS、JSX、CSS 预处理器和其他现代工具。
与 Vue SFC（单文件组件）无缝集成，实现快速开发。

4. Vue Devtools（开发者工具）

图片

Vue Devtools[5] 是一个浏览器扩展，它提供了专为 Vue App 设计的强大调试和检查工具。它允许 Vue 爱好者检查组件层次结构、跟踪组件状态、分析性能并轻松调试 App 行为。

功能特性：

组件检查器，用于可视化组件层次结构和关系。
状态和 props 探索器，用于在运行时跟踪组件数据和 props。
事件侦听器查看器，用于分析事件处理和组件之间的通信。
性能分析器，用于识别性能瓶颈并优化渲染。
时间旅行调试，用于跟踪组件状态随时间的变化。

5. Vue Router（路由）

图片

Vue Router[6] 是 Vue 官方路由库，为构建 SPA 和微前端提供了强大的路由能力。其声明性语法、对嵌套路由的支持和动态路由功能使其成为创建可扩展和可维护的微前端架构的宝贵工具。

功能特性：

可以使用关联的组件配置路由，可以轻松地将 URL 映射到特定视图。
支持动态路由，支持开发者根据动态数据或参数创建路由。
内置支持嵌套路由，允许开发者创建分层和嵌套的 UI 结构。
提供路由守卫，在路由级别实现导航守卫。

6. Pinia

图片

Pinia[7] 是一个现代优雅的状态管理技术方案，专为 Vue App（包括微前端）量身定做。借助 Pinia，Vue 爱好者可以通过有效地跨组件管理和共享状态、改进代码组织和减少不必要的耦合来创建可扩展的微前端。

功能特性：

使用浅显易懂的 API 进行响应式状态管理。
用于模块化和可复用状态管理的作用域 store。
内置 TS 支持，可增强类型安全性和开发者工作效率。
与 Vue 响应式系统无缝集成。
Devtools 集成，便于调试和检查状态更改。

7. qiankun

图片

qiankun[8] 是一个给力的微前端编排框架，它简化了多个 Vue 微前端的开发和集成到单个 App 中的过程。它提供微前端之间的无缝通信、路由和生命周期管理。借助 qiankun，Vue 爱好者可以将巨型单体 App 分解为更迷你的、可管理的微前端，这些前端可以独立开发和部署。

功能特性：

微前端组合，用于集成多个 Vue 微前端。
跨微前端的共享路由和导航。
微前端之间的状态共享和通信。
微前端的独立开发、部署和版本控制。
生命周期管理，包括微前端的挂载、卸载和更新。

完结撒花

Vue 微前端已成为构建 Web App 的首选方案，选择正确的工具可以显着提高 DX 和生产力。在本文中，我们探讨了 Vue 微前端的七大神器及其超能力。

举个栗子，Bit 允许开发者创建、管理和协作处理自治组件，而 Single-SPA 则为编排微前端提供了灵活的框架。Vite 实现了闪电般的开发和增强的性能，而 Vue Devtools 提供了专为 Vue App 量身定制的强大调试功能。

前端任意门

[1]7 Best Tools for Vue.js Micro Frontends: https://blog.bitsrc.io/best-7-tools-for-vuejs-microfrontends-ebd6f4345979

[2]Bit: https://bit.dev

[3]Single-SPA: https://single-spa.js.org

[4]Vite: https://vitejs.dev

[5]Vue Devtools: https://github.com/vuejs/devtools

[6]Vue Router: https://router.vuejs.org

[7]Pinia: https://pinia.vuejs.org

[8]qiankun: https://qiankun.umijs.org

本文链接：http://www.28at.com/showinfo-26-38521-0.htmlVue 微前端开发的七大神器（译）

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： .NET Core的中间件来对Web API进行流量限制实现方法

下一篇： Go语言的select: 多路复用的核心

标签：

热门焦点

小米官宣：2023年上半年出货量中国第一！

今日早间，小米电视官方微博带来消息，称2023年小米电视上半年出货量达到了中国第一，同时还表示小米电视的巨屏风暴即将开始。“公布一个好消息2023年#小米电视上半年出货量中国
vivo TWS Air开箱体验：真轻臻好听

在vivo S15系列新机的发布会上，vivo的最新款真无线蓝牙耳机vivo TWS Air也一同发布，本次就这款耳机新品给大家带来一个简单的分享。外包装盒上，vivo TWS Air保持了vivo自家产
6月iOS设备好评榜：第一蝉联榜首近一年

作为安兔兔各种榜单里变化最小的那个，2023年6月的iOS好评榜和上个月相比没有任何排名上的变化，仅仅是部分设备好评率的下降，长年累月的用户评价和逐渐退出市场的老款机器让这
K6：面向开发人员的现代负载测试工具

K6 是一个开源负载测试工具，可以轻松编写、运行和分析性能测试。它建立在 Go 和 JavaScript 之上，它被设计为功能强大、可扩展且易于使用。k6 可用于测试各种应用程序，包括 Web
Automa-通过连接块来自动化你的浏览器

1、前言通过浏览器插件可实现自动化脚本的录制与编写，具有代表性的工具就是：Selenium IDE、Katalon Recorder，对于简单的业务来说可快速实现自动化的上手工作。Selenium IDEKat
破圈是B站头上的紧箍咒

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之每年的暑期档都少不了瞄准追剧女孩们的古偶剧集，2021年有优酷的《山河令》，2022年有爱奇艺的《苍兰诀》，今年却轮到小破站抓住了追
iQOO 11S新品发布会

iQOO将在7月4日19:00举行新品发布会，推出杭州亚运会电竞赛事官方用机iQOO 11S。
联想的ThinkBook Plus下一版曝光，键盘旁边塞个平板

ThinkBook Plus 是联想的一个特殊笔记本类别，它在封面放入了一块墨水屏，也给人留下了较为深刻的印象。据有人爆料，联想的下一款 ThinkBook Plus 可能更特殊，它
电博会与软博会实现"线下+云端"的双线融合

在本次“电博会”与“软博会”双展会利好条件的加持下，既可以发挥展会拉动人流、信息流、资金流实现快速交互流动的作用，继而推动区域经济良性发展；又可以聚