微前端技术预研 - bit初体验

news2024/9/9 4:12:26

1.关于什么是微前端以及微前端的发展, 当前主流框架以及实现技术等,可参考这篇总结(非常全面),

微前端总结:目录详见下图

本文内容主要针对bit框架的实时思路以及具体使用。

1.什么是Bit?

Bit 是可组合软件的构建系统。它使得由独立版本化组件组成的应用程序无缝且快速。核心思想是Component-driven(组件驱动开发)。

Component-driven development(组件驱动开发)是一种软件开发方法论,特别适用于现代前端开发领域,尤其是基于组件化框架(如React、Vue.js、Angular等)构建用户界面的应用程序。这一理念的核心思想是将UI设计和开发过程分解成一系列可重用的独立组件,并围绕这些组件进行迭代开发与测试。

它主要解决了以下问题:

  • 组件化管理:Bit 允许开发者在项目内部或者跨项目地发现、追踪、分享和重用代码组件(如React组件、Vue组件、纯JavaScript函数、CSS模块等)。这意味着开发团队可以在不同的项目之间共享和维护独立的、可复用的代码片段。

  • 版本控制:每个组件都可以有自己的版本历史记录,就像Git对整个项目进行版本控制一样,Bit提供了对组件级别的版本控制能力。这意味着团队成员可以方便地回滚、升级或选择特定版本的组件。

  • 协作与集成:Bit可以帮助团队更好地协作,因为它简化了组件的发布和消费流程。团队成员可以创建自己的私有或公开的组件仓库,使得不同项目的开发人员能够轻松地查找和集成经过测试的组件。

  • 提高代码质量和效率:通过组件化开发和复用,可以减少代码重复,提高代码质量,加速开发速度,并降低维护成本

优点:

  • 统一组件标准:鼓励开发团队遵循统一的组件化开发规范。

  • 高效协同:促进团队间的组件共享和重用,提升整体开发效率。

  • 隔离更新:单独更新和发布组件,不影响项目中其他组件的稳定性。

  • 透明追溯:组件版本信息清晰,便于追踪和审计代码变更历史。

  • 跨项目复用:组件可以在不同项目、甚至不同技术栈之间轻松迁移和使用。

编辑器配置:vscode 安装 Bit Visual Studio Code extension,如果您使用的是Webstorm请参考官网 IDE配置

bit: 使用步骤

一: 环境搭建

  • 安装bit
npx @teambit/bvm install
  • 初始化工作空间

  1. 已有组织和项目则直接执行如下命令初始化

bit init --default-scope my-org.my-project

 2.如果您是第一次使用, 请先登录bit平台新建组织和项目:  在 bit平台中根据引导创建组织和组件,会生成如下创建步骤, 只需按步骤执行即可, 这里默认创建的是node环境项目

  •  安装组件开发环境初始化(以vue项目为例)
// 创建一个包含自定义Vue 环境的新工作区
bit new vue my-workspace --env bitdev.vue/vue-env --default-scope my-org.my-scope

// 现有工作空间中创建自定义Vue环境:
bit create vue-env envs/my-vue-env --aspect bitdev.vue/vue-env

执行命名安装丢失的依赖

bit install --add-missing-deps

生成的env目录结构如下:

  • 环境设置完成, 开始创建应用(以vue应用为例)

执行命令查看支持的模版

bit templates

执行命令创建vue应用

bit create vue-app my-app

创建的vue-app目录结构如下

二: 创建一个UI组件

  •    执行命令创建一个vue登录组件
bit create vue login

生成组件目录如下:

  • 在应用中使用Login组件
<script setup lang="ts">
import Login from '@my-org/my-scope.login';
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <button @click="count++">
    App: {{ count }}
  </button>
  <Login title="my-test-login"></Login>
</template>

<style scoped>
button {
  color: blue;
}
</style>

运行

bit start
  • 导出组件到远程

登录

bit login

检查您的工作空间状态以查看哪些捕捉已准备好导出:

bit status

捕获最新的组件更改

bit snap apps/to-do --message "initial snap"

打标签

bit tag --snapped

导出暂存组件

bit export

三: 创建一个APP

执行命令创建一个vue-app

bit create vue-app my-vue-app

四: 使用远程组件

  • 新项目使用远程组件

执行命令,初始化bit工作

bit init

执行命令导入远程组件-以my vue card组件为例子

bit import 

五:已有项目中使用bit

Vue | Bit

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1961073.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《C语言实现各种排序算法》

文章目录 一、排序1、排序的各种方式分类 二、插入排序1、直接插入排序2、希尔排序3、希尔排序时间复杂度分析 三、选择排序1、直接选择排序2、堆排序 四、交换排序1、冒泡排序2、快速排序3、快速排序hoare找基准值4、快排挖坑法找基准值5、前后指针法6、快速排序非递归实现 五…

甄选范文“论数据分片技术及其应用”软考高级论文,系统架构设计师论文

论文真题 数据分片就是按照一定的规则,将数据集划分成相互独立、正交的数据子集,然后将数据子集分布到不同的节点上。通过设计合理的数据分片规则,可将系统中的数据分布在不同的物理数据库中,达到提升应用系统数据处理速度的目的。 请围绕“论数据分片技术及其应用”论题…

OCC BRepOffsetAPI_ThruSections使用

目录 一、BRepOffsetAPI_ThruSections简介 二、功能与特点 三、应用场景 四、示例 一、BRepOffsetAPI_ThruSections简介 在Open CASCADE Technology (OCCT) 中,BRepOffsetAPI_ThruSections 类是用来通过放样生成一个实体或者一个面壳(Shell)。当使用这个类时,isSolid 参…

具身智能,存内计算芯片应用新赛道

引言&#xff1a; 具身智能&#xff08;Emboided Al&#xff09;是指通过身体与环境的动态互动&#xff0c;实现对世界的感知、认知和行为控制的智能系统。具身智能强调的是智能体与环境的交互/学习/改变&#xff0c;而不仅仅是身体本身。具身智能的核心要素体现在智能体通过…

MySQL --- 数据类型

一、类型分类 数值类型bit(M)位类型&#xff0c;M指定位数&#xff0c;默认值1&#xff0c;范围1 - 64bool使用0和1表示真假tinyint [unsigned]带符号范围 -128~127&#xff0c;无符号范围 0~255&#xff0c;默认有符号smallint [unsigned]带符号范围 -2^15~2^15-1&#xff0c…

【网络世界】HTTPS协议

目录 &#x1f308;前言&#x1f308; &#x1f4c1; HTTP缺陷 &#x1f4c1; HTTPS &#x1f4c2; 概念 &#x1f4c2; 加密 &#x1f4c2; 加密方式 &#x1f4c1; 中间人攻击 &#x1f4c1; CA机构和证书 &#x1f4c2; 数据摘要&#xff08;数据指纹&#xff09; &…

nginx反向代理和负载均衡+安装jdk-22.0.2

ps -aux|grep nginx //查看进程 nginx 代理 nginx代理是负载均衡的基础 主机&#xff1a;192.168.118.60 这台主机只发布了web服务&#xff0c;没有做代理的任何操作 修改一下index.html中的内容 echo "this is java web server" > /usr/local/nginx/htm…

【OpenCV-Python实战项目】26-实时手部跟踪

0 介绍 目的&#xff1a;使用mediapipe库做手部的实时跟踪 检测流程&#xff1a;&#xff08;1&#xff09;手掌检测&#xff1b;&#xff08;2&#xff09;手掌特征检测 手掌特征分布&#xff1a;mediapipe手掌特征分布如下&#xff1a; 1.环境要求 后续代码运行环境&…

力扣SQL50 换座位

Problem: 626. 换座位 &#x1f468;‍&#x1f3eb; 参考题解 Code SELECT(CASEWHEN MOD(id, 2) ! 0 AND counts ! id THEN id 1WHEN MOD(id, 2) ! 0 AND counts id THEN idELSE id - 1END) AS id,student FROMseat,(SELECTCOUNT(*) AS countsFROMseat) AS seat_counts O…

电测量数据交换DLMSCOSEM组件第53部分:DLMSCOSEM应用层(中)

2.综述 (续上篇) 上篇地址:http://t.csdnimg.cn/DBKrg 2.2DLMS/COSEM应用层主要特点 2.2.1DLMS/COSEM应用层结构 DLMS/COSEM AL的主要部件是应用服务对象(ASO)。它给其服务用户提供服务(COSEM应用进程),并使用支撑层提供的服务。客户机和服务器侧都包含三个必…

Image Caption评估指标深入理解

前言&#xff1a;刚开始做图像描述的任务就整理了这些评估指标&#xff0c;时间久远有点记不清怎么具体实现原理了&#xff0c;结果面试的时候就问了这个问题&#xff0c;没答上来&#xff0c;郁闷了很久&#xff0c;还是基础不扎实&#xff0c;浅浅记录一下 文章目录 BLEUROUG…

C语言的结构体

结构体定义 结构体指针

【优选算法】滑动窗口——leetcode——串联所有单词的⼦串(hard)

目录 1.题目 2&#xff0c;算法原理 ​编辑 1.哈希表 2.left和right指针的移动 3.滑动窗口的执行次数 3.代码实现 1.C代码 2.C语言代码 4.C知识点 1. std::vector 2. std::string 3. std::unordered_map 4. 迭代器 5. 范围循环 (range-based for loop) 6. 动…

0基础学会无代码在亚马逊云科技AWS上利用LLM和智慧体(Agent)开发客服机器人

简介&#xff1a; 小李哥将继续每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿AI技术解决方案&#xff0c;帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS AI最佳实践&#xff0c;并应用到自己的日常工作里。 本次介绍的是如何利用亚马逊云科技大模型托管服…

【解决方法】git clone出现 curl 56 OpenSSL SSL_read: Connection was reset, errno 10054

当我们克隆别人的项目出现以下提示信息时候 remote: Enumerating objects: 7095, done. error: RPC failed; curl 56 OpenSSL SSL_read: Connection was reset, errno 10054 error: 2292 bytes of body are still expected fetch-pack: unexpected disconnect while reading s…

Python(C++)大尺度分层边值时变图统计推理并行算法

&#x1f3af;要点 &#x1f3af;分层结构制定生成模型 | &#x1f3af;贝叶斯模型选择程序 | &#x1f3af;分层结构图的信息性 | &#x1f3af;分层模型适应实值边协变量的网络 | &#x1f3af;分层模型适应时变网络&#xff0c;划分层对应于检测变化点 | &#x1f3af;定义…

Python中15个让你代码更优雅的上下文管理器用法

文末赠免费精品编程资料~~ 今天&#xff0c;我们要探索的是Python中一个超级实用又往往被低估的特性——上下文管理器。这可不是普通的魔法&#xff0c;它能让你的代码更加整洁、安全&#xff0c;还能自动处理资源&#xff0c;就像变魔术一样。准备好&#xff0c;让我们一起揭…

一分多行列转换(Gbase版)

1、源数据表结构 CREATE TABLE "sf_ref_pd_config" ("I_BATCH_NO" decimal(5,0) DEFAULT NULL COMMENT 批次ID,"V_ASSET_CLASS_NAME" varchar(200) DEFAULT NULL COMMENT 资产类型,"N_EXEC_ID" decimal(5,0) DEFAULT NULL COMMENT 执…

pyjwt:Python 中的 JWT 处理专家

文章目录 探索 pyjwt&#xff1a;Python 中的 JWT 处理专家简介&#xff1a;为何选择 pyjwt&#xff1f;什么是 pyjwt&#xff1f;安装 pyjwtpyjwt 的基本使用1. 编码JWT2. 解码JWT3. 验证签名4. 过期时间5. 自定义头部 场景应用场景一&#xff1a;用户登录场景二&#xff1a;A…

深度学习的数据类型总结

文章目录 1.基本概念1.比特&#xff08;bit&#xff09;&#xff1a;2. **字节**&#xff08;Byte&#xff09;:2. **数据类型**: 2. 相互转化 1.基本概念 1.比特&#xff08;bit&#xff09;&#xff1a; 计算机中最小的数据存储单位&#xff0c;用 0 和 1 表示。信息传输速…