- 博客(167)
- 收藏
- 关注
RSS订阅原创 AI工程化之生成式UI & A2UI（一）
本文系统介绍了生成式UI和Google A2UI技术。生成式UI通过AI直接生成前端代码（完全生成式）或DSL（混合式），实现千人千面的动态界面和研发提效。Google A2UI提出组件级和消息级协议，采用JSON规范实现渲染框架解耦，支持多端渲染。文章详细阐述了A2UI的架构设计，包括协议生成、服务端处理和渲染器实现，并对比了与传统前端框架的差异，指出A2UI本质是UI=F(AI(UI)+AI(state))的创新模式。最后通过playground项目展示了A2UI的实践应用。
2026-03-23 23:25:32
183
原创 AI工程化之Agent架构
本文介绍了基于大语言模型(LLM)的Agent基础架构实现。主要内容包括： Agent核心架构 通过工具调用(Tool)扩展LLM能力 采用ReAct模式：思考->执行->观察->再思考的循环 需要维护上下文历史消息以实现状态感知 关键技术实现 工具调用通过JSON格式传递参数 使用SSE协议与LLM服务通信 通过prompt激发模型输出思考过程 处理流式输出拼接完整参数 实例演示 实现write_file和read_file工具 完成"生成测试文件+代码审查"任务流程
2026-03-21 12:47:53
353
原创 AI工程化之MCP&skill
MCP（模型控制协议）是一种标准协议，旨在降低AI工具开发成本并提升其可移植性。该协议采用C/S架构，由Client与Server通过标准化接口通信。文章详细介绍了如何搭建MCP Server，包括创建入口、建立连接、对接TRAE Client等步骤，并重点演示了基于IDL和业务知识生成语义化mock数据的功能实现。通过将接口描述与业务文档注入AI上下文，MCP Server能够生成具有实际业务含义的JSON格式mock数据，解决了传统mock方式缺乏语义化的问题。调试时需注意使用console.error
2026-03-18 14:27:36
339
原创 AI工程化之LLM基础入门
本文介绍了大语言模型(LLM)的基础知识及其工程化应用。首先阐述了AI技术发展的三大驱动力：Transformer架构突破、GPU硬件适配和互联网数据沉淀。重点讲解了LLM的核心概念，包括模型规模与能力的关系、上下文窗口限制以及"幻觉"问题。文章详细分析了两种模型增强方式：模型本身的微调、蒸馏等技术，以及AI工程中的提示词优化等方法。通过OpenAI API实现了一个交互式ChatBot示例，展示了流式响应、中文设置等功能。最后深入讲解了Function call机制，演示了如何让LLM
2026-03-17 00:04:35
394
原创 前端工程化之微前端
微前端摘要 微前端是一种将多个独立前端应用组合成整体的架构模式。其核心特点包括技术栈无关、独立开发部署、增量升级、状态隔离等。常见的实现方式有iframe和single-spa框架。iframe虽然简单但存在URL不同步、UI隔离等问题；single-spa则通过生命周期管理子应用，提供更灵活的集成方案。微前端架构解决了大型应用多人协作、版本迭代等痛点，同时保持各模块独立性。实际开发中需权衡不同方案的优缺点，根据项目需求选择合适的实现方式。
2025-06-23 17:16:31
682
原创 前端工程化之自动化部署
代码中创建 .github/workflows/deploy.yaml， .github/workflows/test.yaml文件，上传到github后，系统会自动触发部署，从而自动增加 gh-pages 分支，分支下相对应的文件 和 本地执行“pnpm run build”生成的 build/dist 文件下的内容一致。需要对权限进行授权，对仓库的读，写权限，创建文件权限等设置，对仓库进行授权后，才能对当前仓库进行干预，有些工作流会去写些目录到当前工作当中，不会让其他人擅自对仓库内容篡改。
2025-04-20 15:24:11
1482
原创 前端工程化之自动化测试
提示：自动化测试：写基础包的一定要进行自动化测试，为了让使用者使用的更放心，使用开源包也是看是否有自动化测试，还要看测试覆盖范围是否是比较齐全的，小厂的话不太关注，中大厂的话使用第三方的包是非常关注自动化测试的。
2025-04-19 16:29:30
1040
原创 前端工程化之自动化构建
一般上半年行情比下半年行情好，这几年没有前几年行情好，一面的面试官很可能是你的同事，面试的时候不要有情绪，一上来就给hard难度，是不想要你，但是一开始是简单的，后来给hard难度的，证明面试官看好你。可以理解为搞翻译的，webpack不认识的语言，都可以编写对应的loader帮助webpack翻译成AST的，通过AST做各种各样的转换。追踪：发布流程的追踪，用户的追踪。持续的改进和迭代：不是一成不变的，是不停的根据开发的情况，系统整体的变更情况，生产环境的情况等不断变化。
2025-04-15 00:16:04
1484
原创 前端工程化之新晋打包工具
在工程当中，打印当前工程版本号//控制台打印当前工程版本号return {},console.log('当前工程版本号:1.0.0')},${import path from 'path' import fs from 'fs' //控制台打印当前工程版本号 export default function myVitePlugin() {console . log('当前工程版本号:1.0.0') } , transform(code , id) {
2025-04-12 19:25:23
1033
原创 前端工程化之模块化开发 & webpack
常用的构建工具：webpack，vite，rollup，esbuild，rspack初始化参数运行一个脚本传入相关参数，给到 webpack.config.js 文件当中，最终创建 webpack 实例化，会初始化参数，初始化参数后，会进行，将当前脚本的参数和webpack参数进行合并，得出开始编译通过上一步得到的 options，触发 Compiler 实例，new Compiler(options)，进行，相当于调用插件的 apply 方法，添加对某些事件的监听执行Compiler的 run 方
2025-04-05 01:21:10
1562
原创 前端工程化之前端工程化详解 & 包管理工具
前端工程化 = 前端 + 软件工程软件工程：系统和软件工程层面上的方法、规范，技术手段提升开发的效率，软件工程来自于实体行业类似建筑行业的方法论，将建筑行业的方法论运用到软件领域上，软件领域的相关方法论又延伸到前端上前端工程化 = 将工程化的方法系统化应用到前端开发中Clean Code 代码整洁指导基于业务诉求 => 产出架构设计 又快又好又稳 <= 系统 演进 可量化的方法。
2025-03-15 18:15:51
1305
原创 Vue进阶之Vue3源码解析（三）
从if (isDef(data) && isPatchable(vnode)) 这句开始就比较重要了。第二，不需要那么多的属性attribute，只针对当前所希望获取到的那部分属性去消费就好了。因此这里通过 虚拟对象(虚拟VDOM) 来进行判断，判断到底该用什么，怎么用它。前面所作的事情：将oldNode节点上的事件全都挂载到新的上处理。这个过程才是真正的双端比较，双端比较的过程就是所谓的。第三步，如果以上情况都没匹配到，就只能是纯找了。老新：头头，尾尾，头尾，尾头的情况。也是当前的子节点进行双端比较。
2025-03-06 17:35:38
1303
原创 Vue进阶之Vue3源码解析（二）
vue的创建入口src/vnode.ts.tsvnode处理src/renderer.ts进行一系列 ast 的动作，然后交由给patch，进行diff比较，针对diff处理完成后，最后将其转化为dom，dom是交由runtime-dom去做的runtime-dom根据vnode节点，其实是要转换成dom结构的，根据 ast 和 vnode节点 来区分 web 和 weex的节点，创建好vnode后，拿着这个节点把他转换成真实能够消费的属性调用到原生的API去进行dom维度的操作
2025-03-06 17:33:48
739
原创 Vue进阶之Vue3源码解析（一）
所有的点文件夹都是或中的内容完整的编译的核心，packages/compiler-core这三点是现在作为主流开发方式都是基于ts去做的types是作为ts的入口module是作为ECMAScript module(esModule)，正常通过 import xxx from xxx，引用的就是这个路径main 默认引用这个包的时候，作为UMD的方式去引用最后引用的路径npm上@vue/compiler-core包这个就是在 package.json 中就算是，怎样去具体约束 exports导出
2025-03-06 11:26:31
2092
原创 前端工程化之前端进阶之AST
compiler - 编译器将一种代码，转换为另外一种代码输入代码，也可以叫 源代码目标代码(浏览器识别代码)：js / cssts / vue / jsx / tsx / coffeescript(JS基础上，JS超集) -> jseslint / tslint 语法检查首先要先将源代码变成可识别的代码对浏览器无法识别的代码，进行转换 -> es5很多支持 es6，但是不会转 es6，因为es5更安全，具备更大的兼容性。
2025-03-06 08:45:18
1351
原创 React进阶之前端业务Hooks库（六）
有了AI后，做一个产品出来是非常简单的，横向要做的是，针对不同领域，不同方向，有一套统一的代码产出标准，或者作为前端，用AI能力生成一些后端的功能，表，库，高并发的设计。开发中想进行一些定制，通过插件化的思路去设计了一套请求中插件化的系统，与axios的区别在于：支持更多插件化的拓展，像日志请求异常上报，当前请求处理，通过插件化的方式去集成，也能在业务开发使用中做更多的定制。对于异常处理，会封装一个onError的方法，axios的来说，会使用catch方式进行拦截，重点是怎么将这种异常进行一个返回。
2025-03-04 10:14:18
331
原创 Vue进阶之Vue2源码解析
runtime和compiler区分：runtime，vue本身真正能够运行的部分，compiler，将vue2的模板语言写法，转化成vue能够直接识别的语法。vue-cli 引用的项目中，在 webpack配置里，引入了 vue-loader，就会把vue模板给做这件事，vue本身是不会做这件事的。vue2.6之后的版本都做的是兼容Vue3的内容，2.6版本前的内容才是纯vue2的内容，这里看的V2.6.14版本代码。使用函数去做的话，就可以通过 Vue的原型Vue.prototype给他去注入，
2025-02-28 15:13:26
1414
原创 React进阶之前端业务Hooks库（五）
class组件过程中，能很好的表达出属性，但是状态之间的逻辑是很复杂的，为了解决这个问题才使用了hook，hook能针对整个react函数的场景中，添加了一些动作，state，触发，保证代码执行的时候，去进行添加一些指定的副作用。首先 ，在workInProgress fiber上，创建fiber，fiber上的默认值，取的是memoziedState，并且还要创建对应的hook。涉及到if，涉及到else，涉及到条件判断，就不执行，那么对于下一个的状态的下标不确定了，通过链表的方式去累加的。
2025-02-27 22:58:44
395
原创 React进阶之前端业务Hooks库（四）
一般是在当前的页面后的时候，一直请求最新的数据，但是在页面前的时候，也可以获取实时的数据，只不过在页面后的时候，没有必要进行这么复杂的执行，可以在页面前的时候，visible的时候，再动态的去获取。像懒加载，当对应的dom内容，当快滑动到页面底部时候，无限滚动，接触到下一屏的元素了，再去进行加载，一般是适用于性能优化的方式。监听当前dom是否发生变化的，当dom树发生变化(当前的宽度，当前的元素发生变化)自定义业务功能，自定义请求封装，业务属性加载，业务上webSocket能力的使用。
2025-02-27 22:58:24
294
原创 Vue进阶之AI智能助手项目（五）——ChatGPT的调用和开发
permission中和上面类似src/views/chat/layout/sider/index.vuesrc/views/chat/layout/sider/List.vue这里也是触发它对应的方法，触发它对应的动作src/views/chat/layout/sider/Footer.vue这里做的都是加载的，都是符合上述所说的规范的setting组件也就是这个页面：Message/index.vue这里页面上显示的是这块内容：相当于这里也是基于会话的维度做了一层封装
2025-02-25 22:55:54
414
原创 Vue进阶之AI智能助手项目（四）——ChatGPT的调用和开发
这里的接口和上述service服务端的接口是映射起来的src/utils/request/index.tspost方法这里做的就是调用httphttphttp也就是这里的axiossrc/utils/request/axios.ts这里的service就是axiosLayout布局页面-viewsviews/pages 模板home 首页user 用户页list 列表页detail 详情页exception 异常页目录结构：使用的是 tailwind css
2025-02-25 22:55:26
470
原创 Vue进阶之AI智能助手项目（二）——项目评审与架构设计
针对所有的路由进入之前，通过自定义的接口，进行用户身份session的有效期的校验，当用户session无效的时候，都会清除掉用户的有效token，并且通过路由守卫在beforeEach的阶段进入到我们的无效页面。如果要做骨架屏，需要做接口渲染之前，页面骨架屏的渲染的话，就可以像这样把 layout 基本层级创建出来，这样，在数据渲染之前，会展示一个兜底的加载态。这种方式，是主应用给子应用去下发功能，主应用作为我们的基座，它能够对外暴露的场景。一些初始的设置，中文，英文，暗色，亮色等都在这里创建好。
2025-02-25 22:50:34
585
原创 React进阶之React核心源码解析（三）
newChildren和oldFiber都遍历完了，针对单一节点标记mutation，需要发生变化的元素记录在render阶段中，加update更新。也就意味着，由于优先级，先执行的是u2，然后再执行一次 u1 和 u2。这都是在render中做的，进入到commit阶段后，不管是谁，都不能被中断了，因为都已经在视图中了。newChildren剩下了，oldFiber没剩下，意味着新增了。因此，说的 异步可中断，说的都是在内存中能够做到的事情。要更新的节点中，去触发它的state。
2025-02-25 22:24:08
395
原创 React进阶之前端业务Hooks库（三）
所以说，对于外面count的变化，这里useEffect定义的hook，当前存储的hook的memoizedState，没有任何东西导致它的变化，所以这里存储的state一直为0，从而浏览器中看到的也一直是0。当没有依赖更新的前提下，setInterval是不受到影响的，只是在初始化的时候去执行，那么组件的更新，count+1时候，是不会触useEffect hook执行的。setState会导致组件的re-render，组件的re-render后会更新hook，通过合适的方式创建合适的hooks。
2025-02-25 22:07:51
368
原创 React进阶之前端业务Hooks库（二）
pnpm run test 执行成功后，会有一个对应的回调，如果失败的话，意味着单测失败，一般会发布到线上的环境。针对git的workflow，git的阶段，commit,push,pull,PR,不同的阶段要触发不同的节点，这个节点就是我们对应的钩子。-> react19里提供的，哪些东西该通过useMemo，useCallback，memo等包裹住的，没有包裹住的，就要通过它进行优化。xx.yml -> 命令行的缩进表达序列化的展示，类似json，只是一种文档后缀的格式，可视化表达的功能。
2025-02-21 15:37:02
819
原创 React进阶之React核心源码解析（二）
newChildren和oldFiber都遍历完了，针对单一节点标记mutation，需要发生变化的元素记录在render阶段中，加update更新。但是 上述例子中，如果是针对第一个元素<li>之前进行添加的话，会将所有的子列表全部销毁掉，重新创建，这都是在render中做的，进入到commit阶段后，不管是谁，都不能被中断了，因为都已经在视图中了。这是不同类型元素的展示，在Fiber中，定义当前组件类型不一致的时候，是需要将当前树全部销毁重建的。因此，说的 异步可中断，说的都是在内存中能够做到的事情。
2025-02-13 23:26:42
1263
原创 React进阶之React核心源码解析（一）
cline + deeseek => AI工具，上手成本非常低，非常便宜cursor 编辑器带着问题学源码学习方法论：由大到小 对比回答问题。
2025-02-13 14:32:37
1204
原创 React进阶之React Router&SSR
APP 渲染页面的结构，form表单Layout 布局，整体页面，html是在这里绘制的ErrorBoundary 目前还没用上这里 Route的根路径，算是最新版本的特性，指代当前 router的类型，这里的 ./+types/root 使用的是 tsconfig.json中的 rootDirs[1]的值，完整是 .react-router/types/app/+types 这个路径用的就是这个文件......是前端应用中常见的绘制的部分url";
2025-02-12 10:16:07
1620
原创 React进阶之React状态管理&CRA
通过一个参数，parentId 传递给下面的child，他们之间有一个关联的脐带：contextId，找到roots之间的关联方式。scrollIntoView，打开某个页面后，翻到某个位置，重新刷新后，还能够定位到上次翻到的那个位置上，实现锚点效果。有限状态自动机：各种各样的状态管理，通过事件触发一个行为，行为是固定的，相同的输入指向相同的输出，类似于纯函数。ref 不会重新渲染，与视图无关的时候使用，如果与视图相关的使用ref，则不会达到想要的效果。不会更新重新渲染，一般是在与视图更新无关的时候使用。
2025-02-10 17:20:21
1227
原创 React进阶之高阶组件HOC、react hooks、自定义hooks
类似：这种形式的就叫做自定义hook自定义hook中使用reactive中已有的hook本质上是：用已有的hooks做相同某种功能的聚合，聚合后能够在其他某个地方取消费}, []);保证代码是相对独立的}, [])return pos// 用法</div></div>
2025-01-22 16:22:38
1387
原创 React进阶之react.js、jsx模板语法及babel编译
react官网团队中选型时候，如果没有历史包的话，就选择最新的react，如果有历史包的话，选择不影响历史包升级的版本但是最新的也容易踩到坑在React19中，主要看新特性和带来的提升即可新特性：form类似于这里的use可以理解为，添加响应式的逻辑性能上的提升：ref可以作为props，平常项目中使用的是improveAPI去关联，而无法用props来关联。
2025-01-17 11:14:19
1581
原创 Vue进阶之Vue3后台系统
在pages下 —> Build and deployment =>这里就是部署我们的 github pages的，比如说，在github下注册了“xxx”仓库，针对于这个仓库，能够在站点的网址上有“xxx.github.io”这样的内容，就是通过这里Build and deployment，部署的话，就可以选择刚刚代码中部署的分支，然后选择根目录，把我们这样的静态资源（gh-pages分支上打包的产物）部署到 xxx.github.io上。因此，一般要么是放在同一的目录下，要么是在hooks下创建。
2025-01-15 17:12:51
1168
原创 Vue进阶之AI智能助手项目（三）——ChatGPT的调用和开发
先进行clean清空，清空完成后会重新打包找到入口 src/index.ts，然后找到tsconfig.json文件，通过下面的代码，就能找到配置的文件encode-bundle.config.ts:根据这些配置的文件，通过src/index.ts作为入口，我们就能打包，打包之后的产物之后就会放到build下express cors类似的抽离的config文件的目录：上述内容中所涉及的方法：=> fetchUsage():上述的第三方的请求也就是Open-ai的这个请求：上述这个请求也就
2025-01-13 10:26:03
1425
2
原创 Vue进阶之AI智能助手项目（一）——项目评审与架构设计
从vue的角度出发，怎么借助ai的场景去体现vue的专精度从前端的视角分析，当面对中大型场景下，怎么搭建一个项目AI+前端。
2025-01-08 16:11:17
1832
原创 Vue进阶之Vue Router&SSR
hash和history的区别点并不多，开始是对base进行处理，后面都直接调用用webhistory，对事件的监听，事件方法的处理进行了统一，只是对路径做了区别。现在：访问一个url，也都会向服务器拉一个页面回来，但是由于spa工程，服务器返回的都会在nginx层进行一个转发，都转发到根目录了。有这么一种情况，针对不同id的用户，路由的前面路径是同样的，但是后面会针对不同人的id从而路径是不同的，这里会有一个问题，让首屏加载的资源越少，节点更少，组件异步，则首屏渲染的更快，加载的更快。
2024-12-23 15:43:12
954
原创 Vue进阶之Vue CLI服务—@vue/cli-service & Vuex
平常npm run serve，npm run dev就是执行的是 vue-cli-service serve 和 vue-cli-service dev，最终真正执行的是 node bin/vue-cli-service.js run serve，本质上也就是Commander。下面的这个就是通过vue-cli创建的默认的模板，里面有标识符，就是ejs模板化语言，在开发中称之为生成模板的过程，使用的就是ejs(嵌入式的js)还是先看cli-service的package.json找到bin的入口文件。
2024-11-27 09:51:17
2608
1
原创 Vue进阶之Vue CLI
cli：commander+inquirer commander：cmd输入命令，inquirer：交互式选择器 通过问答的方式获取的是 options 然后去消费options，添加代码模板。上述的vue --version输出的是vue-cli版本而不是vue的版本的原因是什么呢？这里的pkg和刚刚创建的test的项目中的package.json的内容是对应着的。看一个脚手架，先看脚手架的入口文件(bin的vue)这段代码使用的是lib下的create的指令。
2024-11-27 00:27:09
1314
原创 Vue2进阶之Vue3高级用法
hooks最重要的特点：对于我们来说，不需要关心内部的逻辑，而且与Vue2相比，提供了一个非常合理的方式，使用Vue2的option API很容易写出三五千行的代码，但是对于函数式编程来说，按照逻辑功能拆分下来，一个文件至少包含一个功能，其他功能引用即可。
2024-11-05 09:12:16
973
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人