之前的公司离职之后，现在来到了一家新的公司，氛围很不错，至少能沉浸式学习，毕竟是实习，归根到底还是自学，以及接触真实的项目。
今天的前端学习收获很大，我总结了一下几个方面的知识。
一、GitLab 代码提取与分支管理
我学习了 GitLab 的基础流程，包括如何通过 Personal Access Token 提取项目代码、如何在本地创建开发分支、推送到远程 dev 分支，以及如何合并到 main 分支。
具体流程如下：
- 初始化本地项目的git仓库 git init 。
- 添加远程仓库地址 git remote add origin 你的仓库地址。
- 提交本地代码添加到提交区 git add . (提交所有的代码文件【除了屏蔽的不需要提交的】)。
- 将提交的代码放到暂存区等待推送 git commit -m "init 初始化第一次提交"。
- 需要切换分支到dev (直接推main分支不“合法”) git checkout -b dev。
- 推送到dev分支 git push -u origin dev (-u建立追踪关系 下次提交可以直接git push)
- 第一次提交需要登录，需要设置token（个人资料里面设置访问令牌）,之后账户名称就写自己的，然后密码就复制访问令牌。
- gitlab上发起合并，dev合并到main然后删除dev（这里删除是远程删除）
- 本地删除dev分支 git branch -d dev 远程删除 git push origin --delete dev
这个流程保证了多人协作时代码管理的规范性和安全性。
二、状态管理库 Valtio
我还学习了 Valtio，这是一个轻量的状态管理库，类似于 Resso 或 Pinia，但在 React 中使用非常方便。
它的特点是直接修改 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组件。
五、总结
今天的学习让我对前端项目的整体流程有了更加清晰的认识：
- Git 分支管理和多人协作流程。
- 轻量状态管理 Valtio 的简单使用。
- UI 组件库的依赖工具和构建流程。
- dumi 文档站生成机制和使用方式。
- Umi.js 企业级框架特点。
这些知识点串联起来，可以让我更快速上手公司的前端项目，也对后续深入学习和开发提供了清晰思路。
