rive文件前端怎么用

啊？说一下文件上传啊，很多同学这个文件上传呢，就死活过不去这个坎。看起来这个文件上传挺复杂的，因为他场景很多， 比如说有这个单个按钮点击上传一个文件的，也有上传文件夹的，也有上传多个文件的，还可以限制文件数量，也有这种卡片式的这种上传，对吧？还要显示上传的进度，有那种拖拽式的上传，还有就是大文件上传分片，还有就是那些先裁剪再上传，对吧？我随便列完，对吧？还有很多很多的其他场景，那场景是无穷无尽的， 他面对这么多场景，这个文件上传该怎么学习呢？所以这里呢，我就介绍一下学习文件上传的方式啊，不是说讲这个文件上传，第一呢时间也不够， 第二呢，就授之以鱼不如授之以渔嘛。所以讲一下他的学习方式该怎么去学。很多同学呢，学这个文件上传吧，他是按照场景去学的，就是比方说 我先学一个单按钮的上传，然后呢，再上传那个文件夹的上传，再学习这个多文件的上传，再学习这个卡片式的上传。那你要学疯，因为这个场景是无穷无尽的，你好不容易学了一百个场景呢，结果呢，你工作的时候用到了第一百零一个场景，你又懵逼了，而且这个学习成本是非常非常高的啊，不仅是文件上传，这里不能按场景去学，其实任何地方啊， 你都不能按照场景去学，因为场景是无限丰富的，你搞不清楚你以后工作或者是实际项目里面会用到什么样的场景，所以说按照场景的学习一定是错误的，那你说要不要基于一个场景去开发一个玩意呢？可以啊，但是呢，那是为了训练知识而用的，不是说为了去学习这个场景啊，场景也是不需要学习的， 这种学习方式呢，这个学习量是非常非常巨大的啊，划不来。那么第二种学习方式呢？那就会怎么样呢？就会去学现成的库有很多啊，就这些大堆。 首先呢是在这个主件库里边呢，像这些主件库里边，它本身也包含了一些文件上传的一些功能，那我能不能去针对库学习呢？对吧？我先学这个 enigma 怎么做文件上传，再学这个 admi 怎么去做文件上传，再学一些其他的 etc 怎么去做文件上传，这也是错误的学习方式啊， 因为这种针对库的学习的话，就会让你产生依赖，一旦脱离了这个库就难以干活了。他有哪些问题？第一个，如果说你这个工程里边是一些定制化的需求，这个库不满足你的需求又咋办呢？ 又懵了。然后呢，如果说库里边还有一些自身的 bug， 你 怎么去调呢？你也调不了。而且像这样的学习量啊，其实也很大的，因为像库里边有很多的 a、 p、 i， 很多的配置，是吧？如果说你不理解原理的话，连配置啥意思你都不知道。说正确的学习方式应该是什么呢？应该就是理解他的文件上传的原理是啥？ 理解的原理你原生就能够自然而然的实现，你原生都能实现了，库一个都不用学，一看文档瞬间秒懂。比如说你之前学个库搞了三个小时还没学明白，好不容易学明白了，开另一个库又懵逼了。但是呢，你不如花三个小时理解原理，理解原生是如何实现的，那些库一秒钟都不用学，一看就明白了，甚至你不看，你都能猜到他里边会有哪些配置， 他只能有这些配置，还能有哪些配置呢？所以说学习原理，他绝对不是为了浪费你的时间，反而是为了省你的时间的时间的。你要说对我念上传，你有哪些原理需要理解？ 我们来看一下文件上传的结构，就是一个客户端，这客户端可以是浏览器，也可以是别的玩意，都无所谓的。一个客户端，一个服务器，然后客户端通过一套协议把文件数据给服务器， 然后服务器呢？给一个回复，就这套逻辑嘛，那么这套逻辑里边是有哪些知识点呢？首先是客户端这边有一部分是纯语言层面的知识点，比方说样式对吧？我给你整个按钮什么样式，整个卡片什么样式，那纯样式啊，跟上传一点关系都没有。还有交互逻辑，这纯 gs 我点了过后会怎么样？那拖拽过后会怎么样？那进度条我怎么来控制，对吧？纯样式的交互逻辑。然后呢，一部分就是运算，比方说我要分片，分多少片啊？每片分多大呀，对吧？跟上传有关系吗？没有关系，就是 一个简单运算，比方说我要判断这个后缀名合不合法呀，判断文件大小啊，计算那个上传进度啊，这些都是属于运算，这些东西跟文件上传有关系吗？没有关系，他是纯 gs 和 css， 对 吧？把逻辑给他理清楚，分开，该谁负责的不该他负责的，不要去管。说这些东西，理解原理过后，其实很简单的， 对这个知识是这样，对前端的很多的知识都是这样，特别是那些前端的核心知识点，像什么浏览器的进程现成模型。所以说我为啥理解浏览器的进程现成模型呢？因为它跟很多东西是有关联的，你不理解浏览器的进程现成，你就不可能理解 gs 的 单现成。为啥是单现成的？你不理解 gs 是 单现成的，你就不可能理解它为啥需要一步，那一步都不能理解，那世界循环，那肯定理解不了， 你说出不出问题，比如说工作当中出问题了，很多进阶的知识根本就没法学习，看都看不懂。比如说刘若曦的炫闪管线也是一样，刘若曦的炫闪管线有七个步骤，每个步骤在干啥？你不理解这个，你不可能理解优化的，那还不要说我们的框架的原汁原味优化，像这些东西啊，都在我们的大师课里边，而且大师课是完全免费的，不管你之前是线下机构学的还是自学的，你们看的教程里边都是缺失这一部分知识的， 这些知识才是真正的能够影响你往高新发展的知识。你把这些知识呢，在大师课里面花几天的时间搞定，那你后边无论是高新就业还是在职提薪，都能够事半功倍管这个课啊，目前可以免费领啊。怎么领？在咱们账号主页点击头像进入账号主页，点击提示领就完事了啊。 好，客户端这一块呢，你其实没有什么刻意要学的，就是一些布局啊，交互逻辑啊，是吧？跟商场有关系吗？没有啥关系，你只要借是没问题，借是没问题，这一块就没问题。然后另一部分知识呢，是在服务器啊，这个服务器这一块呢，主要是涉及到文件的存储，要把文件存起来啊？那存哪啊？存成文件啊？还是存到数据库啊？存哪？总之要放个地方存，或者存到这个云端都行啊，它存 处方式有多样化的，然后就是安全，你这个文件会不会导致我服务器被攻击啊？对吧？那我可能要对文件的一些内容啊，或者是格式啊，做一些验证，然后就是访问控制，你将来如何来访问这个文件呢？我要把访问方式可能要回传给你，比方说你上传个图片过后，我要把图片的 u i l 地址要回传给你，对吧？这服务器要干的事， 如果说你要搭中间层的话，比方说你用 log js 搭一个中间层，服务器可能要涉及到文件的存储安全和访问控制，那么这一块你就需要自己写，不过大部分时候呢，像文件这一块啊，都是后台给你写好的啊，你也不用管。那你们核心要关注的其实无非就是这一块啊，网络协议这一块， 如何利用一个 app 网络协议把这个文件给他扔到服务器去，这是文件上传最核心的东西，你把这一块东西了解了，搞清楚了，不仅原声可以写了，所有的第三方库一看他的配置，瞬间明白他啥意思，他在控制啥，他里边很多东西都是跟这个网络协议有关系的， 都学原理啊，是最省事的，性价比最高的，一通百通。而且你把这个东西学好了过后，不仅仅是对文件上传有用，所有的网络请求他都需要这套协议啊，是不是都搞定了对吧？打折要打七寸，要抓住关键点，抓住核心点，只要他的细致，末端呢？到时候查阅文档就完事了。 这才是学习文件上传的方法。如果说你能用一个 a t p 的 原始报文就把文件给它上传过去，那你对应阿加克斯也好，对应到一些什么移动端也好，学习下都是非常轻松的事，因为你知道搞干啥了， 对吧？所以说你们学习文件上传啊，给你们个方向，重点学习这一块，如果说你之前 g s 那 一块还有问题的话，好好去补一下 g s 和 c s， 不 然的话这一块你也做不了，好吧，不要再去基于什么场景去学习，也不要再去基于什么酷去学习啊，用这种方式来学的话，你是学不会的。

上期视频发布的时间呢，是二零二五年的十二月八号，距离大家看到的这条视频呢，已经过去了一个多月了， 那在这一个多月里呢，其实我也没有闲着，我主要的经历呢是在尝试做一个小项目，我做了一个付费产品的网站叫 hello raf 点放，并且呢已经在二零二六年的一月三十一号，也就是前两天正式上线了。 那这个产品啊，一开始我的设想是把它做成一个 raf 资产的交易平台，有点类似于 gumroad 或者 blend market 这种形式，但是呢，它偏细分，就是专注于 raf 资产的交易。 为什么会有这样一个想法呢？是因为我在学习使用 rev 的 过程中呢，发现了一件事， rev 的 它的产出物呢，其实是非常适合作为数字资产进行交易的。 rev 本身呢，它有两种核心的产出物，第一种呢就是 r e v 文件， 它更像是一个编辑器工具，文件可以直接导入到 raf 编辑器当中进行二次编辑和修改。那不管是作为学习资料，还是作为二次创作的基础资源，这个文件形态本身呢，它肯定是有价值的。 那第二种呢，就是 r i v 文件，那这个文件呢，它可以直接在各种运行时中使用，嵌入起来呢也非常方便， 只要创作者在 rap 中制作的时候啊，设置好相对应的逻辑接口，不管是 web， ios， 安卓还是一些游戏引擎，都可以直接嵌入，并且接入到自身产品的逻辑当中进行使用。 所以在我看来，这两种文件其实都具备非常明确的资产属性和交易价值，那特别是我在学习 rap 的 过程当中呢，也经常能看到一些做的非常精良，完成度非常高的案例。但说实话，这些东西如果你让原作者直接免费分享出来，很多时候其实是有点强人所难的， 但是如果通过交易和购买的方式，那自然愿意的人会多很多。于是我就在想，能不能做这样一个平台，就是专门让 rap 的 使用者去交易 rap 相关的资产，再加上现在呢，有了 ai 的 帮助，设计和开发的效率呢，都被大幅的提升。我也很想去验证一件事 是，如果只靠我一人，是不是也能够把这样一个想法完整的去实现出来。当然一步到位，做一个完整的平台，不管是复杂度，工作量，甚至是风险啊，都太大了。所以我给自己定的策略就是分几步走。 那第一步呢，就是把最基础最核心的逻辑跑通，也就是 rap 资产的上传、展示以及销售的完整流程。 目前已经上线的网站呢，它是第一阶段的，只支持我自己上传展示，售卖我自己制作的案例。后续我在学习 rap 过程当中的案例的产出呢，也都会陆续上架到这个网站进行销售。 这对我来说呢，其实也是在验证这个需求是否真实存在的最好的一种方式。所以目前 hello rap 点放这个网站呢，已经算是一个比较完整的最小可行产品了。 那第二步呢，我计划逐步去实现创作者模式，也就是其他用户可以自行上传案例，在平台上进行展示和销售，真正形成一个交易平台的基本架构， 所以如果你也有销售自己 raf 资产的想法呢，也可以和我联系。等过段时间用户自行上传。和销售的功能做的差不多之后呢， 我想先邀请一部分用户来参与内测。那这一次项目的开发过程呢，对我来说确实也是第一次非常完整非常真实的 web coding 的 体验。为什么这么说呢？因为这个项目啊，从设计效果到代码实现，百分之九十九的内容 几乎都是 ai 生成的。在这个项目里面，我只做了非常少量的设计，只写了非常非常少量的代码。 那既然如此，为什么这个项目第一阶段还是花了整整一个多月才完成呢？说实话啊，这也完全超出了我一开始的预期， 我原本的判断就是最多一个星期，不超过两个星期应该就能搞定的。但是这个项目的文件夹创建的时间是二零二五年的十二月二十四号，一直到二六年的一月三十一号，第一阶段的开发呢，才算是基本完成，并且正式上线。 在这一个多月的时间里呢，我不仅开发了 howride 的 主站，还额外开发了一套用于管理网站案例内容的后台系统。 这个后台其实是在主站开发过程当中啊，自然产生的需求，一开始我是没想做的，它可以让我很方便的去了解案例的销售情况，以及上传修改调整在 howride 上售卖的案例内容。 同时呢，这套后台也是下一阶段创作者模式的基础，很多已经在后台中使用的功能逻辑呢，在创作者模式下，其实都是可以直接附用的， 所以在接下来的几期视频里呢，我会毫无保留的和大家去分享一下，在这个 hellride 项目的 web coding 的 过程中啊，整个项目的所有细节，从 从设计到开发设计的想法，工具，软件执行过程当中的问题，以及在整个过程当中最重要的 ai 相关的能力和坑。这些呢，我都会和大家好好的去聊一聊。 那之前提到过的要分享的 rap 学习经验的内容呢，我还是会找时间去更新的，只是我希望呢，我想先多做一些真实的案例啊，把东西研究的更深入一点，再和大家去分享更有价值，更有深度的内容。好的，那这期视频内容呢，先到这里，我们下期视频呢，很快再见。

启动之后呢，我们来看一看，这一些里面的内容呢，我们先给它呃，初步化，全部给它删掉啊，这一块呢是一样的，代码相同，然后呢我们在这个里面稍微给它修改一下，把这呢全部去掉，我们直接来新建一个这个文件啊，就比如说还是在 app 这个项目里面，我们直接呢引进来，比如说 import， 呃， react， 引进来之后呢，我们往外部去暴露一个组建，比如说就直接叫 app 吧， 好在这里呢，我们直接返回个 div， 那 这个里面，比如说我们叫妙玛，在这呢通过 class name。 但是这样在做之前呢，大家一定要注意点啊，在 index 点 cs 这个里面呢，一定要把 tailwind cs 引进来，这是一步一步自己去做的时候啊，一定要把它引进来，引进来之后呢，在这里去写对应的样式就可以了，比如说 b g amber， 比如说四百。好，这样一来呢，我们直接再重新来打开刚才的这个项目安装所有的依赖包，我都直接按照可以跑的这个版本给它拿过来了啊，我们重新跑起来之后来看一看，直接偏偏 start， 如果这样的话，其实跟它构建的时候，因为它输出的话，在构建这一层，它输出的 呃，基础那一层目录内容呢，在我们可以到它里面去看，比如说点到 win 这些呢，都是基于 g s 的， 我们刚才输出的呢，都是基于这种形态的啊，我们的这呢也是一样，再直接 p m start， 这样没问题的版本都是一样的啊，这个不知道具体是什么原因，可能是因为在构建的时候啊，因为我们其他的这些依赖都是版本都是完全一致的，那这里呢是没有问题的。 tailwind cs 包括这个 tailwind cs 的 版本的版本呢，也都是按照， 呃，这个四点一点十六啊， tailwind 四点一点十六。 tailwind 的 vt 的 版本呢是也是四点一点十六。往上翻一下，在 dev dependencies 里面翻到最上，翻到这里啊，这里也是四点一点十五啊，四点一点十五。这个版本。好，我们重新 pmpm 启动之后呢，就可以看到整个项目呢已经启动起来了，妙码啊，上面颜色也有了。 好，我们直接呢在这里可以再修改一些其他的，比如说我们现在把它的字体也可以放大，那直接 textboard border 吧，比如说啊，那这个时候呢它的字体变成这样，那如果你想把它的字体变到更大，那比如说你 font 这个时候呢就加粗了， 然后呢你 text 要给它把 size 加到最大，比如说九叉 l， 那 整个效果呢，就是基于 tailwind 就 已经把项目呢构建出来了啊，这是基于 react 和 tailwind。 那 把这一部分做完之后呢，接下来要去配置两个东西，第一个是那个 t s config json 里面啊，一定要把 process 这一部分呢，因为我们单独去分了一个 mono wrapper 包在 render 里面，所以呢把它要加到这个 process 里面来，这是第一步，第二步的话呢，在那个 vite renderer 这个地方要把 anions 给它加进去，这些对应的文档都有啊，这我就不跟大家一点一点来去介绍了。在 set c n u i 里面 点到 set c， n u i 进来之后呢，对应的文档点到 docs 集成到 vite 里面啊，它有一步一步的介绍，怎么去集成，然后呢把这两个去安装，安装之后呢，去引入啊，这个大家也可以去试一试，看大家会不会像我刚才一样报这个错误 啊，可能是因为版本关系，我就不去排查了。然后呢，这样去指定接下来的 t s config json 的 配置，指定 t s a p p 的 配置，当然我们没有 a p p， 我 们只有一个 render 点 config 点 g s 啊，那就直接把这一部分呢放到这儿， anions 跟它这里对应，它的 anions 呢，放好啊，一个是这个 vt config 点 t s 这里的 anions， 还有一个呢是 t s config 里面的这个 paths， 两边要对应好。这样对应好之后呢，那么我们这个项目就启动起来了啊，大家可以看到所有的内容呢，都已经完成了，那么在这一步，我们接下来去安装 c l c n 刚才给大家介绍的 c l c n 的 起安装的方法，按照这样安装好之后呢，如果你要去装对应的组建，比如说大家从这里看到一些组建比较好看，点到 components 里面啊，比如说有一个 button 组建，那直接点到 button 好，那比如像这些按钮啊，这有文字按钮，图标按钮都可以使用。直接用什么命令呢？ p n p x shaders natus eight 比如说你要装什么插件，就直接用这行命令啊， p n p x shaders， natus， 比如说装一个按钮插按钮的这个， 呃，主键就直接用它啊，要装其他的话呢，也都可以用这种方式来去安装好，这样做好之后，那么这样的呢，比如我们直接回车 在装到哪个目录呢？因为我这边配置了啊，有一个 component 点， jason 会配置整个 tailwind 和那个组建方面的一些别名，配置好之后，它会整个全部安装在 components 下面的 ui 这一层，比如说 button 在 这啊，这是 button 好 这一块呢，我们给大家介绍这，然后呢我们接下来直接来看一下有没有生效， 直接在这边 button 引进来，对应用的哪个版本呢？就直接用这个 ui 里面的 button， 直接你好保存，可能是依赖问题啊，依赖问题，好，这样呢，你好就有了， 你好，那如果说还想用其他的话呢，我们直接比如说要用 input， 那 你就先按照刚才那个方式把 input 先装进来，然后呢再使用，我们过来看一下，那这个 input 也就有了，当然这个颜色有点突兀啊，我就直接把颜色去掉了，去掉之后呢我们再来看一看啊，这个 效果啊，就我们把它都引进来了，那么这样呢，我们就直接将整个工具栏所有的内容呢全部导进来啊，这块怎么导呢？我们先把这个 flow 去掉，去掉之后呢我们因为这些代码都是一些简单的这个，呃， cs 代码啊，包括呢 shift， c， n 的 react 组件的代码，这块呢我们先直接按照现有的内容呢给它导进来，把这块呢注视掉。 好，那么这样一来，我们把所有的安装好之后，那么这个时候呢，包括左侧栏下面的区域和右边的这一块都有了啊，这些都有之后呢我们接下来来考虑。

先来 r s build， 点 config， 点 ts， 再来一个就是 module 管 federation， 点 config， 点 ts， 两个啊，这两个配置文件好，这两个配置文件分别怎样去定义呢？在这儿我们来直接导入啊，直接导入 import 从谁呢？ 大家从这儿可以看到，里面是不是有一个叫 define config 啊？其实大家用完之后你会发现跟 vt 一 样哎，对吧？ vt 是 怎么怎么导入的？ 是不是直接 from weight， 然后呢？ define config？ 你 看 api 高度一致化啊，就不要去做一些标新立异的事情啊，就是你既然想让这个生态足够繁荣的话，那你创造出来的新的东西最好跟老的差不多， 这个就是 define config 好， 定义好 define config 之后，我们就直接把内容呢导出去，这个导出其实也是一样的啊，就直接 export default define config 里面呢去定义一些内容，我们如果用 with 的 话，这个里面就会定义一些什么 plugin， 对 吧？那我们这里也是一样， plugins 定义进来，我们要什么 plugin 呢？这个 plugin 呢？我们其实就直接引入 刚才定义好的那个 module federation， 把这个呢命名叫 plug in module federation， 好， 再在这儿来 plug in module federation 放进去，然后呢，它整个模块化定义的内容里面不是缺了个物这个参数吗？就是你从哪里去导入这个配置， 哎，这个配置我们这是不是有个配置？这个 module federation 的 配置就是我们这里需要去指定的配置，那它又是怎么样来去指定呢？我们直接可以 import from 从 module federation 的 里面导入，导入的这个内容叫什么呢？叫做 create module federation config。 啊，这些 api 设计的太优雅了。好，然后呢，我们直接 export default create module federation config， 导出出去，导出出去。接下来的内容就是我们在最前面给大家看 webpack 的 这个内容， 为什么这个字节系的相关的工具链，它还是依照于 webpack 呢？因为大家都知道 webpack 已经根深蒂固了， 对吧？很多人都知道 ypack， 但是你不一定知道 rsp， 你 不一定知道 wait， 所以 我们需要在这个有，就是已有的这个环境下，或者说已经在的这个土壤里面来去发掘，来去，在这个基础上去。 呃，给开发者带来一些新的东西，所以的话它的配置也是一样的，你看 ypack 的 配置，它什么 name？ file name， 什么 expose， 我 告诉大家这边是一样的。啊，什么呢？它的名称，命名，命名，那我们命名呢，就直接叫做 mf app 一， 可以吧，就，就是我这个名字嘛， mf app 一 好，这个就定义好了，这个呢是属于提供者。注意啊，我现在只关注提供者，对吧？只关注提供者，那我们假设它就是一个 provider， 它是一个 provider 的 话，我们就要把什么东西提供给外面去用，这个是一个关键。好，那什么东西提供给外面去用呢？我这儿来定一个 s r c s r c 里面我定义一个文件啊，比如说就叫 sum 函数， sum 函数点 t s 定义好，那我们往外部呢去暴露一个 export function sum a 加 b 这个函数，那接下来我是不是就可以直接在这来给它导出。导出什么呢？我把这个 sum 导进来，同学们看，好啊，我把这呢就直接给它定义一个叫做 expose， exposes 啊， 准确的说应该叫 exposes。 exposes 什么呢？我给它导出一个方法，这个内容叫做 sum， 接下来它的文件来自于什么地方呢？就来自于 sum， 那 个 s r c 下面的 sum 看，好啊， s r c 下面的 sum。 好， 这样我就可以把这个 sum 方法导出给外部去使用。 导出给外部去使用啊，它整个构建的文件 file name， 我 也可以给它取个名称叫 remote entry。 remote entry 好， 保存一下。这个呢就是我们整个 module foundation 远程产物给外部去暴露的内容，我们就定义好了，接下来在这边来导入 import 什么呢？ module foundation config 导进去，放进去， module foundation config 你 看是不是好了？ ok 了， 好，这样定义好之后，同学们来看，好，接下来你什么都不用去做了，直接来到 package 下面的 m f a p p 里面去执行刚才我们说的构建的工作。构建工作我们定那个定义好了吗？定义好了，在这儿 dv 就 可以去启动。好，我们来试一下，偏偏我先 build 一下，看它能不能生成产物。 这里呢，报了一个错误，他说，呃，这个构建的过程中什么什么 course， 什么什么之类的，对吧？这一步呢，其实是大家需要去呃，这个 刚才说明的，我们把我们把这呢稍微改一下啊， p m d v 吧。从这呢其实可以看得出来就是文件报了错误，那不管是从这个 s r c 还是什么什么来看，你一定要有个 index 文件，这也比较合理啊，你就必须要有一个 s r c， 下面必须要有一个 index 文件才合理。按理说，那我们再来一个 index 文件，然后在这个 index 文件里面呢，我们可以去调用一下其他的这个方法，或者你什么都不做， ctrl 点 log 一个一二三啊，好，保存一下，我们再来构建一下偏偏 build 回车 是不是成功了？同学们看到没有？看到同学在评论区扣个一，看到的同时，同学们来注意了，它会在 diss 的 目录下面去生成这么一堆的产物，对吧？这一堆的产物都是它生成的 啊，这一堆，这一堆生产的产物，其实我们现在不重要，可以不关注他啊，那么我们来启动一下试试 pmpv 回车，你看这是不是启动了，在三零零二端口启动了。好，但是我们说了，他既然是一个提供者的话，他启动的东西呢？我其实可以不管他啊，就不管他启动的什么东西，我不，我不重要， 那你其实从这也可以看得出来，他是不是打印了一二三，对吧？打印了这个一二三，哎，这也就是我们这边打印的这个一二三，说明他已经启动成功了啊，启动成功了，好，这个启动成功之后，接下来呢，我们 能够将这个 sum 方法提供给外部去用了，然后我们来第二个产品。

哎，袁老师好。哎，你好，那个学历。呃，本科哪个城市啊？嗯，武汉。工作几年？三年，薪资多少？十三。好，请讲什么问题？有两个问题想要问一下。嗯，第一个问题就是 就我发现就是因为我们现在项目当中用的是 vivo， 嗯，然后他不是有那个是扣的吗？可以进行钥匙隔离吗？嗯，但是用的那个饿了吗那个 主键库，他有时候，嗯，有些他那个弹窗之类的就是在 body 里面，嗯，然后因为他有的不同的功能呢，他可能会有一些样式有些变化，然后 我就发现很多主键就直接写的那个 style 就 没有用那个隔离，嗯，导致它就有时候这个样式就互相影响了。用 style 为什么会互相影响呢？它主键卸载它都用 style 了，咋咋会有样式冲突影响呢？就是它那个 style 不 就是全局的了吗？不是， 你说的 style 是 啥 style 啊？就是某一个元素它有个 style 属性吗？你说的是这个吗？不是，就是那个样式的那个元素标签样式跟全剧有什么关系？这个东西跟全剧有什么关系啊？全不全剧跟你这个选择器有关系，跟你这个标签有啥关系？我们还要理解什么吗？主键吗？他那个。 哦，你的意思就是说二维码主键里边有些选举样式啊，他不一定是 style， 他 有可能是 in， 那 都无所谓。就是二维码他有些选举样式影响到你的自己的主键了是吧？ 不是的啊，啥意思？他有些弹窗是直接放在玻璃里面在吗？啊啊，他就不是放在那个第二批 app 里面啊啊啊，然后他那个饿了么主键不是自己会有那个内鸣吗？啊？ 然后那个内鸣。但是因为我们不同的功能，他有时候那个弹窗的样式可能会不一样，然后就同事呢，他有时候写的时候就在这个主键里面， 他就直接在就是这个 style， 然后去找那个类名，找了类名之后去更新他的样式。明白明白明白明白。也就是说呢，你现在就是借用了一个饿了么的样式啊，比方说饿了么有一个这个样式叫做 win 吧。啊， 然后呢，你就不同的弹窗，以为他样式不一样，所以说你不同的弹窗了，给他加上不同的这个类名，就改了他不同的样式，然后就相互影响了是吧？ 对对，了解。呃。这个做法的代码能不能改？现在就是这个项目已经好几年了。呃，正确的做法我告诉你应该是什么啊？就是你弹窗的时候你给他不同的内幕， 你要做的事情是把那个，比方说 phone 一 啊，就是 win 一， 然后呢下边你就是饿了么的内幕这样子写啊，比方说我就随便写啊， 然后 v 二。嗯，先把样式给他写好，把这些样式全部写出来。有多少种弹窗，然后弹的时候呢？给他不同的内名，这是正确的做法啊。你们是直接去改的是吧？对，直接去改的话，对，你就要动松木树，要把卸载的时候要动松木树才行。 这个怎么回事？我想的是就是这个主键销毁的时候，人们就是把这个样式给它卸载掉，嗯，不让它去影响新的。这个你把样式是？对啊，你是直接开一个 css 文件写的是吧？ 呃不是，基本上都是在一个 web 文件里面，没有单独的去用的 css 文件。那这样子样式能卸载掉吗？你这样子我也不知道我 你这样能卸载掉，你这样估计卸载不掉啊。他这样样式他会打包成一个 cs 的 文件，那个文件里面就啥都在里边了。我是想的是看能不能就是打包的时候给他。你这样做挺麻烦，我告诉你，要说能不能卸载的，其实是能卸载的，但是你要咋卸载呢？就挺麻烦哈， 你要去查这个 so， 我 看一下把这个 so 干掉。能不能卸载啊？ 我试一下啊。嗯，但是干掉也不能符合你的需求啊，因为你干掉的话全干完了。干掉到是能卸载，但是不符合你的需求，你要去单独的去删，那挺麻烦的，你要去怎么删呢？好像是这个 windows 里面 app store 里边有一个叫啥 c s 哎，我大师课里面还有，有没有同学记得的，有印象的。这个叫啥来着？叫做 style sheet 啊，就这个 style sheet， 然后你要去找。 哎呀，这个挺真挺麻烦的。这有两个 style sheet 是 吧？第二个是我们插件夹的，第一个是我们自己写的，你要去找到第一个 style sheet， 然后这里边会出现各种各样的规则 rules， 一 共有三个规则，比方说你要把这个 item 的 规则删除掉，看能不能删啊。我们找到这个 style set 的 css rules， 它的规则列表，这规则列表里面看一下有没有什么方法可以删。我找一找啊， item， 嗯，不行， face 不 行，能删吗？这个你搞不好你还删不掉啊。 他是只读的，你还删不掉，我试一下啊。能不能删那是把设为零，看能不能删。他这种方法是删不掉啊。这个我看一下这个能不能删啊。 呃，一个 delete rule。 呃，咱试试啊。第一个样式 delete rule field 就是 他的必须要有一个参数啊。那我们搜一搜就得去查 mdn 啊这个词。 那我帮你搜吧，顺便我也看瞅一瞅。一般来说我们去自己手动的去操作 smart 树这种情况是比较少的，这就是 smart 树。你们不是学的浏览器渲染管线吗？对吧？渲染管有多母树？多母树你们平时都在用？用的 document 在 用 smart 树你们平时很少用的。 呃。哦，这还是一个。哦，他还有这个东西啊？是 d l c 一 次。那直接来了，直接来 d l c 第那次入传下标，下标零。 the integer， the length of a rule list 超过了这个规则的列表的长度。咋地啦？它长度为多少啊？ select text style 宽度，高度。这咋删的？这是？ 哦，要删整个路由？要，要这样删哈。啊，要这样子删 style？ set rules， 这里边有没有点类似？这里边还没有，这咋删的？这要去查一查文档啊。那是 rules。 哦，那是零。 这个能删吗？这个，那我还得去查他前面那个 style。 这个弱势。这个弱势什么类型？这个是不是要设置 list？ 他 里边有没有什么方法呀？没有啥方法，他没有啥方法。 除了这么删的方案还有没其他的方案？就是没招你只能删啊，因为你说的样子可能在一个文件里边，你不能去动那个文件，你这个文件肯定是不能动的，你要把另一个元素删了，那肯定是啥都没了， 但是你不能这样看的，类似这种微文件。我这个改一下是那个特色，等于 abc 改一下。 哈哈，改到是有效果，你去查一查吧，他能不能删啊？你查一查吧，应该是可以删的，但是要去找一找 api 啊。你是能动，这个 c c 字母数肯定是能动的，但是你这样做起来多麻烦啊。你要去这样子改那个，还不如像我刚才说的那种方式， 你直接一个用不同的内名写好各种内名，各种内个窗口样式，然后去切内名就可以了，这样子的，这要舒服很多。 以前你想做这种方案，只是这种就说改动也很难改，他有时候会怎么样呢？我靠，要不然你要去动松木树，松木树的话拉你更麻烦。他有的还是别的主件，就是说他可能正好需要之前的那个主件的这个样式。那就不加内明了， 你要重构的话，你肯定要去处理这些问题啊。你直接改这个东西肯定不合适，你要每个主件都要去加很长一段代码，而不是说一点点代码。 每个主键都要加很长代码。你这个玩意每个主键加一点点代码就可以了。我想的是删的是能不能就是说做成，就是用那个大局去混入一下， 混入一下，这样就就是在主键卸载或者是路由变化的时候去删那个 style， 这样子的话是不是就不用去改很多文件？我是这样想看，不知道行不行这种。 我想想啊，那你要需要知道啥呢？你需要知道当前这个主见用到了哪些内幕。光就这一个事吧，你就逼的脑瓜子痛，因为有些内幕是动态的，你根本就不知道他用到了哪些内幕。嗯， 你大局混入杀伤的范围太广了哟，就假设咱们把这件事做成了，做成了过后，我的天呐， 就意味着一个主键卸载过后，他整个数目要全部变动，那这一种变动会不会影响到其他主键？因为不一定所有主键的样式都是局部的呀，他可能有全剧的。那这样子搞的话，你的影响范围太大了。你别这样搞，这样搞更加痛苦。 我跟你说，目前最好的办法就是把它改成这种样子是最好的，这代码又好维护又好，理解，你改动也没有那么大。 嗯，这就是说要改的文件比较多。对，要读多少吧？有上千个吗？没有一百二十个。一百二十个好说，几天时间搞定了？绝对搞定了，几天时间一百多个。就是那一点， 我 a i 把你的情况给他说，就是把你要做的事情给他说，你把这些东西写好，然后呢？他帮你自动改，你审一审要检查啊，让 ai 直接去改了。对，推一个样式文件出来，你把这个东西写好，然后把哪些文件要改 你告诉他。然后呢？你改一个模板出来，然后哎呀看，然后让他照着这个改，你试一试，哪怕你自己手动改的话，其实也还行，几天时间就改完了。好好，不然的话你要去动这个东西，那沟里痛苦，我们一般不会动这个东西的。 嗯，还有个问题就是，呃，也是那个饿了吗？那个不是有个八层主键吗？啊，然后 也是有很多按钮，不是有时候需要加那个 loading 嘛？嗯，然后我就写了一个那个主键，就是加那个 loading， 也封装了一下，然后其他就是还是二麦原来的呀，就是点按钮的时候。 嗯，呃，不是说就那个 loading 为 true， 然后去执行外面。嗯嗯。就是那个函数嘛？嗯嗯。用的是那个 sink away 的 方法。 嗯嗯，就说一般情况下都是很好用的。嗯。但是有一种情况就是不是有个上传文件吗？嗯，我就是用的那个点了之后去掉那个 input， 就是 那个 type in file 的 那个，就是原声的那种去打开嘛？嗯。我没有用饿了么那个上传的那个主键，嗯。然后他不是去拿到那个 file， 倩姐就是倩姐的时候， 呃。转拿到了文件之后我去上传嘛，我们上传到 o s s， 但是这个情况就不太适合去用那个封装的那个 logo 的 那个 button 那 个主键的。因为他那个拿文件，他这个过程对你的意思就是说拿文件的时候他不要转圈圈，是吧？ 就是拿文件的时候他不转圈圈，但是就说拿完了之后他也不知道他必须要用那个什么 return 一个 promise。 对， 他要是 promise 的 话，你只能把它做成一个 promise 的 形态，你才能去 在他的楼顶状态去接入啊。那就是说我如果说用这种上传文件的话啊，因为他那个不是 input， 就是 那个 typeahead 的 时候，他的不是嵌进那个事件，他又是一个函数吗？他不在那个， 你的意思就说你一个呃 r， 那 么主键里边它有个 click 时间，你给他注册个 click 时间，对吧？然后呢？你这个键里边去触发了另外一个事件，对吧？比方说 click 去触发个事件，然后这个事件它可能会返回一个 promise， 你 要去等待这个 promise 完成，是这意思吧？对，呃。然后呢？这个前面就是个楼顶， 然后会去等待这个 promise 完成，完成了过后你把楼顶设为 force， 大 概是这个意思是吧？对，对，然后呢，你比方说另外一个地方，一个上传文件啊，一个 upload 上传的时候，你去用到了这个就是 e o button， 然后呢，你去注册了这个克里克事件，是这意思吧？对，克里克事件是打开引铺的，那就。嗯，所以说这个克里克事件里边你要手动的返回一个就 promise， 你这里就需要你自己手动就返回 promise， 就 这个意思是，就是我现在自己用的时候我会去这样写，但是如果说其他同事用的时候，他有时候他就不太知道用这个返回一些文档说明啊， 总觉得这个就不生效。就是这个楼顶效果做主键。不写文档的吗？没有，我们就几个同事一起，那几个同事人又不多，你看他说明就行了呀，你说明这个函数一定要返回 prometheus， 他 就知道了。这个 prometheus 完成楼顶效果就完成。他就是觉得就是说 用一次就要写一次这个 pro max 就 感觉有点不太好用。就是，但是他用原生的 e o 八寸让他自己去弄，他觉得这个玩意麻烦。返回一个 pro max 有 啥麻烦的呀？那里面这个底子得多差呀。返回 pro max 有 啥麻烦的？我都不太理解啊，他还要等。那个就是 input 那 个嵌接事件啊，我不管你这个 input input 嵌接就写里边呗。对，你写里边呗，你写完了，反正你把你上传的事情弄完了过后，我不管你前面咋写，弄完了过后你把 promise result 不 就完了吗？这个嵌接事件就是我如果说打开那个选择文件的 那个窗口，但是我没有选文件，我直接选取消啊，这个时候好像就有时候会就是它那个 logo 还是在存在，它就没有。那就说明这个 promise 没 reroute 啊， 你不管你取消还是完成，你都得 reroute 啊，你 promise 得完成啊。我就想说就是直接点取消的时候，这个 unicorn 这件事就不会触发呀。 啊，那是啊，那是不会触发呀。是啊，那我就不知道他是点了取消了吗？哦，那你找另外一个事件吗？你去搜一下有没有一个取消事件呢？呃， on cancel， 我 试一下。 那就搜了这段时间 on cancel 啊，来搜吧。你们平时不用 mdn 的 吗？也会用，就是有时候也记不住，然后基本上都是要打开去搜一下 那个我搜的好像没找到，说是有这个看守。呃，这个事件事件呢？直接问 ai 吧，直接问就完事了。 那他还没有原声的。哎。能能能，有那个千级事件吗？我看一下他会触发千级事件吗？ 嗯嗯，前几前几天在这没有出发啊，他不会出发前几时间。那你只能去监听啥呀，问题是不出发前几时间。 嗯， focus 你 要去。这样的话你最好就不要用 input 了，如果它没有千级事件的话，那 input 它是这个是主键给你们自带的。用的吗？还说你们自己写的呀。你去搜一下 file a p i 里边怎么打开一个文件选择框啊？我给你搜使用 file a p i 如何打开文件选择框？这个的话你就可以完完整的拿到他所有东西，包括你选择的文件，包括他里边的任何操作，就这个 show open file picker 这个的话就可以 有。他返回的就是个 promise， 就是 得到等待你的文件选择啊。这个 promise 如果说完成了，表示你选择的文件，如果说那个拒绝了，那么就表示你取消了，取消选择了。我也问了 ai， 但是 ai 好 像没有给我推你刚刚说的问的这个什么 api。 呃，有个属性表示 cancel。 不， 不是，他说的取消是指这个意思，他是说你这打开了文件选择框，你这里点了取消，你没有选择文件，对吧？你说的是这个意思是吧？对对对，他说的是这个意思，就是我如何来监听到他这里没有选择文件， 没有选文件。哎，不对啊，这个逻辑上也不对啊，也不应该成为问题啊。你选择文件期间，你这个状态不能是 node 吧？你这里能是 node 吗？ 就我不是有自己封装那个 bug 吗？我只要一点这个按钮的时候，他就会把 load 主界面。哦，我明白了，你的矛盾在这还不是这个问题， 你的矛盾呢？是在这里就是你希望呢？点击按钮过后是一件事，从头到尾就全部结束。 你做这个按钮封装的时候，你认为就是你这件事，无论你做了多少时间，他整个状态应该是个楼顶状态，因为你是把整个点击按钮看作是一件事。而有的时候呢，上传文件他是两件事，他不是一件事。 对对，他是两件事，你先得选择，然后再做上传他是两件事。所以说呢，你这个一件事的按钮就解决不了这两件事的这个问题， 这是从根上考虑，这个问题的话就不是说技术能解决的了，你做这样的封装的话是解决不了上传文件的问题的啊，解决不了的，所以我就是说别的按钮的时候用的就挺正常的，到上头，哎，对，你就解决不了这个问题，你做文件上传的话兼容一下，对，你就解决不了， 你这个要兼容的话，我想想该怎么来兼容才有这个灵活度呢？嗯，我想想啊，这是两件事，就是要支持一个按钮出现多个串形的事物，嗯， 你搞不好你得这样做，你得用高阶函数来做，你这个逻辑就应该是这样的逻辑了。 啥呢？就这个函数，这个事件处理，他得返回一个函数的集合， task 就 点了按钮过后他可能有多件事要做，他不止一件事，因此呢，你这个处理函数呢，你得给我返回多件事的函数的集合，然后呢，你在这里用 flow 循环去循环这个集合 task， 每一次循环呢，这里是一个函数，然后这个函数呢，它有可能是异步的啊，你要去等待它，那么在这个函数等待之前呢，你这个楼顶状态要反复的处理啊，楼顶为 two， 然后呢，这里是楼顶为 force， 你得这样处理，那这样子的话，你这个用起来的话就会稍微麻烦一点，你用起来的话，那么你比方说你要用这个一幺八腾的时候呢，你要传递的就应该是这个克里克啊，韩德尔。呃，我就直接写吧，克里克，韩德尔。那么这里边可能有多件事要处理，要返回多个函数， 第一个函数就是，呃，处理选择文件啊， pick handler， 第二个函数是 upload handler。 嗯，要处理多个，要分开处理也这样弄。嗯，这样弄的话，但是你估计估摸着你这个就把复杂度就上升了。所以呢， 我的个人建议哈，这个 e l button 呢？还是按照之前那个写法写？要去做封装的话就单独的做一个。什么呢？ upload button？ 就是说在单独做一个 upload？ 呃，对，在单独做一个 upload。 upload 本来就应该是单独去开发，因为上传的事情还是挺多的。还不光光是一个按钮的事，对吧？还有很多的其他事。 好好呃，但是没有其他问题啊。行，还有啥？好嘞，谢谢领导。好，不客气啊，拜。拜拜。

测评， callopus 四点六模型，零基础开发，全程没有协议性代码，到小程序，到 up， 到后台管理，到接口开发数据库对接，全开发教程，全程干货准备发车。打开我们的开发工具，布置客户需求文档，提 供给 ai 进行分析，获取按权。这分类的功能清单 清单、技术要求和开发规范一并交。 代码已编辑完成。启动项目运行，进行功能测试，调试，修复问题。 打开 navik 客户端工具，连接到目标数据库，右键点击数据库连接或数据库名，选择运行 s q 六文件，选择要执行的 s q 六脚本文件，点击开始执行完成。创建数据库， 等待 maven 依赖下载完成。找到主启动类，带有 spring 不 application 注解，点击类旁边的绿色三角形按钮，选择 run 启动，查看控制台输出，确认启动成功。 找到前端项目 c m d， 进入项目目录，执行命令 m p m install， 等待依赖安装完成。执行命令 m p m 任意启动前端项目。复制前端地址，如， h t t p 冒号斜杠，斜杠抖 o c l h o s t 冒号三零零零，打开浏览器，访问该地址，进入管理后台项目 模块一，系统登录模块二，首页数据统计模块三，用户管理模块四， 商品管理模块五，订单管理模块六，预约管理模块七，轮播图管理模块八，新闻资讯管理模块九，文化内容管理模块十，展品管理模块十一，帖子管理模块十二，评论管理模块十三， 管理员管理模块十四，系统配置模块十五，收入统计报表模块十六，订单统计报表模块十七，商品统计报表模块十八，用户统计报表模块十九，访问统计报表启动小程序项目 首页模块，文博图快捷导航历史文化推荐新闻资讯商城模块，商品分类商品列表商品详情加入文化展示历史文化制作工艺数字展馆展品详情 社区模块，帖子列表发帖评论、点赞、预约体验、在线预约预约管理状态追踪、用户中心登录注册、个人资料、收货地址、订单管理。这不是巅某，这是一个可以直接上线营的完整产品。 太震惊了， ai 已经这么强了，我也想学怎么开始，能帮我开发一个小程序吗？多少钱？不信， ai 写的代码肯定一堆蹦。评论区，告诉我你的想法，每条评论我都会认真回复。

这节课我们进入到第二部分内容的学习。基础功能面板介绍， 打开 cursor 编辑器，我们可以看到 cursor 默认的基础功能面板布局。在这个布局下，它的面板被分为四个区域， 左侧栏是我们项目文件的管理区域，包括我们的文件浏览器管理，我们项目的文件文件搜索器基于当前项目的内容进行剪辑。 get 仓库管理器管理我们提交和未提交到仓库的文件， 以及插件市场进行插件的搜索和配置。中间是我们代码编辑区和中间界面，右边是我们的 ai 聊天区。除了默认的布局模式，还有另外一个 黑镜的模式下的面板布局。这个布局的左侧是 ai 聊天绘画管理区域，中间是 ai 聊天区域，左侧是文件编辑区。当然，如果你想在这个模式下打开终端 和文件管理器也是可以的，但是我们一般不建议 大家想一想，为什么库森会有这样两种不同的布局模式。其实这也不难理解，在 id 的 模式下，它更侧重于传统的开发模式，管理项目的文件编辑代码， 然后执行代码。 ai 抠定，它是作为辅助，在 a g 的 模式下，侧重于 web 抠定的开发模式管理。聊天绘画 ai 抠定为主，手动修改代码为辅。潜台词就是能让 ai 完成的就不要动手。 我也会带着大家慢慢地从 i g 的 模式过渡到 a g 的 模式的一个开发。接下来我们来看看 ai 聊天功能的介绍。 在这里我们可以切换交互模式。 coser 提供了四种交互模式， a g 的 自主任务执行的模式，它自动拆解任务，读取多个文件的上下文，执行终端命令， 判任务。规划模式，先梳理代码的实现思路、步骤、架构方案，它不直接生成完整的代码。 debug 的 bug 修复模式，它会定位代码的报错，分析 bug 的 原因，给出修复的代码。 阿斯克的全理解型的指令模式，它适合提问代码相关的问题。大家先做个了解，后续这四个模式都会进行一个详细的讲解。 我们在这里选择 coser 底层依赖的大模型，这里主要展示呃，上下文的一个使用情况， 这里主要是用来上传图片的，我们在网页的开发过程中，有时候会提供网页的图片，让 cursor 帮我们生成对应的页面。 呃，如果我们嫌弃打字麻烦，也可以选择通过语音输入和正题交互。呃，这就是我对 cursor 功能面板的一个整体的介绍。通过这节课的学习，我相信大家对 cursor 会有一个更深入的了解。 这是我们这堂课配套的详细文档，大家如果有需要的话，后台私信我，我会无偿地把该飞出文档的链接分享给大家。

这节课我们进入到第四部分内容的学习，交互模式讲解。 首先我们看看 a g 的 模式，在 at 的 模式下， ai 可以 自主地读取文件，搜索代码库，运行终端命令，跨多文件修改，并且自动验证结果。从给你建议进化到帮你执行， 我给大家实际演示一下，例如我想让他帮我优化这个方法， 这里选择 agent 的 模式， 这样他会先去解锁代码库，找到这个方法所在的位置。 当它修改完成之后，我们可以在这里选择接受它的修改还是不接受它的修改，我们这里也可以选择，那我们在这里就不接受它的修改。 这里我只是做了一个简单的尝试，如果大家想要实现更复杂的功能，也可以自行去尝试一下。 接下来我们看看 play 模式。 play 模式是 cursor 中一个非常巧妙的设计，它把你从上来就写代码的冲动中拉回来，它会帮你先思考，先规划，先确认，然后再通过 a 键的模式动手完成。 我们打开编辑器，将交互模式修改成 plan 模式，然后我们让它帮我们添加一个代办页面， 我们看到它会先向我们做一个确认，我们根据我们的需求做相应的回复就行， 点击继续， 这样它就帮我们生成好了一个规划的 md 文档。我们查看一下这个规划的内容，其实还是比较详细的， 因为这里我们实现的页面也不是很复杂，我们可以在里面调整我们认为需要调整的地方，也可以让 ai 帮我们再做进一步的优化。 它生成的规划默默认是保存在用户的 home 目录下的，我们可以在这里点击 save to workspace， 就 可以将它移动到我们当前项目的工作区， 这样方便我们后续的查找，团队的共享以及文档的记录。后续我们也就可以基于这个规划文档去实现对应的功能。如果你对这个计划已经满意了，那我们就点击计划文件中的这一个 build 按钮 cursor， 它会切换到 a 警的模式，然后严格按照这个计划去逐步执行。 这里为了节省时间，我们就先不执行了，这里我有一个使用建议，就是复杂的功能开发，重构架构的调整，我们先用 plan 模式去做一个规划，然后再用 a g 的 模式去 完成最终的实现。如果只是简单的修改变量名，优化函数的代码这些我们直接用递进模式或者是手动改就行了。 接着我们来看看 debug 模式，与常规 ai 编程助手看到错误就去猜修复的方案的方式不同， debug 模式它遵循一个核心原则，就是没有运行时数据就没有精准的修复。它会自动地添加买点，在关键的位置插入日字语句， 收集运行时的信息，然后再由我们人工去参与验证，按照步骤去复现 bug， 确保捕获到真实的行为。然后它接着做精准的修复，修复完成后，所有临时的买点都会被自动移除，我们来实际演示一下，打开编辑器， 然后我们随便在一个代码里面添加一个死循环的代码，这里我们在它登录的这个验证里面去添加这个死循环的代码。 等我们添加完死循环的代码之后，我们这个项目点击登录是会被卡死的，我们来验证一下，打开我们内置的浏览器，现在一下，现在我们是可以做正常输入的，当我点击登录之后，我们发现现在页面卡死了， 那这个时候我就需要来到我们的 ar 聊天框，然后将我们的模式切换成 delete 模式， 然后输入我们具体遇到问题的一个提示词， 我们会看到它会先去做一个买点， 相关的这些位置它都添加了买点，去收集我们运行时的一些信息， 然后它这里会让我们做一个复现，复现我们页面卡死的一个现象，那我们就复现一下，因为这个已经卡死了，我们得重新打开， 我们可以看到现在这里的日字是空的。当我们点击登录之后，它会收集我们运行的一个信息，然后我们点击处理，我们就复习完成了， 然后它这里排查出来了我们卡死的原因了， 我们这再继续处理。 那帮我们把这一行代码删除掉了，然后再继续做验证， 现在它需要我们做第二次验证，也就是验证它目前还是个什么情况，是继续卡死还是已经正常了，这里我们已经卡死掉。 ok， 继续完成我们的二次验证，我们直接点击登录这里它是目前没有内容的，当我们点击之后，它就收集到了对应的 呃运行信息，这里我们看到已经验证完成了，已经到这个环节了，我们点击处理，也就是我们这一轮验证完成了，并且也验证通过了， 他也告诉我们卡死的那个原因已经找到了，并且已经解除了， 然后这里我们就点击 mark as fix 来来标记这个问题已经得到修复了， 这样的话我们会看到它会去清除掉它添加的这些买点信息，它会移除它的买点代码， 好的，他的买点代码已经移除完成了，然后这里我们接受他的修改，这样我们这一个 bug 就 解决完成了。 我们发现 bug 模式处理这个 bug 还是比较麻烦的，那哪些 bug 适合使用 bug 模式呢？就是一些可复现的棘手的 bug， 简单来说就是当 bug 让你在代码里面绕了半个小时还找不到头绪的时候，我们就起用 bug 底般的模式去解决我们遇到的 bug， 而对于一些简单的语法错误，简单的逻辑问题，使用极简的就可以进行修复了。 最后我们来看看 ask 模式， ask 模式是一个只读的 ai 对 话模式，它是专为提问学习理解代码而设计的，这个就很简单了，你可以针对当前的项目去提一些你想了解的问题， 我们来实际演示一下，打开编辑器，然后将交互模式切换成 ask 模式，随便输入一些提示词， 这样的话我们就可以得到我们想知道的一些相应的回复， 这就是我们的 ask 模式，其实也比较简单，这就大家下去自行尝试了。这里我总结一下 a j 的 模式，它是自主任务的执行模式，我们用它帮我们完成具体代码的编写和命令的执行 团模式。一般在我们要实现一个复杂需求的时候，先规划开发逻辑，然后再具体使用 hr 模式去实现 bug 模式。一般是在我们遇到比较棘手的 bug 的 时候才会去使用 s 个模式，就是我们一般用来了解邓等库，询问优化意见等等。以上就是我对 cos 四种交互模式的讲解，这是我们这堂课配套的详细文档，大家如果有需要的话，后台私信我，我会无偿地把该飞出文档的链接分享给大家。

好，来看这道题，如何使用关键路径 css 提高首屏加载速度，那么在咱们开发当中啊，你优化首屏加载速度呢，可以提升用户的体验，对吧？那么关键路径 css 呢，就是一种优化策略， 通过直接影响首屏渲染的这个 css， 直接内连到 html 文档里面，减少外部 css 文件的一个加载需求，这样的话就可以加加快网页的这个首次渲染时间。那具体有哪些步骤或者技巧呢？在这给大家说一下。比如说第一个呢，就是一定要确定关键路径 css， 那这呢我们要对首屏的进行一个分析是吧？哎，识别出用户首次访问页面时所看到的这个内容区域。另外一个呢，就是找到用于渲染首屏所需要的这个 css 规则，包括布局啊，字体啊，颜色等等这些内容。第二个呢就是抽离，哎，抽取关键 css， 抽取关键 css， 那我们可以使用一些自动化工具是吧？根据页面的截图或者指定的 url 来提取首屏所需的 css， 我 们也可以根据自己的经验，手动挑选首屏渲染所需的一些关键样式。那第三个呢，就是内联关键 css， 内联 关键 css， 嗯，我们可以把提取出来的 css 呢，直接放到 html 文档的 head 标签里面，那我们使用 style 来进行一个包裹是吧？那我们同时呢也要确保内联的 css 代码呢，是位于咱们文档的头部啊，这样的话浏览器它会更早地去解析和应用 好。第四个呢就是拆分胜利 css， 那 我们可以把那些不是关键路径的 css 呢，移动到一些单独的外部文件里面，这样的话方便它进行一个异步加载啊。那第五个呢，就是优化这个非关键 css。 优化非关键 css， 那对于一些不影响手屏渲染的样式呢？我们就采用来加载，是吧？用户滚动或者触发到某些事件，哎，再给它进行一个加载，也可以按需加载，是吧？根据页面不同的功能或者部分，哎，分别加载对应的这个非关键字眼单词文件。那第六个呢，咱们可以使用缓存策略啊。缓存策略， 那我们可以去设置这个 catch ctrl 啊。呃，给那些不是关键的 c s s 文件呢，设置一个合适的缓存控制头，让它能够在浏览器的呃，里面呢，保存这个比较长的一个时间。 ok， 这些方法呢，就可以来提升这个首屏的一个加载速度了。

上期咱们搞懂了 load 的 核心作用，知道它是 webpack 处理非 js 资源的桥梁。今天直接 教你用 css 杠 load 加 style 杠 load 的 组合，解决 js 里导入 css 打包报错的问题。先讲一个问题，为什么处理 css 需要两个 load 而不是一个？ 答案很简单，单个 load 能力有限，两个 load 分 工合作才能完成 css 的 解析和渲染。 拆分一下它们的职责。一、 css 锚定核心作用是解析 css 模块，它能处理 css 里的 at input 和 url 语法， 把 css 文件转换成 webpack 能识别的 gs 模块，但注意它只负责解析，不会把 css 渲染到页面上，光用它的话，打完后 css 代码藏在 gs 里，页面还是没有样子的 啊咳， style 杠 low 的 咳。核心作用是把 css 注入到页面，它会把打包后的 js 文件里生成一个 style 标签，把 css 杠 low 的 解析后的 css 代码注入插入进去， 然后挂载到 html 的 head 里，这样页面才能显示样式，咳。总结一下， c s s 刚 load 负责读懂 c s s style， 刚 load 负责展示 c s s 两者缺一不可，少了任何一个，要么打包报错，要么页面就没有样式了。 话不多说，分四步。第一步，准备测试文件。先在项目的 s r c 文件夹里新建两个文件， index 点 j s， 这个是入口文件，写一句 导入 index 点 css 的 语法，表示导入 css， 然后再新建一个 index 点 css 样式文件，随便写点样式，比如写一个这个，再在根目录新建 index 点 html， 加一个字行代码，方便看效果。 第二步，安装两个 load， 打开命令行，输入安装命令，命令是这样的， 这里杠杠 server 杠 dv 还是表示安装到开发依赖，因为只有打包时需要它们，生产环境不需要。 第三步，配置 webpack 点 config 点 gs 这里最关键的一步，打开根目录的 webpack 点 config 点 gs， 在规则里添加 css 的 处理规则代码是这样的，重点强调右时速组里的 load 顺序是从右到左执行，先执行 css 杠 load 的 解析 css， 再执行 style 杠 load 的 注入页面，如果顺序写反，会直接报错， 踩坑最多的就是这里呢，一定要记牢。第四步，打包并验证效果。 输入打包命令， npm run build， 等待打包完成。打开 disk 文件夹里的邦德点 gs， 再在根目录的 index 点 html 里引入这个邦德点 gs， 最后在浏览器打开 index 点 html， 看看页面背景是不是变蓝，标题是不是变红，如果是，说明配置 ok， 这里说三个最容易踩的坑，遇到问题直接对应解决。一、打包报错， moder not found， 大 概率是没装 load 或者安装命令输错，重新执行安装命令就可以。二、打包成功，但页面没样式，要么是 load 顺序写反了，要么是忘记在 gs 里导入 css 文件。 三、样式覆盖问题，多个 css 文件导入时，后面的样式会覆盖前面的，这个是 css 的 特性，和 load 无关。 最后补充一个小知识，为什么 load 要从右到左执行？因为外部派克里的 load 是 函数组合的机制，每个 load 都是一个函数，接受上一个 load 的 执行处理结果，再返回新的结果。优设数组里的顺序 对应函数执行的顺序是这个样子的，所以必须把 css 杠 load 的 放在右边先执行。 ok， 咱们用 css 杠 load 加 style 杠 load 的 组合，完美解决了 webpack 处理的 css 问题。核心就是记住分工加顺序， css 杠 load 的 解析， style 杠 load 的 注入顺序从右到左。

同学们好啊，今天咱们来聊聊前端开发中绕不开的 web crop 打包流程。你是不是经常用 web web， 却搞不清它到底是怎么工作的？其实啊， webpap 的 打包就像咱们平时准备一顿大餐，有固定的步骤，每个步骤还有专门的分工呢。 首先， web 打的把包有个雷打不动的顺序，就像咱们做菜得先买菜再烹饪，最后装盘一样，他是先出纸化，再编一构建，最后输出。这三步是严格按顺序来的，不会交叉进行哦， 那具体怎么分工呢？这里有两个核心角色要记住， node 就 像是家里的翻译官，专门负责把那些非 js 的 文件，比如 css 啊，图片啊，翻译成 webcap 能懂的 js 模块。而 plugin 呢，就像是全能助手， 它能在打包的整个过程中帮我们扩展各种功能，比如压缩代码、生成 html 什么的。打包完成后，会生成三个重要的东西， 第一个是依赖图谱，你可以把它想象成一张详细的地图，记录了所有模块之间的依赖关系，谁依赖谁一目了然。 第二个是 round time， 这可是运行时的基石，没有他，打包后的代码就跑不起来。第三个就是我们最终拿到的班的文件了，这就是打包好的物理文件。最后再给大家划几个高频考点， note 的 执行顺序是从右到左的，就像咱们穿衣服，先穿内衣再穿外套一样，处理顺序可不能搞错。还有 chang 和 bun 的 区别， chang 是 逻辑上的代码框，而 bun 是 实实在在的物理文件。另外要记住， webpack 内核可是个专一的家伙，他只认识 gs， 所以其他类型的文件都需要 loser 来帮忙转移怎么样？这样是不是就清楚多了？下次被问到 webback 打包流程可别再含糊了。你们平时在使用 webback 时还遇到过哪些问题呢？欢迎在评论区交流哦！

哎呀，南站下雪了，天气真的一下子温度降了很多，所以也是又开始穿睡衣了。 好了，上期咱们用 clean eclipse eclipse 的 插件搞定了 disk 目录清理，本期咱们继续讲生产环境必备的一个插件，叫做 mini s s extract plug。 之前咱们用 style load 处理 css 时，所有样式都会被打包进 gs 里面，页面加载得等 gs 执行完才会渲染样式， 不仅容易出现闪屏，还会让 gs 体积变大，这样的话加载就会变慢， css 呢，它也没有办法做单独的缓存。 那这期用这个插件把 css 从 gs 里单独抽离出来，生成一个点 css 文件，然后通过 link 标签进行引入，这样加载速度呢和缓存效率就会拉满。 先说 css 嵌在 js 里的问题，咱们开发时用 style load 确实方便样式实时注入页面，但到了生产环境就不行。一、加载体验差，页面加载时 js 文件还没下载，执行完页面就是裸的，一个 h t 秒会出现闪屏。 二、性能损耗大， css 代码全塞在 js 里，让 js 文件体积暴涨，下载和解析的速度会变慢。 三、缓存不友好，哪怕只改了一行样式，用户也得重新下载整个 g s 文件。而 mini c s s extract plug 的 插件，这个插件的核心作用 就是把分享在各个 g s 模块里的 g s s 代码抽离，并合并成单独的点 css 文件，这样呢，优势就特别明显。一、并行加载 css 和 css， 能通过 link script 的 标签进行下载，首屏加载速度会更快。二、缓存优化， css 文件可以单独加哈希做缓存，改样式，只变更 css， 不 用动 js。 三、样式稳定，页面加载时， css 先渲染，不会出现闪屏，用户体验更好。简单说，开发环境用 style load 就是 图方便，生产环境必须用 mini css extract plug 提出 css， 这样前端性能优化就会更好一点 啊。话不多说，直接上手。第一步，安装插件，打开命令行，输入安装命令，装到开发依赖里 啊。第二步，修改 wordpack， 点 copy， 点 gs 配置核心就两步，把 style load 换成插件提供的 load。 在 实体化插件，咱们直接看配置代码，这个代码如下， 这里重点说两个关键点，一，替换规则。不管是处理 css 还是 java， 都要把 style load 换成这个插件提供的 load， 然后 load 的 顺序不变啊，非要 name 配置，可以把 gs 一 样加哈希， 然后还能指定目录，比如 css 杠，让 disk 目录结构呢就更加的清晰。第三步，打包验证效果，执行 npm 乱 build， 打开 disk 目录，一看就不仅有点 gs， 还会有很多的 css 文件， 对吧，里面有没点 css 啊，等等等等。然后你再打开生成的 index， 点 html 里面就会自动多了另一个标签，并且准确引入了这些 css， 也不用咱们去手动添加， 那打开页面样式就有正常显示，而且网络面板里能看到 css 和 gs 是 并行下载的，这样体验就会比之前好很多。 这里讲两个开发中常用的进阶配置，还有避坑要点。一，多入口拆分 css。 如果是多入口项目，比如 home about， 想把单个入口，哦不，是想把每个入口单独生成 css， 不 用改插件配置，只需要把 output 和插件的 file name 都用 name 占为符，打包后就会自动生成 它们对应的 css 文件。二、开发和生产环境区分开发环境还是用 style load 的， 因为这样方便了更新嘛，我们修改了代码以后就能实时看到。但是生产环境还是要用这个 mini css 这个的插件 我们可以通过环境变量去判断，去切换啊。代码如下，常见问题去排查 一个是样式失效，检查 logo 的 顺序是不是写反了，或者没有实体化插件打包报错，确认插件版本和 bug 是 否匹配啊。 c s s 文件没哈希就别用 check 哈希了。 c s s 要用 content 哈希，不然 g s 变了， c s s 哈希也会变，反正就没意义了。总结一下， mini c s s checked plug 的 核心是把 c s s 从 g s 里 抽成单独的文件。生产环境必用，既能优化加载速度，又能做好缓存。记住，开发环境用 style node， 生产环境用这个插件是最好的。

hello 小 伙伴们，之前咱们搞定了图片字体字源处理，今天来解决一个金融性的大难题，写的 es 六加语法，箭头函数 promise 结构赋值，在 ie 和旧版的谷歌浏览器里面都是直接报错的，这个时候就需要 bubble load 的。 今天讲一下。先搞懂核心的需求， webpack， 它只是打包文件，不会主动去转移 gs 语法。比如你写的箭头函数 paris eiffel i e 十一及以下浏览器是不认识的，打开页面都是直接报语法错误， 直接白屏。这个时候 webpack 就 派上用场了，它是 webpack 和 web 的 桥梁，核心作用是调用 web 的 工具链，把 es 六加语法转移成 es 五，让低版本浏览器也能识别。 这里有三个核心的一带分工，缺一不可。一、 bubble loader webpack 的 load 负责在打包流程中调用 bubble。 二、 bubble 杠 call bubble 的 核心转移工具，真正实现语法转移的核心。三， double 杠 process 杠 ev 就是 预设转移规则机，不用手动去配置复杂的规则，自动根据目标浏览器去转移对应的语法。好话不多说，直接上代码。 第一步，准备测试文件，在 s r c index， 点 g s 里写点 e s 六的语法，方便验证转移效果。代码如下， 如果不转移，这些代码在 i e 里会直接报错，但是现在好像基本上找不到 i e 的， 但是可以用三六零的兼容模式，它就是 i e 的 内核。还有就是现在部分国产机三年安装的国产浏览器，呃，也有这个问题，这个是我遇到过的。第二步，安装依赖， 打包，打开命令，行，一次性把全部的依赖都装上，注意版本兼容，用最新稳定版就可以了。 第三步，配置 webpack， 点 copy， 点 gs， 打开配置文件，新增 gs 文件的处理规则，让 bubble load 生效代码如下， 重点说明三点，一、 exclude not module， 第三方依赖已经自带翻译，避免重复转移，提升打包速度。当然也存在第三方包没有转移的，这个遇到了再去解决就可以了。二、 tags， 明确兼容的浏览器 bubble process n e v 会按需转移，不做过多的转换。三、 user 帮你 ins 加 call js 解决 promise 还有喊还有宿主的 includes 等 api 兼容语法转移不了就是解决不了 api 的 问题，所以需要额外去安装 call js。 三、 npm install call js 三就可以了。 第四步就是打包验证效果，执行 npm 软 build， 打开 disk， 帮你点 js， 搜索之前写的 js 函数 prometheus 会发现兼容函数都变成了方选，然后 prometheus 会被扣 gs， 补全了兼容代码 把，帮你点 gs， 引入 html， 在 i e 十一或者是三幺零兼容模式下面去打开控制，才能正常打印日期，说明转移成功，兼容失效。这里才有三个坑，就是常踩的三个坑。 嗯，一、转移后还有 es。 六、语法就是没装预设，把预设补全就可以了。 然后第二个 promise 报错，没装 qgs， 这里把 qgs 补全就可以了。第三个，打包速度慢，没加 include 的 排除 node module， 导致第三方依赖被重复转移，也是补上就可以了啊。补充一个关键的知识点， double load 的 的转移分两种情况，一、语法转移，就是把箭头函数，几何赋值等语法转成 es 五靠预设就可以了。还有第二个就是 api 的 兼容，比如 promise map， 然后还有 宿主的 find 等 es 六加的 api， 这个是语法解决不了的，必须靠扣 gs 去补钱。 他其实就是相当于。呃，我用低版本的语法写的一个高版本的函数的实现给塞到塞到我们的代码里面去就可以了啊。搞定，今天核心就是巴博罗的三个依赖加全配置。

前端每日一题，请详细说明 ragu 解锁增强生成前端列录中如何处理文档上传切片与向量化的交互流程 核心分工边界，前端开发必须牢记，这是流程设计的基础。前端仅负责交互层文件传输进度同步状态管理、异常反馈，不执行文档切片向量化计算，还未计算格式解析由服务端完成， 服务端负责文档解析文本切片称 i bing 向量化向量库入库 rock 核心逻辑，整个流程是一步任务流，上传是同步，每分片一步切片加相量化是后台一步任务。 前端核心价值是透明化，进度稳定，传输友好。交互分阶段详细交互阶段一，文件采集与客户端前置较验阶段二，大文件分片上传 核心环节必选阶段三，触发服务端异步处理任务切片加向量化阶段四，前端实时监听处理进度核心交互阶段五， 处理完成失败，前端状态收尾阶段六，异常处理与任务控制完整前端链路持续图，用户选择文件，前端叫验 n。 第五格式，前端分片上传合并文件，获取 file 意义， 前端发起处理请求，获取 taskd c 连接，建立实时接收。解析，切片向量化入库处理成功，更新 ui 文档，可用于 rock 剪索处理失败，展示错误，支持重视前端核心职责，在瑞文档处理炼录中， 前端不参与任何计算逻辑，只做三件事，稳定传输，分片上传大文件，保证文件不丢失，不断传，进度透明。通过 c 实时展示切片向量化进度 状态，可控管理全流程状态，支持取消重视异常反馈，这是生产级爱给用叉 p d off 知识库的标准前端实现方案。

到底是谁说现在 ai 生成出来的 ui 界面不能更改？你们给我站出来，我今天就用三步教你怎么去更改 ai 生成出来的 ui 界面，并且让你实现前端自由。我们先打开 fig 码，把切图打包到一个本地文件夹里，把界面需要的字体也放进来， 切图的规范和备注方式大家可以看我上一期的视频。接下来我们打开 cursor。 第一步，我们需要让 cursor 给我们做一个基础的框架，把界面参考图和基础的 ui 规范给到它，其他的不管， 然后现在这是它生成的效果，它给我们提供了一个基础的框架。第二步，给 cursor 提供自然语言描述更换我们准备好了的切图，可以直接在这个地方把文件路径复制过来，方便 cursor 提取。 然后现在他把我们的切图都给更换到原来的这个基础的框架里。第三步，把字体大小样式描述好，让 cursor 直接读取我们放在文件夹里的字体。 其次是更换按钮的样式，我们直接复制 figma 的 css 样式，把原本 cursor 给我们生成的按钮样式给替换掉。那么现在我们就把静态的界面给做好了。如果你还想知道怎么将静态界面实现它的交互效果，可以关注我，我将会在今后的视频分享，拜拜。