实用指南：《前端学习总结：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 企业级框架特点。

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