当前位置: 首页 > news >正文

实用指南:《前端学习总结:GitLab、状态管理、组件库与 Umi.js》

之前的公司离职之后,现在来到了一家新的公司,氛围很不错,至少能沉浸式学习,毕竟是实习,归根到底还是自学,以及接触真实的工程。


今天的前端学习收获很大,我总结了一下几个方面的知识。

一、GitLab 代码提取与分支管理

我学习了 GitLab 的基础流程,包括如何通过 Personal Access Token 提取项目代码、如何在本地创建开发分支、推送到远程 dev 分支,以及如何合并到 main 分支。
具体流程如下:

  1. 初始化本地项目的git仓库 git init 。

  2. 添加远程仓库地址 git remote add origin 你的仓库地址。

  3. 提交本地代码添加到提交区 git add . (提交所有的代码文件【除了屏蔽的不需要提交的】)。

  4. 将提交的代码放到暂存区等待推送 git commit -m "init 初始化第一次提交"。

  5. 必须切换分支到dev (直接推main分支不“合法”) git checkout -b dev。

  6. 推送到dev分支 git push -u origin dev (-u建立追踪关系 下次提交可以直接git push)

  7. 第一次提交得登录,需要设置token(个人资料里面设置访问令牌),之后账户名称就写自己的,然后密码就复制访问令牌。

  8. gitlab上发起合并,dev合并到main然后删除dev(这里删除是远程删除)

  9. 本地删除dev分支 git branch -d dev 远程删除 git push origin --delete dev

该流程保证了多人协作时代码管理的规范性和安全性。


二、状态管理库 Valtio

一个轻量的状态管理库,类似于 Resso 或 Pinia,但在 React 中应用非常方便。就是我还学习了 Valtio,这
它的特点是直接修改 state 就可以自动更新 UI,无需额外的 dispatch 或 reducer。
举个简单例子,我创建了一个计数器,直接修改 state.count 就可以触发组件重新渲染,非常直观。

相比传统 Redux,Valtio 的代码更少,逻辑也更清晰,适合小型到中型工程的全局状态管理。

简单的代码练习(这里就不利用ts了)。

首先很简单的用proxy创建store配置对象,然后我们这里在对象里面直接设置我们的状态以及操作状态的方法,这里用的store.name,也允许用this。

只读的,不允许直接更改。就是启用也是用useSnapshot这个api获取store对象,接着直接调用方法和状态就能够了。注意用api获取对象中的内容


三、组件库依赖

在开发任务中,我还了解了组件库的依赖工具:

  • url-parse:用于解析 URL,方便处理路由或参数。

  • stylelint:CSS/LESS 代码规范检测工具,可以保证样式整洁统一。

  • father:组件库构建工具,负责生成可发布的组件包。

  • dumi:文档站生成工具,可以根据 Markdown 文件自动生成文档和组件 Demo,非常适合 UI 组件库开发。

通过这些工具,允许搭建完整的组件库研发、打包、文档和预览流程。


四、React 框架:Umi.js

我还了解了 Umi.js,它是一个企业级 React 框架,不同于基础的 Create React App。用于业务方案,后台管理任务,核心目标,快速搭建,管理艰难,前端应用。
核心特点包括:

  • 路由管理:帮助约定式路由和配置式路由。

  • 插件化:行集成权限管理、国际化、微前端等机制。

  • 构建优化:内置 Webpack,支持按需加载、SSR 等。

  • 支持ts

  • 强大的插件系统,帮助各种功能(antd)等

相比 CRA,Umi.js 更适合中大型业务项目,可以让项目结构更规范,开发效率更高。

路由的简单使用案例。

目录的名称是固定的,这样更方便创建,比如layout会自动做为布局组件,这样在声明路由的时候,若是不添加熟悉layout false就会成为layout组件的子组件。

除了layout组件为独立页面,其他的页面都是默认被layout包裹的组件,这里index:true是默认展示index组件。


五、总结

今天的学习让我对前端项目的整体流程有了更加清晰的认识:

  1. Git 分支管理和多人协作流程。

  2. 轻量状态管理 Valtio 的方便使用。

  3. UI 组件库的依赖工具和构建流程。

  4. dumi 文档站生成机制和使用方式。

  5. Umi.js 企业级框架特点。

这些知识点串联起来,可以让我更迅速上手公司的前端项目,也对后续深入学习和开发提供了清晰思路。

http://www.hskmm.com/?act=detail&tid=16726

相关文章:

  • C#中,EXCEL与表列顺序完全一致情况的导入处理(BeginBinaryImport)
  • Gitee PPM:数据驱动的DevSecOps项目管理新范式
  • acme.sh:强大的ACME协议Shell脚本,支持多DNS API
  • P9545 [湖北省选模拟 2023] 环山危路 / road 题解
  • 探秘圆周率 π:圆周率计算在线工具
  • 以史为鉴【长期置顶】
  • java21学习笔记-未命名的模式和变量 - 指南
  • 达梦数据库DM-查询指定模式下表的大小
  • 【笔记】Prfer 序列
  • win11 无线投屏(Miracast:)引发的思考附带解决方案 - Popeye
  • 2025年十大主流项目管理工具评测:功能覆盖与成本效益分析
  • 关于MCO使用配置
  • 向量那点事儿
  • c++输入输出详解
  • docker/docker compose/k8s
  • 中国开发者迎来新选择:Gitee成为研发协作平台转型期的中流砥柱
  • RK3588-ubuntu server - 详解
  • 一文教你上手 Geometric Glovius 6.0:安装、授权与首个项目演示
  • 32单片机+free rtos移植CJSON库函数主要流程
  • Gitee如何重塑中国开发者生态:本土化创新与数字化转型的双重奏
  • 输入输出接口
  • Go语言中的信号捕获与优雅退出:SIGINT、SIGTERM和SIGKILL详解 - 若
  • (二)3.1.9 生产“稳”担当:Apache DolphinScheduler Worker 服务源码全方位解析
  • 完整教程:生产环境实战:Spring Cloud Sleuth与Zipkin分布式链路追踪实践
  • 训练“系统级思维”,听时序数据库 IoTDB Committer 说说从设计到应用的成长
  • 关于gradle项目启动
  • Day08
  • 常见闪存区别
  • 进程、线程、协程、虚拟线程,傻傻分不清楚
  • 事倍功半是蠢蛋55 ctrl+shift+f 每次搜索都按倒繁体