微前端技术预研 - bit初体验
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
远程组件使用方式,官方提供了3种,可根据自己实际需求选择:
将组件添加为依赖项bit install @ym-demo/demoapp.button将组件导入到工作区bit import ym-demo.demoapp/buttonFork 组件到工作区bit fork ym-demo.demoapp/button
使用方式二导入工作区:workspace.jsonc里面配置远程导入组件的路径"defaultDirectory": "bit-components",
执行命令后,项目文件下会生成对应目录
五:已有项目中使用bit
以追踪发布已有项目的product-list组件为例, 详细步骤如下:
bit init // 初始化bit环境bit add ./src/components/product-list // bit会跟踪组件对组件的依赖进行分析, 将会创建一个和文件名一样的组件(product-list为文件夹名称)bit status // 查看组件状态bit compile // 编译组件bit install // 安装依赖bit build // 打包bit tag ym-demo.demoapp/product-list --ver 0.0.1 // 确认组件的版本bit export ym-demo.demoapp/product-list // 导出到远程
注意:ym-demo.demoapp为bit远程工作区, 如没有请参考目录一:环境搭建中的初始化工作空间章节
相关文章:

微前端技术预研 - bit初体验
1.关于什么是微前端以及微前端的发展, 当前主流框架以及实现技术等,可参考这篇总结(非常全面), 微前端总结:目录详见下图 本文内容主要针对bit框架的实时思路以及具体使用。 1.什么是Bit? Bit 是可组合软件的构建…...
对象关系映射---ORM
一、什么是ORM? ORM(Object Relational Mapping),即对象关系映射,是一种程序设计技术,用于在面向对象编程语言中实现对象和关系型数据库之间的映射。 二、ORM是干什么的? ORM 的主要目的是简…...
Django REST Framework(十七)Authentication
1.认证Authentication 在 Django REST framework (DRF) 中,可以在配置文件中配置全局默认的认证方案。常见的认证方式包括 cookie、session、和 token。DRF 提供了灵活的认证机制,可以在全局配置文件中设置默认认证方式,也可以在具体的视图类…...

FPGA开发——数码管的使用
一、概述 在我们的日常开发中,数字显示的领域中用得最多的就是数码管,这篇文章也是围绕数码管的静态显示和动态显示进行一个讲解。 1、理论 (1)数码管原理图 在对数码管进行相关控制时,其实就是对于8段发光二极管和…...

什么是网络安全等级保护测评服务?
等保测评 依据国家网络安全等级保护制度规定,按照有关管理规范和技术标准,对非涉及国家秘密的网络安全等级保护状况进行检测评估。定级协助 根据等级保护对象在国家安全、经济建设、社会生活中的重要程度,以及一旦遭到破坏、丧失功能或者数据…...
基于深度学习的多模态情感分析
基于深度学习的多模态情感分析是一个结合不同类型数据(如文本、图像、音频等)来检测和分析情感的领域。它利用深度学习技术来处理和融合多模态信息,从而提高情感分析的准确性和鲁棒性。以下是对这一领域的详细介绍: 1. **多模态情…...

Glove-词向量
文章目录 共现矩阵共线概率共线概率比词向量训练总结词向量存在的问题 上一篇文章词的向量化介绍了词的向量化,词向量的训练方式可以基于语言模型、基于窗口的CBOW和SKipGram的这几种方法。今天介绍的Glove也是一种训练词向量的一种方法,他是基于共现概率…...
Plugin ‘mysql_native_password‘ is not loaded`
Plugin mysql_native_password is not loaded mysql_native_password介绍1. 使用默认的认证插件2. 修改 my.cnf 或 my.ini 配置文件3. 加载插件(如果确实没有加载)4. 重新安装或检查 MySQL 版本 遇到错误 ERROR 1524 (HY000): Plugin mysql_native_passw…...

Hive数据类型
原生数据类型 准备数据 查看表信息 加载数据 查看数据 复杂数据类型-数组 准备数据 查看数据 优化 复杂数据类型-map 准备数据 查看数据 复杂数据类型-默认分隔符 准备数据 查看数据 原生数据类型 准备数据 -- 1 建库 drop database if exists db_1 cascade;…...

OSI七层网络模型:构建网络通信的基石
在计算机网络领域,OSI(Open Systems Interconnection)七层模型是理解网络通信过程的关键框架。该模型将网络通信过程细分为七个层次,每一层都有其特定的功能和职责,共同协作完成数据从发送端到接收端的传输。接下来&am…...

MSYS2下载安装和使用
Minimalist GNU(POSIX)system on Windows,Windows下的GNU环境。 目录 1. 安装 2. pacman命令 3. 配置vim 4. 一些使用示例 4.1 编译代码 4.2 SSH登录远程服务器 1. 安装 官网下载:https://www.msys2.org/ 双击.exe文件&am…...

机器学习中的决策树算法——从理论到实践完整指南
决策树在机器学习中的应用与原理 1. 介绍1.1 定义和基本概念1.2 决策树在机器学习中的角色和重要性 2. 决策树的结构2.1 节点、分支、叶子节点的定义和功能2.1.1 节点2.1.2 分支2.1.3 叶子节点 2.2 树的深度和宽度的影响2.2.1 树的深度2.2.2 树的宽度 3. 决策树的构建方法3.1 基…...

FFplay介绍及命令使用指南
😎 作者介绍:欢迎来到我的主页👈,我是程序员行者孙,一个热爱分享技术的制能工人。计算机本硕,人工制能研究生。公众号:AI Sun(领取大厂面经等资料),欢迎加我的…...

php实现动态登录
简介: 效果:通过前端页面的注册,通过MD5将密码加密,发送到数据库,通过验证数据库的内容实现登录,以及各种保证安全的措施 实验环境:phphtmlcssmysql数据表,使用html css设计注册&a…...

Servlet2-HTTP协议、HttpServletRequest类、HttpServletResponse类
目录 HTTP协议 什么是HTTP协议 HTTP协议的特点 请求的HTTP协议格式 GET请求 POST请求 常用的请求头说明 哪些是GET请求,哪些是POST请求 响应的HTTP协议格式 常见的响应码说明 MIME类型说明 HttpServletRequest类 作用 常用方法 如何获取请求参数 po…...
探索数据的内在世界:sklearn中分层特征聚类标签的可视化技术
探索数据的内在世界:sklearn中分层特征聚类标签的可视化技术 在机器学习中,聚类是一种探索数据结构的强大工具。对于具有分层特征的数据,如文本、时间序列或分类标签,聚类结果的可视化可以提供深入的洞见。本文将详细介绍如何在s…...
airtest定位方法
airtest定位方法 最近遇到一个比较新颖的airtest方法,分享给大家。一键三连; airtest是一款用于自动化测试的Python库,被广泛应用于移动应用和游戏的测试中。在进行自动化测试时,定位元素是非常重要的一步,因为只有准…...
排列组合 n*(n-1)*(n-m+1)
n*(n-1)*(n-m1)/m! --# 组合 n*(n-1)*(n-m1)/m! local function get_combinations(n,m) c 1 c0 1 for i 1,m do c c*(n-i1) c c/i end return math.floor(c) end print(get_combinations(10,6)) 打印出来为:210...
Python面试整理-数据处理和分析
在Python中,数据处理和分析是一项非常重要的应用,得益于丰富的第三方库和工具,Python已经成为数据科学家和分析师的首选语言之一。以下是进行数据处理和分析时常用的工具和方法: 1. 数据处理 a. Pandas ● 功能: Pandas 提供了强大的 DataFrame 结构,使得数据操作和预处理…...

职业教育计算机网络综合实验实训室建设应用案例
近年来,职业教育在培养技能型人才方面发挥着越来越重要的作用。然而,传统的计算机网络技术教学模式往往重理论、轻实践,导致学生缺乏实际操作能力和职业竞争力。为了改变这一现状,唯众结合职业教育特点,提出了“教、学…...

深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...

uniapp手机号一键登录保姆级教程(包含前端和后端)
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号(第三种)后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...