element二次封装功能
粉丝1396获赞6455
相关视频
01:40查看AI文稿AI文稿怎么样基于开源的 ananaui 封装一个自己的主见？今天教大家去实现一个，这个是我用 voecia 创建了一个工厂，我需要安装 anamayui 主见库 src 目录下，我创建爱丽梅特普拉利这个文件夹，在这个文件夹下我添加入口文件，领带着 gs。 然后呢我还要创建一个没有意图片，这个里面其实就是爱丽梅特的黑豹图片， 主要看这个入口文件里面的结实，我要引入我这个主见，然后呢我要进行一个注册，对这个主见进行便利 用统一用这个方法进行注册，注册完了之后我还要进行安装，然后呢这个时候我需要再拍点结实，里面我需要配置一个 labour， 这个是什么意思呢？我给大家解释一下。首先这个是绿意本身自带的命令，主要看这个杠杠，他给的 labor 就是 表示要打成一个 labor， 刚刚内蒙这个，也就是说表明这个文件的名字叫大伟 twitter， 一定要和你这地方的名字保持一致。然后呢刚刚 dysstals labor， 也就是说生成这个 labor 这个目录，然后需要打包的入口文件，就是咱们定义的这个 里边的既然是文件，咱们执行一下看看。弄成一个雷暴目录，这个里面其实就是咱们 gmzui 封装好的主线，那么我们可以使用 anpm logo 命令，然后去登录 npm 关了啊，然后进行发布，登了完了之后，我们直接 appopolis 发布一下就行了。发布成功之后，咱们可以去搜一下咱们发布的这个主线库，这个就是咱们发布的主线库，用的话也非常简单，直接 npm， 你使到一下咱们这个主线库就可以了。
933大伟聊前端（全栈AI）
02:07查看AI文稿AI文稿网友又来活了，使用 element 的 message 组件，由于提示被疯狂触发，会出现整个屏幕都是这种奇奇怪怪的提示，担心用户小心脏受不了。其实 elementu 提供了一个方法，用于关闭所有实力，并且支持我们自定义方法来修改。实力， 先执行 coso 方法，再进行提示操作，但是这样会出现抖动的现象，需要自定义事件来优化一下。可以在 youtube 文件夹下新建一个 message 文件，接着导入 element ui 的 message 方法，然后你就可以在这里对 message 组件进行各种修改。 大致的实现思路是，先获取 dom 元素，看是否存在类，名为 l message 标签，如果不存在，再调用 message 事件进行提示操作，目前的事件会以这样的方 是来调用， 如果你想以这样的方式调用，则需要加上以下几行代码，先要定义提示的类型， 然后为每个 tap 定义了各自的方法，如 message success options， 可以直接调用。实现思路其实跟前面的一样， 如果大家有更好的实现方式，欢迎在评论区留言，顺便给小弟点个三连， 写完记得将试卷导出。使用 这里获取 dom 的方式需要改一下，不然会出现报错。最后在 men 点 j s 文件中全军 挂载，就可以在组建中去调用了。 这里还是使用和 element 同样的方法，名称 message 调用方法，测试一下效果，需要把原来的 closer 方法注视掉， 可以看到即使疯狂点击按钮，提示也不会出现抖动的情况，并且页面只会有一条提示，也可以根据需求去优化。
2535茄子懂编程🙈
16:30查看AI文稿AI文稿大家好，今天跟大家聊一下 vu 三 table 性能优化的问题。背景是这样的，前段时间公司有一个比较重要的模块，从 vr 升级到 vu 三，升级之后发现 imeterplus table 的性能比之前 vr 的版本要下降非常多。 自定义列全部勾选的场景下，列表中开关切换耗时从原先的四五百毫秒下降到七到八秒，非常影响用户体验。我们的表格是有二十行，一百八十列， 这种是自定义列全部勾选的情况，然后经过较长时间的一个性能测试，还有第八个，然后找到了几处比较核心的优化点。第一个优化点是修改 animal plus table 的原码，将 data 和 com 这两个变量从 rife 变成 shallow rife， 然后这样可以减少大概百分之十七到百分之二十的一个耗时。第二个优化点是这一个宽度的一个计算的一个函数，也是在 table 的原码里面，然后把它一个响应式的一个数据做成了一个非响应式的，然后可以提高大概百分之七到百分之二十的一个性能。 第三个优化点是关于业务方面的，在业务的场景下，去除脱 tep 里面的一个 disable 属性，把它改成微杠易服，然后这样可以减少百分之八十的一个耗时。经过这三个小的优化点之后， table 的整体性能从最开始的六点多秒，然后到最后只需要一秒左内，然后这个 demo， 然后已经上传到了 github， 就是这里面所有的代码，然后以及你怎 运行的。每一个节点的测试，大家都可以亲自去测试。这里你先把推博隐藏，然后再把推博显示，这样就可以计算整个推博的一个渲染耗时。我现在点开看 这个 loading 有点卡住了，可能跟我录制视频有关系，稍等，它显示七点多秒，这个比我，呃，比我测试的时间还要长。我们再来看一下这里的一个开关， 这里的开关是四点多秒，我们再来看优化后的一个效果， 我们可以看到优化后只要一秒就可以了，然后这个是呃，零点零点六左右，我们可以把这个列换到最下面，他是 二十行，然后一百八十年，这个数据是一模一样的，只是说我们把 table 换成了我们自己。呃，修改了一个 table 的原码。现在我们来具体介绍一下这三个改动点。首先是做准备工作， 然后新建一个 vu 三的一个项目，然后引入 item plus， 然后并实现一个 el table， 然后二十行，一百八十列这样一个表格， 这个表格总共有一百八十列，前两个是固定列，一个文本以及一个 switch 开关，后面的一百七十八列都是通过或循环，然后去渲染的一个自定义列， 这是对于我们业务场景的一个模拟。这里开关的切换理论上只改变了一个节点，但是它会造成整个 table 的一个呃派气比对逻辑， 这也是为什么这里一定要加一个开关，用来测试这个性能。另外还有就是一个 tour tip 的一个逻辑，我们可以看一下这个核心的一个代码，这是一个 el table， 然后 table 里面， 嗯，这两个列是固定列，然后这个列是通过或循环，然后加载了自定义列，自定义列里面有一个托 tip， 然后当有这个条件的时候，然后我会 嗯，不显示 tortip 下面是假数据的一个逻辑，因为我们要造一些假数据吗？包括一百七十八列的一个自定义列， 以及二十行的一个数据，也就是这里显示的这个第几行第几列，然后这个数据员就是我们做了一个假数据，然后另外我们这里写了一个怎么计算他的一个渲染耗时的一个逻辑， 就是我们在这个开关切换的时候，我们会有一个逻辑，就是在这里我们先展示一个 loading， 然后两百毫秒之后，然后再修改 table 的一个隐藏，这里会形成一个脚本的一个主色， 然后导致嗯，后面的这个关闭，楼顶的这个一直不执行，直到这个主色完成之后，然后这个楼顶才会关掉。后面我们再通过新建一个红任务来达到这个计算这个渲染时长的一个目的。这里做了一个初始的一个性能测试， 然后这里我也录制了 g f 图 table 的旋，最开始是要六点八八秒，然后 switch 开关切换的话，大概是要嗯，三点八秒。通过 performance 的一个录制，然后对比了一下这两个 house， 我们可以看 下这里的一个动图，最开始这个开关都是关的，然后到最后他才开，这里总共耗时是四点多秒， 然后和我们这里计算的三点，嗯，三点八秒是比较接近的，因为理论上你打开婆婆们是录制的时候他的，他对性能是会有影响的，他会比之前要慢一点。先来看第一个改动点，就是 rife 改成虾 rife， 这里先说明了他的一个理论依据与可行性的一个分析。列表中的开关切换的时候， table 虽然只是一个节点发生的变化，但是依旧触发了完整的无忧派奇比对更新的逻辑耗时比较久，下面是官方的一个解释， 这是虚拟 doorm 的一个缺点，就是你虽然只改变了一个部分，但是他还是会进行 整个节点数的一个比对，然后为了保证他的一个准确性，理论上，然后只要减少这个响应式的依赖，然后就可以提升性了。 下路 raf 的话，它是一种浅的一个 raf， 这里如果你不是通过 value， 而是通过它更深层次的一个属性去修改它的值，是不会触发下路 raf 的响应式更新的。 然后我们这里主要修改的是 data， 里面的就是我们 table data， 然后以及它的一个列的一个 cannomes 这两个变量，把这两个变量改成 cellulife， 这里有个问题，就是把 data 和 comens 改成这个 cellenrife 之后，对功能会不会有影响？ 首先我们每次列表刷新的时候，我们业务逻辑都会去重新请求列表，然后进行一个 list 点 value 的一个设置， 所以说它是可以触发向 raf 的一个更新的，就算不是 raf 也可以另外经过测试，然后就算在 switch 开关里面绑定了这个 scope rose 点 statos， 它也可以正常的去触发更新。 还有就是我们在手动点击测试的时候，选中排序以及表格的分页都是没有问题的，所以说基于以上三点，然后我们的业务里面这个改动是可行的， 但是我不能保证就是所有的业务场景都是 ok 的。所以说如果你想在你的业务里面去进行这样一个优化的时候，你要先做一个测试，看是否可行。下面来看一下怎么去修改 animaplus 的原码，然后并把这个原码搬到自己的项目里面。 简单来讲就是把 animal plus table 的原码拷贝到我们自己的项目里面，然后我们 eltable， 然后从自己的这个项目内，然后去引入。在引入的过程中你可能会遇到一些问题，然后下面是一些修改的一个方法，然后怎么 on animalplus 的原码 能够在我们自己的项目里面跑起来？主要是这个艾特，然后 anima plus 这样一个包它是有问题的。然后我们要进行一些呃替换以及一些修改，能够正常运行之后，再来修改一下它的一个原码。这里我们把 这个 store 握起点 t s 这里面的 data 以及 carnums 从 rife 变更到 xional rife。 另外我们在 table view 里面在它的最上层添加一个 来自 table 原码的一个红色的一个标记。这样的话我们可以知道我们这个表格是引用了我们本地的一个修改原码的一个 代码，而不是说直接引入酷的一个代码。然后这里我们进行了一个性能的一个测试，然后它的性能会提高百分之十七到百分之二十，然后这里是它的一个动图。再来看第二个优化，这里是关于 table 里面一个 宽度的一个计算的一个逻辑。首先当页面比较卡的时候，我们可以通过这个 performance 性能测试来测试一下它的一个性能。下面这张图就是在 switch 开关切换之后，然后做了一个性能的一个测试。 我们可以看到它有两个 long task， 一个是一点八九秒，一个是一点七三秒，然后整体耗时大概是三点六秒。这里面的区块里面主要是两种，一种是 种紫色的，一种是这种绿色的，绿色的这个 pat 是最大的一部分，然后像这个紫色的话，他是软的，他这里写的是软的吗？应该是在渲染的一些耗时。 一般派奇的话是 vivo 内部自己的，你可以通过减少节点数以及减少响应式数据来减少这个派奇比对的一个 house， 然后我们通过在这个里面去找 看有没有可以优化的点。我们这里找到了一个这个函数，他这个获取列的一个真实的宽度，这个函数他耗时有 两百多毫秒，把这个函数作为一个突破口，然后我们去看这个原码对应的位置，然后找到它是在 嗯， tr 就是我们的每一行在选的时候，他都会执行这样一个计算，他会获取每一列的一个宽度。他这里是调用这个函数吗？真正的函数定义是在下面他这里传进去的。 come 是，他其实只是用到了这个真实的宽度，以及他的外的是 只用到了这两个变量。他是没有必要用这个响应式数据的，因为你只要数据一变更，他这里都会重新渲染， 然后不可能说我只是单个的列的宽度变更。呃，这种场景基本是不存在的，如果你的函数里面有响应式数据的依赖的话，他会去收集这些依赖，导致他的一个耗时的一个增加， 所以说这里我们做了一个改动，就是我们重新定义了一个嗯 commos 的一个变量，然后 把它的一个响应式变成一个非响应式的一个数据，然后再通过这个参数把它传进去。修改之后，然后我们再来做性能测试，发现这个函数的 house 从两百多毫秒下降到了一毫秒以内。这里的 rand 我们可以明显看到这个 rand 的 house 从三百多毫秒变成了一百多毫秒，也就是说我们这个优化是有效的。然后我们再来测试一下 table 的渲染性能以及 switch 的开关切换性能，这个时候下降到四点七秒。下面我们再来看第三个优化点， 然后经过上面的一个优化，然后我们意识到就是即使是很细微的这个响应式数据的优化，也会对性能带来一个较大的一个影响。这里就想了我们的业务逻辑里面有没有像这样的数据，就是可能因为响应式导 导致我们的整个耗时增加了一个逻辑。这里通过注视加上将叉槽换成静态节点的方式来测试看具体是哪里耗时比较长。 然后经过测试的话发现这个医药托 tip 这一个部分啊，把它换成静态节点之后，他的性能有非常大的一个提升。我们之前这里开关的切换耗时是要两点七秒，但是我们换成静态节点之后，这个开关耗时就只需要零点五秒了， 也就是说这一个托 tp 这一个组件就造成了两点多秒的一个性能消耗。下面是扑风门式的一个性能测试，我们可以看到这个派起的逻辑基本上变得很少，基本没有派起，因为换成这个静态节点之后， 在模板变异的时候，无用内部他会进行静态节点的一个标记，后面再做比对的时候，他就不会再比对这个静态节点了。我们仔细来看一下托替波这里的一个代码，这里用到了一个 dcabo 的一个属性，就是当这当满足这个条件的时候，我们是不显示这个托替波的， 也就是说我们当在这个条件下，我们可以直接使用这里的一个失败的一个标签就可以了，我们不需要使用这个一二拖 tep 对不对？然后于是我们把 把这里的这个 dc boss 音去掉，然后换成我们这个微钢翼服这样一个逻辑，然后我们再做了一个性能的一个测试，发现这个改动之后，我们的性能并没有下降多少，还是零点五秒左右就可以刷好，然后证明这个 优化是有效的，可以发现就是这么一个不起眼的地方，他居然可以带来这么大的一个性能消耗，所以说不一定是爱你们的 plus table 的它的性能问题，而是有可能是你业务逻辑里面的一个问题， 因为无忧三的一个响应式的一个变更，然后他可能在节点较多的时候，如果你的响应式稍微一不注意，他就可能会极大的增加他的一个耗时。 然后我们再来做一个性能数据的一个收集，我们可以看到 table 的渲染只要一秒，然后 switch 的开关可以降到零点五秒， 我们再来看一下下面这张图，经过三个小的细节优化，然后我们把它一点一点从六点八秒一直下降到一秒，然后基本上性能的话差不多 是六到七倍，然后平均耗时的话会减少百分之八十五左右。完整的 demo 这里也贴了一个 bill hop 的一个链接，大家可以去自己去跑一下。最后就是做一个总结，在无忧三的项目里面，响音师数据这块要特别注意， 当遇到比较慢的场景的时候，可以使用下面的方法进行性能优化。第一点是使用 pofens 分析它的性能瓶颈，然后在里面慢慢的去找看有没有耗时比较长的一些函数，然后看有没有优化的一个空间， 然后自己可以写一个性能耗时的一个逻辑，这里的一个数据一定要做一个记录，这样你在优化的时候也会有一个参考，就是到底这个优化是有效的还是无效的，对不对？另外针对业务代码比较多的场景，采用注视 还有替换成静态节点的方法来排查耗时较长的一个逻辑，做针对性的一个优化。 还有就是我们可以使用 view 的 deltos 这个调试工具来查看组件的一个更新渲染耗时排查响应式的一个数据， 其实你会发现我们今天讲的这三个优化点基本上都是响应式数据优化的一个点，并没有使用懒加载以及虚拟列表。为什么不用懒加载跟虚拟列表， 其实我们项目里面也做了难加载的一个逻辑，只是说我这里没有讲。另外还有为什么不使用虚拟列表？ 其实我之前也讲过，就是虚拟列表，我们使用了一个 v f 一 table， 它是专门做这个虚拟滚动的虚拟列表的，然后我们在我们的场景下发现它还是不够 丝滑，然后展开行的话，他那个虚拟列表他是不支持横向虚拟滚动的。我们除了横向还有纵向，这个表格非常复杂，我们的业务也非常复杂，改造起来非常麻烦，而且我们的 table 还做了那个 顶部的一个固定，以及底部的滚动条的一个优化，它里面的改动是非常大的，你轻易的去替换的话非常麻烦，所以说才会花这么多时间来做响音师数据方面的一个优化，所有的代码都放到这个 给到哈不上面了，大家可以去访问这个链接，去把这个呆萌下下来跑一下。今天的内容就到这里了，我们下个视频再见。
52今晚吃泡面
00:31【开源推荐一百二十一期】Geeker Admin，基于 Vue3.2、TypeScript、Vite2、Pinia、Element-Plus 开源的一套后台管理框架。#程序猿 #web前端 #前端开发查看AI文稿AI文稿基于 u type script 家人们制作的后台管理模板，使用 pina 简单轻松管理跨组件和页面状态共享。对于表格进行了二次封装，表格的所有操作基本完成。互通装，内置了一个数据大屏和一些数据可视化页面，也有一些常见的指令，比如 复制水印、拖拽、长按等，也支持按摩式。虽然 vu 三的后台模板有很多，多一个框架就多一个，选着选的时候自己觉得好就可以了。
7217小明1994
04:00查看AI文稿AI文稿大家好，今天我们来分装一个组件，就是这个职工详情的组件，那么其实很多地方用到这个职工详情，比如说我们在职工的调转记录里边 先看职工详情，再或者我们在首页里边下个月计划成也也想看用户详情，那我们不可能在每一个用到的地方都写一遍这个弹框的组架， 所以呢我们完全可以把它封装成一个组件，然后在其他用到的地方去吊用就好了。我们今天就来看看到底如何把已经做好的功能封装成一个组件。那首先呢，我们需要把需要提取的组件的代码提取成一个单独的微有异文件。好，我们来看一下， 我们找到这个页面，页面叫对付的没有意义。好，就是这部分，这部分呢是他的 brt 报的抽屉组件来实现的，我们先把这部分代码拷贝出来，单独新建文件， 那我们放在专门有个 compendence 放在这里面，我们再给他单独建一个目录，专门存放职工的相关组件。然后呢我们再来新建个文件，专门存放这个组件，你叫 stayf 抵抗，然后把刚才复制的这个代码放到 tampay 的里面， 然后呢我们再写一个 squeep 的标签，里边存放一些脚本，再写一个 style 备用。好， squeep 里边我们来写下物价，比如说 sport default， 然后里边写上基本的主驾的名字，比如这个主驾就叫 stayf， 然后呢我们来写上 data， 这里边直接 race， 待会备用就可以了，然后再写慢色， 好，慢色子也放点先备用，然后我们再来检查一下这里边 这个抽屉组件用到的一些属性，比如说这个是否显示这个抽屉组件，然后我们把它拿到下边来，我把它分成两块屏幕 离开，要瘦，我们拿过来，不需要这么这么一个属相，默认是不显示的。然后我们再往下还需要一个这个，这是职工的一个对象， 然后再往下用到的这些方法，我们需要一会处理一下。嗯，那这里面还有一个，这个 还是在这地摊里边，像这种房卖的，他也是从字典表里把竖直转换成文字，所以这些呢，如果我们想让这个组件 足够的模块化，我们有两种做法，可以把这些字典数据查询到这个组件上，然后呢在这个组件展示的时候做一个转移。但是呢这种方法不是特别好，因为有可能这一个页面会频繁的打开职工详情，频繁的关上职工详情，这时候我们需要频繁的去加载这些字典数据，所以不是很理想。所以呢我打算后面我们 把这个数据库查询的地方改一下，直接查出来这些字典数据关联到这些字典表。那这样的话呢，我们就避免了在详情弹框组线里面去频繁去加载所有的字典数据。好，我们先把这些字典数据去掉，先让他能正常跑起来。 好了，一会我们在后台查询的时候， 直接把这些文字的数据查出来，就不用在前台做字典对照了。那接下来的剩下的这些方法我们需要迁移过来，我再来迁移一遍。 好嘞，我把这些方法都已经牵引过来了，接下来呢我们来写一个显示方法， 方法名叫瘦，传一个 id， 然后呢？这里边我们后边要去调接口来去请求这个职工的信息，暂时我们先不掉，我们先把这个弹框显示出来， nice 点比他要瘦，等于出。
478程序员小山与Bug
04:45查看AI文稿AI文稿万万没想到啊，昨天那期视频发布以后，很多小伙伴在关心这两个问题，我们先来看第一个啊，怎么能在我们自己的二次开发的艾力门的库上定期去合并官方的发行版？首先呢，我们先克隆下来这个库，我已经克隆下来了哈，我们先进入终端， 首先需要创建一个自己的分支，好巧不巧哈，昨天刚发完视频，他今天就发布了二点四点零的版本。那所以呢，咱们今天创建这个分支就不叫 my 二点三了，我们叫 my 二点 x， 所以 get check out b my 二点 x。 然后我们基于二点三点一四这个版本，也就是二点三的最后一个小版本去创建好，这个时候，其实麦二点 x 是不包含他今天新发布的二点四点零的，一会呢，咱们就拿这二点四点 去模拟合并。现在咱们先不管，咱们先去创建自己的私服，那为了演示呢，我就拿一个目录来模拟私服啊，我在桌面上已。 net 一个贝尔库， 我们叫 my deed。 好，我们把这个库的地址先复制一下哈，然后回到刚才这个项目里，我们先把他原来的这个远端库改下名，我们看一下他原来叫 origin， 是指向官方的爱了们的库上，把这个 remote， 把原来的 origin 改成 element， 我们来看一下 remote。 好，成功了。好，这时候我们再加一个自己的原短裤 add orange。 好，把刚才那个地址拿过来。这个好，我们再来试一下。 remote 大概有两个远端库了，这个下边是我们自己的公司的私服，上面是官方的爱里面的。然后呢，这时候我们把自己的麦二点 x 推送到我们 自己的这个私服上，给他，促使 lv 键买二点 x， ok， 可以了，但是还没有完。注意，现在这个买二点 x 还是在跟踪 官方的爱丽们的这个酷，所以我们要改一下 pete， branch， gaga， side， upstream， two， origin， mar 的 x， ok， 现在他就跟踪到了我们自己的私服上，我们来铺啊，或者铺是他都是针对我们自己的私服了，然后这个时候我们来模拟他，现在官方发布了新的版本，我们往自己的这个分支上合 兵吗？怎么合并呢？我清一下屏啊。我们先 fit 一下这个 aliman 的库的 tex， 就是把 aliman 他这个远段库的 tex 更新一下，现在没有什么更新，是因为我们刚才克隆的时候已经更新下来了， 所以正常的话应该是有的。然后呢，我们来做合并，这里这么写， r e f s t x 二点四点零。 注意这里有个重点，很多小伙伴可能会问，这个二点四点零没有指定是哪个远端库的，二点四点零是这样，在 get 里面 tag 数据 fit 下来之后是不分远端库的，其实有多个远端库， 所以我们在二次开发的时候一定要处理好这个 tag 的名称，不要跟 aliman 的官方的发生冲突哈，我们合并， 大家看就合并过来了，然后呢，我们直接铺实，就铺实到自己的私友库上了， 哦，这样就可以了。然后我们来看第二个问题啊，就是很多小伙伴在问这个终端的命令提示是什么？其实这个提示啊， 是提示我之前输入过的命令，比如说我现在输入一个 ico 一二三，然后再输入 ico， 大概它就有了，我可以按 ctrl f， 它就提示出来，直接回车就行了。 那这个插件呢？其实就是我们先装了欧麦 z shell， 然后在欧麦 z shell 里装了这个 autos 摘身子插件。那具体的安装方法我就不演示了哈，官方他都有，很简单， 我就再给大家推荐两个插件，这里这个呢就是刚才说的那个， 然后再给大家推荐一个这个，这个有啥用呢？就是大家看我在中段里，如果输入的命令是错误的，他是红色的，如果输入正确的呢，他就是绿色的。大家看， 然后呢，这个也很有用，如果我们在中端里边，比如用一个 c u l 来获取一段 jason 哈，大家看它是没有格式化的， 那如果你装了这个 jason toos 呢？就可以，我还是 c o l 加一个管道符交给 p p， jason 打开它就会踢我们格式化。
2076程序员小山与Bug
23:57查看AI文稿AI文稿好，欢迎大家来到朝夕教育啊，我是芳芳，本节直播啊，会给大家聊到的是 vivo 三点二和我们的 t s， 哎，其实说到这块啊，黄金组合，为什么这样说， 我不知道那个小伙伴们现在在企业里面用到的版本啊，就是 vivo 的版本。好，我这样问一下吧， 在企业中，我们已经用到 vivo 三点二的，哎，咱们直接的那个回复一下三，可以吗？对，在企业里面啊， vivo 的版本你已经用到 vivo 三点二的，哎，咱们直接回复一下三，我先了解一下大家情况，看一下一会再聊的时候，是否需要去给他把这块的那个折腾折腾啊。 好，看到了有些小伙伴的回复啊，哎，这个用到的好像不是特别多，你看现在给我回复的大概有几位小伙伴，有五位小伙伴，对不对？嗯， 好。然后一口一个小朋友说到说，啊，那个企业里面用的比较多的呢，是二啊，应该给大家这样去说啊，现在企业中一般项目要是有重购啊，啊，会选择 vivo 三 啊，一般版本呢是 vivo 三点二，但如果是维护哎，传统的项目，那一般情况下我们不可能去对他做一个更新的，对不对？那肯定还是会维持原有的这个二的版本。 那现在企业呢啊，一般情况下用到的版本啊，会有以下几个，简单说一下，像我们后台管理系统 啊，用到的比较多的，比如说 vivo 二和我们的 m u i 结合，对不对？还有就是中间有一个过渡版本 vivo 三点零，但现在呢， vivo 三点二基本已经比较普及和稳定了。那么 vivo 三点二呢，一般我们用到的这个 u i 框架呢，是 elem the plus， 哎，这一块呢，在咱们前几次的这个训练营里面啊，给他说的特别多，那么还有一部分企业呢，他会用到的是 vivo 三点二和我们的 ts 来结合，那么很多企业在面试的过程中啊，会尤为强调，同时也需要你具备这个 vivo 三点二和 ts 的能力， 所以我们今天和明天两天的时间，会给大家就着在我们的这个 ts 啊，同时和我们 vivo 三点二结合在我们的企业级项目中，哎，我们这块具体应该怎么样去运用呢？ 相信啊，最近很多小伙伴在面试找工作的时候应该已经哎，有一些企业呢，对你那个进行了一些考核，对不对？好，同时那如果有些小伙伴希望在我们啊，就是 vivo 三点二和 ts 这一块呢，有一个更加的哎，就深 深入了解一下在企业级项目中具体的一些运用。那咱们今天明天这两次直播课呢，希望大家就不要错过了，我可能会跟大家聊到一些啊，比如说公共的一些用法，包括我们 ts 里面 啊，像什么接口啊，对不对泛行啊等等啊这样一些，哎，具体的一些特性，在我们的 vivo 三点二里面呢，又应该怎么样去用？那么 ui 框架呢，我们用到的是这个 amb plus， 所以 啊，这个应该说也是在企业里面的黄金组合，对不对啊？就是 vivo 的版本三点二 ui 框架呢 and plus， 同时呢结合我们的 t s。 那从啊，就是给大家聊到具体的实战的时候，我会从项目的构建开始，然后给大家一直聊到啊具体的一些运用，包括里面的各种封装处理，所以有些小伙伴想要这块得到提升的，那咱们今天和明天 两天的直播课程呢，就千万不要错过啊，好， ok 啊。嗯，有同学刚才提到了一些问题，我简单的回复一下说， 啊，没有 ts 基础的可以学习吗？好。然后还有也有同学提到说 ts 完全没有看过，如果完全没有 ts 基础的话，一会再跟他说的过程中 啊，相对会有那么一丢丢的难度。但是我可能在跟他啊聊到具体的就是一些用法的时候， 会先跟大家结合基础来去聊。好，我同样也问一下吧， ts 这一块，嗯，如果觉得基础都不是特别好的，那咱们就回复一波一，哎，感觉这一块 ts 呢，像我们刚才提到的什么接口 啊，比如说范型对不对啊，常用的一些特性啊，哎，各种类型的一些定义啊，包括像什么媒体啊，原主啊等等。如果说这块 都了解的话，哎，咱们就回复二，嗯，好，简单问一下，如果 t s 啊 t s 的话，没有接触过啊，不太了解，基础相对比较弱的话，我们回复一，有基础的话咱们回复二。一二三。同学提到说，懂后端学 t s 栏吗？ 其实 ts 啊，很多新的一些特性，包括一些运用和后端的很多语言是比较接近的啊，不知道大家家有没有这种感觉，越往后，哎，你会发现语言已经没有那么分加分的清晰了，对不对？ 非常好啊，也看到了有一部分小伙伴的回复二，回复二的小伙伴呢，只有两位，其他的小伙伴基本都回复一。好，一会我再跟他聊的时候呢，相对会讲的慢一些啊，那也希望大家啊，在我们那个具体聊到某些知识点的时候，碰到什么样的问题，你们直接可以在公屏里呢提出相关问题。好， ok， 非常非常好啊，名字呢，我就不依恋了，你们的回复呢，我都已经看到了，嗯，好，有同学说是从啊这个零开始吗？对，我会给大家从项目的构建开始，然后一步一步去聊啊，我们 包括像 ts 里面的一些定义啊，哎，然后一些具体的运用啊，所以这一块的话，对于相对基础比较薄弱的小伙伴而言啊，那个咱们就要认真去听了啊， 好，行啊，非常非常好，看到了很多小伙伴的一些回复。好，那再给大家说到这块呢，我先简单的介绍一下啊，咱们啊今天和明天这两天的这个训练营，会给大家设计到的一些相关知识点，包括你现在看到的这个效果图， 如果时间啊相对比较允许的话，我们在里面呢也会给大家去通过这个，比如说表格数据的这项改查，让大家能够更清晰的明白 vivo 三点二和 ts 的一个结 结合好，那重点呢，就是我们的企业级的实战呢，与具体的封装啊，用到的技术站呢，简单说一下我们的构建工具 weight， 然后结合 t s view 的版本。三点二， exos， 这个是肯定说到的 ui 框架呢是 element plus， 好，在里面呢会给大家从项目的构建开始，然后一些常见的配置哎，包括我们的 xs 和 ts 结合的啊，具体的一些封装，还有呢，就是我们里面会给大家聊聊 interface 接口啊，他的一些合法约定哎，前后分离，优雅的哎，正常改查。好，这个呢，是我们这两天呢将会涉及到的一些相关知识点。 好，那再给大家进入到具体实战内容前，简单的说一下啊，因为有些小伙伴呢，我看名字啊，非常非常熟悉，有些小伙伴呢是老朋友啊，好，不管是我们的新朋友，老朋友啊，大家进入到直播间简单了解一下哎，你们可以叫我索利亚， 或者叫我芳芳，都可以的，开发时间相对比较久了啊。好，再就是呢，目标，我的目标其实也很清晰，就是希望复杂的代码呢，能够变得清晰简单起来。好，那还有一点核心重点要跟大家强调一下， 因为啊，只要来到我们直播间听课的小伙伴，除了能够享受我们直播间带给你的啊，就是相关的一些知识点，能够跟跟大家呢在直播间去讨论以外，直播间打卡 哎，可以获取相关的一些福利。福利是什么呢？是我们的 reactor 零基础入门到实战的全套课程，所以我要给大家强调一下，今天明天两天坚持在我们直播间听课并且打卡的小伙伴是可以免费的领 取 react 零基础入门到实战的全套课程。好，具体的领取过程包括我们怎么样去进行打卡，以及我们资料的分享时间，在当前大家看到的 ppt 里面我都有详细的说明，这个我就不再给大家一一说了啊， 如果有些小伙伴对于规则不太了解的话，或者说具体什么时候打卡发给谁，哎，记住了啊，这块还没有添加我们来森老师为好友的大家可以赶紧添加一下，对于刚才提到的打卡规则不了解的小伙伴呢，你们也可以直接的添加一下，来，森老师有什么样的问题呢，可以直接跟他留言。 好， ok， 这个是在我们直播间坚持打卡能够给大家分享的相关福利，那福利希望大家也不要错过对不对？好，这个啊，好，刚才说到这一块，哎，就是我们的具体的这个知识点，以及坚持听课小伙伴呢能够享受到 的各项福利，那这块大家是否都 get 到了， get 到了呢，咱们就直接从项目的这个构建呢，要给大家开始了。好，如果还有一些小伙伴对于我们刚提到的这块要是有疑惑啊，或说有什么不太清晰的地方，可以的提出你的问题， 好，都没问题了啊，都没问题呢，我就开始了。好，那在给大家开始前，我先问一下，哎，你们平时的构建工具一般用什么都会比较的多，就是大家在构建我们的啊， vivo 三的项目的时候，构建工具你们用什么会比较多一些哎，像尾号二八八二小伙那个二八八三小伙伴，嗯， 一口一个小朋友说用到的是 wait， 华同学用到的也是 wait， 好白，那个半碗白粥同学说用到的是 n p m。 嗯，好，我简单说一下，构建工具呢，我们现在用的比较多的，呃，有两个啊，第一个呢是 wait， 哎，刚才很多小伙伴说的是 对的，第二个的话呢，就是我们的 vivo 杠 cli， 也就是说，哎， vivo 官方提供的对不对？脚手架的这个构构建工具搭建我们的开发环境，那我今天啊跟大家聊，我们聊到的是版本呢，是那个 wait 版本呢，是四啊，可能文档上面跟大家写的三，但实际版本现在最新的为四， 针对这个构建工具呢，简单啊，就给大家也这块也说一说，因为有一部分小伙伴呢会比较纠结于说，哎，我究竟用什么样的这个构建工具， 那么我们刚才给大家提到的 wait 啊 wait 呢，记住了，它是基于原生 e s mergo 的，在我们的生产环境下打包呢，它使用的是我们的 roar up， 所以说，呃，从编译打包来说的话，比我们的 wepad 可能会更快更小，哎，不过话说回来， wait 呢，它仅仅只支持我们的这个 view 三，所以这 这个地方再给大家强调的时候，希望大家在构建我们项目的过程中先选择矮适合的这个构建工具。好，那么在如果说我们通过这个位特来进行相关项目构建的话，好，我们来给大家边说到这块呢，我也同样的啊，给大家那个操作一下啊， 好，我们来，我把这一块呢给他放在呦，好，我们把这个先给他打开啊，那我把这一块呢给大家放在旁边， 好，一个一个给大家都那个先捞出来啊，好，稍微等一下，我刚才不知道点了什么，你们的那个聊天信息全部被我缩小了，好，非常非常好啊，也看到了有些小伙伴的一些其他的回复，对，那咱们今天啊给大家说到的是这个位特 好，那在啊，就是构建项目前这个构建的工具呢，是，就是我们的命令行工具啊，是蛮多小伙伴呢平 是非常非常纠结的，哎，非要用到说，哎，比如说 c m d r 这个呢，大家不用纠结，你在民银行里面随便用什么都行，对不对？这个呢，大家都可以的啊，好，那我们如果是要去那个构建 view 三点二和 t s 的项目，那当前这块怎么做呢？第一步啊，哎，先就是 啊输入，也就说你在里面先输的是 n p m in it i， 然后写入我们的 vit， 在里面呢，直接的输入你项目的这个名字啊，比如说你当前的这个项目的名称，好，我跟大家简单写一下，我们就写一个 view 三杠 t s， 后面呢再跟大家写一个杠 demo， 一看明白没？好，这个名字呢，大家是可以自定义的，那么我们选择的这个框架啊，比如说你选择 view 也好， react 也好，再就是我们里面用到的是 j s 还是 t s， 记住了这块你选择的不同， 那么我们项目一会在下载相关依赖的时候会不太一样。好，行，刚才说到这一块呢啊，我可能在一步一步给他操作的过程中已经进入到了我们下面这一块，这个地方他代表的是什么？你要进入到你当前，哎，就是构建这个项目完了以后，我们要进行依赖的一些下载和安装， 再呢启动我们的项目，所以说接下来我们要处理的是，好，我在里面也跟大家写一下 t s a， 然后呢代码一对不对 啊？提到这个地方啊，哎，就是我们当前要下载一些依赖安装的话呢，我要给大家强调一下，因为刚才有同意提到说 npm， 我们现在用到的这个就是 npm cnpm 以及样，它是属于包管理工具， 记住了，我们刚才给大家提到了一个是构建工具，还有一个呢是包管理工具，那么包管理工具它的作用是用来干什么？其 就是对我们的啊那个依赖进行，比如说安装啊，卸载呀，管理呀等等等等，我们现阶段用的比较多的，要么你用 npmi， 但是呢啊，这个呢是录的里面自带的啊，但是呢他的原是从国外的服务器呢，就是下载有时候可能会出现网络影响， cnpm 呢是淘宝团队干的一件事，镜像对不对？哎，把它呢同步到国内，那么一样呢，是我们的 facebook 公司啊，哎，就是开发的，那么它呢会比我们的这个哎，就是 npm 呢，哎，更加快捷哎，就是更加又轻巧 啊，包括整个结构呢，也会更加的这个轻松一些，所以这块你可以选择按你自己的习惯用哪个都行。那如果我们要是用到这个样好当前这一块下载依赖呢，你就直接在里面写入样就行，项目的启动你要用样呢，你就写入样，哎， dv 如果是通过 npm 的话，就 npm run dv， 这个呢大家了解清晰就行。再就是呢，我们的网络啊，因为网络影响吗？如果你的网络给力，你看我们刚才在给大家安装相关依赖，其实整个环境构建呢，估摸着几分钟就可以了，但如果网络一般不不太给力的话， 可能会出现下载的时候安装报错或者各种警告等等，我们可以呢切换一下网络就行，一般呢会在五分钟之内啊，咱们的这个哥依赖项目呢，环境呢就可以构建成功了。好， ok， 刚才说到这一块啊，相关的这个文字描述以及截图呢，我在文档里面也跟他说的比较清晰，那我快速的划一下。好，这个呢是，哎，咱们的具体就是名字完了以后在里面呢选择，哎， ts 对不对？好，然后呢在里面输入我们的具体项目的名字，哎，这个时候如果你 你用到的是 npm， 就写入 npm insto 或者 npmi， 然后呢 npm 软 dv 就可以了。好，那相关依赖安装我在里面也说到了，用到样或者用其他。好，我们的项目启动，那说到这个位置呢，我也给大家启动一次啊，我们在里面输入了样 idv 默认的这个端口呢是五幺七三。好，我们来把项目呢给大家直接的就是启动一下啊，好，行，写到这块我们来访问一次，你看到位置加那个 view， 哎，这个呢就代表我们的项目环境呢，已经给大家构建好了，所以现阶段啊，构建这个开发环境啊，非常的快，是不是分成就可以搞定了啊？ 好，那在我刚才给大家边说边演示的过程中，这一块我构建我们的环境有没有问题，没有问题的小伙伴咱们来一波，六六六，有问题的同学呢，提出问题，好，再次呼唤一下， 由于这块呢相对应该说操作起来没有任何难度啊，这把只需要把里面的每一步呢记下来就行。再就是有些小伙伴说话不小心选错了，选错了咱再来一次，哎，这个呢也没有关系，好，非常好啊， 好，那也有同学提到说 t s 的环境怎么配呢？哎，当前你要是选择了 t s， 默认情况下，它会帮我们自动去进行配置的，这个不需要我们，如果你要是啊，比如说自己来配的话，这个呢是需要在我们的外派给里面进行相关的一些配置啊，所以我们为什么会现在选择各种啊，像一些 这种，哎，别说脚手架的工具呢，因为他可以帮我们快速的就构建好这个环境，不需要我们自己在里面进行相关配置。如果有些小伙伴也需要进行配置的话啊，这块呢当然也是有办法的可以配啊。不过我们今天的这些直播哎，重点跟大家聊到的应该是他的一些运用配置 上面呢相对会弱化一些。好， ok， 那在我刚给大家说到这一块项目呢，已经启动成功，咱们记住了，哎，这个就不要关掉了啊，你关了以后，那我们的项目就没有办法访问，但是你在安装一些其他依赖的时候，我们需要呢，哎重新的在里面安装， 嗯，由于我们在给大家构建的过程中，不知道大家有没有留意到你说像陆游啊，哎，包括我们的 store 就 view x door 对象啊 这些呢，默认情况下它是没有的，但是在我们的 vivo 杠 c l i 构建的时候，它里面呢是可以哎进行相关自动配置的，对不对？ 所以说当我们把整个的开发环境哎搭建好了以后，我们还需要自己手动的去进行路由哎，包括 xs， 包括我们的这个 ui 框架，一步一步安装好。 所以接下来呢，我就来跟大家说一说啊，咱们的这个依赖，其他的一些依赖啊，他具体的这个安装方式又是什么样的？那咱们就先从哪个开始，先给大家从这个路由开始，好， ok， 回到我们的具体项目，我先把这个呢给大家，那个直接退出来了啊，好，我们来给大家呢，再一次把路由安装， 那么安装的过程中再一次强调一下，如果你要是没有指定版本的话，我们默认的是最新的版本。 再就是呢，大家一定要记得后面要写入杠 s 以及杠 d， 因为针对我们的生产环境或者说开发环境对不对？哎，他呢安装的时候记录呢是不同的。好，行，那我在刚才给大家说话的这一会功夫呢，我们的路由已经那个安装进来了， 如果你还要去，好，我说到这块呢，我继续跟他往后，那像 exos 呢，这个数据交互我们肯定是需要的，但是我 一会给大家装啊，咱们现阶段的先不管他，因为一会用到的时候，咱们再一步一步装，但是呢， i'm the plus 呢，这个是需要我们提前的。好，那我先把这个呢给大家那个先安装进来。 我们在安装这个 element plus 的时候，因为这一块给大家平时说的比较多，如果有些小伙伴啊，平时有关注课程的话，也像我在跟大家进行 vivo 三点二这个运用的时候，提到过 我们的这个 view 三里面，它会更加地强调按需加载对不对？如果啊，你希望是完整引入，也就是全局的话， 我们在里面呢只需要把 m plus 呢安装完了以后，在里面导入样式，导入我们的 m plus 哎，然后使用就可以了。那如果你想按需加载，这个时候记得里面呢又分为有两个，一个叫自动导入，一个呢是手动 导入。自动导入呢，我跟大家把这块呢整理出来了，我们需要一个插件，然后在我们的位置里面去进行相关的一些配置。好说到这个位置呢，我简单的提一提 啊，究竟是完整导入好还是按需导入呢？其实从我们项目打包的体积， 包括性能优化等等各方面来说，那按需导入肯定是更好啊，对不对？你有没有想过全部引入，假设我们里面有一千个组件，那我这个时候可能用到的只有里面的十个二，或者说几十个，那其他的都是一些无意义的，他会导致我们的体积过于庞大， 同时我们在第一次加载的时候笑的时间也会比较长，所以按需加载呢，是 vivo 三点二里面的提出的啊，就是应该说很多地方呢，相对那个会哎，就是我们在运用的时候会不会加强 料的，比如我们用到一些新的特性，像什么 r e f 呀，哎， reactive 呀，或者说你里面用到什么生命周期呀，对不对？我们都需要导入了，然后才能去使用，不会说哎，把它都那个完全的引入进来，不管你用没用， 这个跟大家有强调一次啊，那我们刚提到这个 m， 那个 plus 的话，我来先给大家呢把它安装进来，好，我们同样在里面呢，通过的是这个一样的方式啊，那在里面写入 e l e m e n t 杠哎，这个 plus 对不对？记住了，杠 s 和杠 d 呢，咱们一定要写 好，那我把 m plus 安装进来以后，我们还需要去给大家安装的是我们的这个哎，自动导入的插件，好，我同样的方式呢，那也一样给大家安装一下啊，好，我们把这个写了 play game， 好，后面是我们的 view， 哎，然后呢是这个 comparten， 对不对？好，记住了啊，这个呢，我们要写入的是杠 da， 两个要分清，因为如果说仅仅只是在我们的开发环境下拥有，那咱们就不需要对他那个安装，哎，我们就不要写那个杠 s 了，如果说你希望在生产环境下，那我们这个时候要写入的是杠 s， ok， 在跟大家刚才写入的过程中啊，我们如果要去验证一下自己刚才安装的这些依赖是否都已经安装进来了呢？好，我们接下来要执行的是哪一步啊？把，我们的项目啊，好，我跟大家用到的这个工具呢，是 vs code 啊，同样强调一下， 你想用什么都行。好，直接我跟他导进来啊，这个比较方便， vs 扣成的非常非常方便啊。在我们的这个，也就是我刚才给大家把整个的环境构建成功之后，我们在里面呢会看到你，比如说，哎， package， 点接生文 件，比如我们的相关配置文件，你看 we 点 config， 点 t s 文件，还有呢，我们的这个原文件，包括我们的一些包管理那个就是一些依赖，其实这一块和我们的 view 二点几的项目呢，差异是不大的， 好，相信很多小伙伴 vivo 二年级的项目实战都有，所以这块呢，我就不跟大家做过多太多的一些介绍了啊，好，那 当我们把这个项目就是拿到之后，我们首先要看到的第一个呢，是我们的 pack 点接手，哎，这个文件对不对？项目的启动，哎，包括打包，还有呢，就是我们的 ime plus 版本， view 的版本，哎，当前 view 的版本能给大家用到的是三点二点四五的版本，也是现在最新， 而我们的路由版本呢，是四点一点六的一个版本，同时 t s 的版本呢？四点九点三的版本，位置的版本呢？四点一点零。不是有很多小伙伴比较纠结于说， 哎，你当前项目里面的个特性或者依赖的版本吗？通过我们的 pick 点接受文件呢，大家就可以看得比较清晰了。好，那把这块了解了之后，我们接下来要进行的处理是什么？最开始加载 加载的是我们的哪一个文件？也就是说你最开始进来的时候，进入到我们的是这个 i mind t s 文件，对不对？我们先进入到的是它，然后我们第一个加载的是我们的诶， a p p 点 view， 如果你里面要用到 t s， 记住了，我们的这个语言，一定要把 t s 呢添加进来， 否则你到时候在里面写入 ts 的一些语法特性，他是没有办法去识别的。好，行啊，再给大家说到这一块，哎，我不知道这个整个的一个哎，就是项目的环境，包括我们的一些依赖安装，大家是否了解，了解了以后，我接下来要处理的就是啊， 像我们的路由的一些配置啊，哎，包括我们其他的啊，比如说啊，具体的组建中的一些引入方式啊等等等等。好，那我再说到这块呢，我也同样的先停顿一下刚才我们提到的这个 package， 点接受文件中 安装的个依赖，包括环境都了解的小伙伴，咱们来波六六六，然后继续呢给大家往后面去说，因为我一般在跟他聊到某些内容的时候，可能会忽略掉你们的一些问题啊，放心，我会给大家那个足够的时间去提问所有同学，如果有问题啊，这会呢，可以直接在我们的公屏里呢提出你的问题。 再就是呢，有些小伙伴前面提到的问题，万一我讲的比较专注，那个错过了啊，你们可以反复的再写一次。好，如果没有问题的话呢，那咱们就来一波六六六，嗯，好，非常非常好。哎，看到了很多很多小伙伴的回复啊，好 名字，我念一下，不满，天星同学，刘同学，黄兴义是不是读义好，还有我们的这个，哎，就是花花花草草同学啊，好，还有我们的这个 l 同学，一口一个小朋友，同学啊，这个 i didn't 对吧，还有我们贤同学，只求同学好， ok， 还有我们的 bo 同学，一二三同学 啊，一二三同学说，如果不加 ts 是不会，那个不生效，他会报错的啊，你在里面写的时候他会报错，说白了他就不会识别你，要么里面就不写到 ts 的这个语法特性，你要写到了他会报错，好， ok， 那既然大家都没有任何其他的问题呢，我们就继续再来给大家呢往后面去聊。
29前端芳芳
00:49查看AI文稿AI文稿可以再问两个比较难点的吗？二十 k 对我来说确实是属于比较高期望比较小的。我现在想要封装一个巴腾组建啊，你的思路是什么呢？ 结合我用的比较多的安里面的 ui 库吧，他的一些巴特其实并没有一些事件上的一些的处理。嗯，因为这些事件我们都可以用原声的去绑定吗？所以我不打算绑定这些事件，我会考虑给他加一些叉槽，因为比如说他有有 些，有 icon 吗这些，然后呢？样式要做一个比较好的，我就打算用 nice 套一层的这个样式，就是方便他来改这个样式。不加一个楼顶吗？你竟然提到叉槽了？提到了 icon， 对，做防抖的这个漏顶之类。对对对，这个还行啊，起码能说出来一些碰撞方式。呃，事件的一个设计啊，包括 props 参数的设计。但是我觉得一个 fiber 架构啊，库克的底层原理啊，现在的面试这种问题实在是太常见了，实际的场景算法题会更多一些。
860黑马pink
05:48查看AI文稿AI文稿大家好，小蔡开箱又来了，今天开箱的产品呢是举申刚刚发布的新品， element 系列的新成员 element xr pure 啊，这款产品呢也是举申这个品牌啊成立十周年的一款纪念产品， 从这个 pure 的这个词呢，大家可以感觉到这台机器 lmt xr pure 呢是一台更加纯粹的追求音频解码和播放的设备。那接下来我们就开箱给大家来看一下这台机器， 盒子的旁边呢是一根电源线，我们就先放在一边， 呃，这些啊，快速 使用指南啊，这个快速指南呢，实际上给你的这个感受啊，还是啊你能很快的从当中会学习到怎么样去使用这台机器啊，包括这些啊，图片啊，这个接口对应的是接什么设备，大家能够很清楚的能够感觉到啊，然后 这个是一个保修卡，然后啊举升的产品呢，现在都会里面放一个 room 的这个试用体验卡啊，你可以啊通过这个上面的领取码呢去兑换啊， room 的试用， 然后呢还有一个就是遥控器了，那其他这个包装盒里面呢就没有东西了啊，那大家从正面上面可以看到啊，前面版的啊，整个设计呢和 element x 二是一模一样的， 有一个区别就是这边没有耳机孔啊啊，本来呢这里有个六点三五毫米和四点四毫米平衡输出的耳机孔啊，这里没有了，那其他的电源键啊的这个位置啊，包括这个音量旋钮的位置是跟 x 二一样的。那还有在这里大家可以看到啊，这里有个 十叶子天叶子的一个啊，贴上去的一个小标签啊，那我们来看一下背后的接口啊 啊，实际上它这一次的这个 xr pure 呢，功能上面还是很丰富的啊，大家可以看到就是这个接口 a x in， 那说明它还是支持模拟输入的啊，相对于 xr 呢，这台 pure 的机器只是 取消了耳机接口的输出的部分啊，所以说这是一台更纯粹的音频解码播放器啊，那这台机器的 这种场景呢，相信大家也应该啊了解到，就是只有音箱没有耳机的这类用户啊，因为实际上在这个价位，甚至是啊一些还要再高一些的价位啊啊，有非常多的一些音箱的啊，有缘音箱的也好啊，其他的无缘类的音箱的客户也好 啊，他们想买一台纯的解码器，实际上不太好选，很多时候会选到一些啊，解码耳放一体机，或者说解码耳放前机一体机，那这个时候呢，难免会有一些啊，我这个钱可能有一部分花在了耳放上面啊，但是这台 x r q 啊，就可以解决这部分客户的问题， 那我们还是跟大家来介绍一下这台机器的后面的接口啊，左边的这个 analog output 还是非常常规的这个解码器的输出啊，一组平衡，一组非平衡啊，两组的输出 接口啊，然后这个呢，就是啊，很意外很惊喜的一台纯的解码器，上面他还是给你保留了一个呃，模拟输入的接口，这样子呢，也方便，现在非常流行啊，这黑胶唱机啊，现在很多用户也在玩黑胶了，你可以通过这个接口去啊输入给这台机器 啊，作为一个前极控制器也好啊，作为一个啊，这个播放器也好也是可以的啊，然后这里呢就是数字输入区域了啊，当然啊， x 二独有的两组同轴，两组光纤，这台机器也有啊，还有这个巨声啊，非常经典的这 its 接口以及这个 arc 接口 啊，更适合啊，作为一个客厅的音频解码播放器来使用，你可以通过这个 hdmi 啊 arc 接口去连接电视机，来获得更高品质的音乐播放啊。然后旁边这个 usb b 型口啊，这个就是常规接口了，解码器都会有的啊，这个 type c 接口啊，用来作为一个扩展存储的用的啊，这个可以接 u 盘接硬盘，当然现在还有一个最新的一个固件更新，你可以用这个接口来播放光区，可以播放 cd 光盘啊，旁边的这个网线接口 以及呢这个联动触发开关接口，这个就是当你连接了这个同样有这个触发开关接口的时候呢，他们可以联动啊，一旦解码器打开了，他下面的机器呢，也就自动的跟着打开了，然后旁边的一个电源接口 啊，所以说整个这台机器呢，功能还是蛮丰富的啊，基本上可以满足一些啊，常规的对于解码，对于播放有要求，但是他不是一个耳机用户的这样的一个需求啊，当然这台机器最重要的一个部分呢，就是他使用了两块啊， es 九零三 三九 pro 啊，这个是最新的一个全新发布的音频解码芯片啊，啊，这个机器使用了两片九零三九来作为它的解码芯片啊，我们也是对它的声音非常期待 啊，那其他的关于这台机器的体验部分呢啊，实际上还是跟之前的 element 系列的产品一样啊，你可以通过举升这个 m a remote， 或者说呢，可以通过 room 来控制这台机器，并且可以去啊访问你的 nars， 访问你的硬盘的资源库，使用起来非常方便。 好，那这台机器呢，在我们的门店也有呃，出样，大家对于这款产品感兴趣的小伙伴可以来我们的门店试听体验这款产品啊。那这一次的 element xr pure 的开箱呢，就到这里了啊，我们下个视频，再见。拜拜。
127壹视听
04:23查看AI文稿AI文稿好，那接下来我们把这个再给他看一下啊，就是这个项目啊，我们在这边把它做完啊，好， 好，这样做完了之后，大家看，现在这边不是做好了吗？做好了，要说这个东西要上线，明白吗？就是要发布，那怎么样去发布给别人都知得到啊？就是说在互联网上去使用，那这怎么办呢？我们就会这样做啊，找到这个项目代码， 好，然后这边找到他找到了之后，然后在这边这个什么找到这里好，这边找好了之后再看啊，这是只需要执行这样一个命令，在他的这个拍点结实里面 有这样一个命令，叫什么？叫这一个叫 beaut， 明白， beautiful 的话，这里面有一个叫普罗大克的，明白吗？这个是干嘛的？这个是代表把它发布，明白吗？那我们在这边做好了之后，然后在这边你就执行一个样， 好，让标准的话就干件什么事情呢？他就把我们的那些点位的那些文件，就相当于给我们打包打包生成一个介绍文件，用我们的浏览器，他只能识别什么识别这种纯介绍文件吗？好，然后这样做好了之后，然后在这边呢， 等一下，大家看啊，还没打包完，打包完了之后，我们只需要把那个借此文件，把它干嘛呢？和那个天宝文件，把它给到后端就行了。好，大家看这打包完成了，你看这打包完成了之后，他是在这个地址的下面就有这些东西了，明白吗？好，那接下来的话我们在这边去看一下， 这边他有个地势的，明白地势的时候，大家看这就是要打包好的文件，这个呢就是他的这个什么页面，这边的话呢就是他的静态资源，你看他有他的借势，有他的这个什么，有他的这个摄影设施，这些代码全部都做好了，那做好了之后我们只需要把这个东西给到公司的用维，明白吧？公司有个职位叫用维，或者说 给他后生程序员，后生程序员就可以把这东西干嘛的？把它放到线上服务器上去。好，线上服务区的话，我在这边之前我们给他买过这个服务器啊，就这边。 好，那我这边的话是用的腾讯云这个服务线，在这边的话就有这个网站，那我在这边的话我就可以创建一个站点，明白吗？好，站点的话，那就要说这一个的话是我们的这个什么技术科技，然后点这个什么，我开发网点生好，这样做好了之后，然后在这边呢就点一下提交， 提交了之后，然后在这边的话就有这个地主科技，这个就是地主科技的官网，明白吧？但是现在打开的话是什么都没有的，就是一个默认的技能页，那我们就找到什么，找到我们的这个 网站啊，找到他的这个模板，明白吗？就这个他的页面吗？那这两个东西我们肯定用不到啊？就是默认的这个首页，我们不用他的。那我们在这边是不是把自己的这个项目，这个不就自己 项目吗？好，这样做好了之后我们压缩一下，压缩下来之后，然后再把这个传上去就行了，明白吧？好，那在这边有一个上传，上传的话在这里面有一个选择文件，那我们就把哪一个来把我们刚刚的这一个代码啊， 然后找到这个扣的，然后找到这里面，找到他了之后，然后在这个地方找到电视的。好，这个的话不就是我们的项目吗？那我们点打开点一下，这个开始上传 这东西的话，他就已经跟我们完成了，明白吗？上完成功了之后，然后这里面就有这个文件，那我们就找到这文件，这里面有一个解压，解压的话那我们就解压到这一个文件，加下解压 好，剪好了之后，大家看现在这里面是不是就有我们刚刚的这些什么这些资源信息，明白吗？好，这样做好了之后，接下来的话在这边再刷新一下。好，大家看现在管理系统就已经上线了，然后点一下登录，登录了之后，然后这边我们看一下现在 这个就做好了。好，那现在的话这个东西大家就可以干嘛呢？就可以全部啊，就说我因为我们这个没有做这种这种其他的那些对接啊，我们只做了某一个模块，那大家的话去线上去访问的话，这个东西就可以访问成功了，就在这边你像这种就相当于上线了，那到时候的话 线上的那些团队他就可以干嘛呢？就可以看到这里面的信息，然后这些东西都可以做好的，因为我们这个是线上的一个接口吗？那这里面就上线了， 上线的话就这样上线，大家只需要执行什么？执行打包，打包，打包了之后他就会把我们的代码打包成这样一个东西，打包成这样一个东西了之后就上线，明白吗？ 这个的话不能本地访问啊？大家不能这样访问啊？你不能说我这边就这样去访问，这样是不行的啊？用文件的方式打开不行，你这个的话必须要有服务器的环境，明白吗？就是你要把它放到线上服务器，像服务器的话 不是用那个宝塔，这边不是宝塔吗？这个这样用过来的啊？你搭建这样的环境，然后做好就可以了，现在项目就已经审核，就已经上线了。好，这类就是我们所说的你要把一个项目开发好了上线，就这样上线就行了啊。
23虎哥。
06:11查看AI文稿AI文稿大家好，我是你们的小蔡老师，今天这期视频的主角呢，是举生刚刚在上个月发布的全新的 lma 二代系列啊，那这一次的产品的更新呢，一共是有三台，有 lmax i 二， 下面这台 element m 二以及旗舰的 element x r 啊，一共是有这么三款。那这个视频就来跟大家聊聊，这次二代的更新相对于一代来说有什么改变，有什么提升和进步，以及他跟一代的一些区别在哪里啊？ 啊，当然这是一个境界类的视频，如果说大家对于这一类的啊，带流媒体的网络播放的睫毛耳环一体机不太了解的话呢，我之后可以再出一个视频来跟大家说一下 啊，这一类产品具体是干什么用的，他有些什么功能？那这个视频还是回归我们的主题，跟大家聊一下 lmt 二代系列的产品。那首先第一 第一点就是外观设计上面的变化啊，大家现在看到这三台机器，能够很明显的感受到他就是同一品牌的啊，拥有同一种设计语言的啊，一个系列的三款产品啊，从 i 到 m 再到 x 啊，他们的设计语言非常统一 啊，相对于之前一代的时候来说呢，他们看上去还不太的一样，现在一看就一目了然了。然后就是具体到机身上面的变化，大家可以看到前面啊，比如说这台旗舰级的 x 二，他前面呢取消了原来的呃，双三星的卡农平衡接口和一个四星平衡接口， 现在换成了一个六点三五和一个四点四接口啊。在这里那举生呢也认为这个是以后未来音频的一个趋势啊，就像现在大家非常熟悉的 hd 八百 shd 八二零啊，他也取消了原来的四征平衡 的卡通线，现在取而代之都是四点四的耳机线了，所以说啊，未来一定是四点四是更主流的一个耳机接口了。那旁边这个是啊，变化更大的一个部分了，就是一个触摸的显示屏，那这也让这台机器的交互逻辑发生了非常大的变化啊， 以前的话呢，你非得用这个啊旋钮以及旁边的这个两个按键去操控面板上的一些操作，那现在的话呢，你可以直接用手去触摸了啊，无论是关于机器的设置还是软件固件的升级也好，现在的操作呢，非常的容易上手啊，非常的简便。 那另外呢，就是机器后面的变化了，那后面的变化相对于前面来说并没有那么大啊，有几个点跟大家说一下啊，首先是原来的 x 一代，他背后有很多的 usb 接口啊， 你可以接两个 u 盘，两个硬盘，什么他这次全部啊，给你整合成了一个 typec 接口啊，这个 typec 接口呢，就是还是给你接 u 盘啊，硬盘来用的啊，但是他原来的那个 usb b 口还是保留了啊， 大家看到前面的这个与时俱进对吧？耳机口换成了四点四，但是后面的这个 usb b 型扣啊，这个是不会换的，因为现在无论是啊，你有 你你玩了几年的耳机，或者说是现在市面上你要去购买线材的话， usb 闭口还是发烧线材的唯一选择啊， 如果说你真的要去买 c 口的发烧线材的话，实际上啊，买不到你也选不到什么线材的，所以说这个 usb b 口还是保留了，那旁边还有一个变化比较大的呢，就是 hdmi aic 的加入啊，那这个接口呢，实际上是电视机的音频 回传通道，那举身加入这个接口，意图也很明显，一个是想让你有更多的这种连接的可能性啊，因为你可以把这台机器去连接到你的游戏机，甚至是客厅里面的电视机上面去。那另外一个呢，就是举身想把 啊这个 alem 的系列，尤其是这台叉二呢，去带到你的客厅的这种使用场景。那举身加入这个 hdmi aic 的功能呢，也是想让你啊，在客厅里面把这个场景也嗨嗨起来。 那还有一个区别呢，就是他在后面加入了模拟输入啊，这个也是大家最近非常非常流行又玩起来的，就是黑胶 是吧，就现在大家很多年轻人都开始玩黑胶了，那么如果说你是有一套黑胶系统的话呢啊，他这里刚好新增了一对模拟输入接口啊，在这里 aux in。 那这样子的 话呢，你也可以把这台机器去连在黑妖记的后面，据作为一台放大器来用啊，无论是耳放还是作为一台前集，再去连接你的有缘音箱都可以啊。 所以说举身的这一次，呃，产品上面，无论是从前面的屏幕上的交互逻辑的变化，还是从后面接口上面的变化呢，都是想要让这台机器服务于更多的客户，更多的场景。 那我刚才说的都是以 alemit x 二为例子啊，当然 m 二和 i r 呢啊，无论是产品的体积还是从产品的定位上来说，它还是有一些取舍的啊，比如说 aliment m 二这款呢，他就没有两组的同手输入和两组的光纤输入了，同时也没有刚才我说到的这个模拟输入。 那到了 i 二这上面呢，他就没有了这个吹个触发接口以及我前面提到的啊，客厅里面非常实用的 hdmairc 了 啊。所以说大家如果说对于一些功能上有着硬性的需求的话，一定要搞清楚自己需要买什么型号。呃，打个打个比方，比如说你只是一个桌面的用户，你想要买一台 啊，带流媒体播放的杰玛尔方一体机去连接你的真理音箱的话呢，那实际上 l m i r 就够了啊。那如果说你是一个客厅里 使用场景同时呢你还有黑胶想要作为姻缘去连接使用的，那你这时候只能买 x 二了 啊。那如果说你没有黑胶的这种使用场景，同时呢又想要音质，呃，想要尽可能的好一些的话，那你就可以选择 i 和 x 当中的这台 m 二了。
41壹视听
01:05查看AI文稿AI文稿被玩八古文的同学，一定要看看这些业务面试问题，太有用了！今年刚毕业的我想问一些业务问题，在表格里边如何实现动态渲染我的列。那你怎么传这个列呢？我想让你用原来艾力米 y 的方式去做。怎么做呀？ 想不到。这个是有分页功能的，我第一页，我选中一条，我切到第二页，然后我选中一条，我回到第一页，我还让第一页那个第一条去显示，该怎么办？现在我又给你加个需求，我要点击确定按钮，我要把所有的选中的东西全提出来，怎么办？问你最后一个问题啊， 还让你封装一个组件要求呢？我可以使用 v 杠 model 来绑定，你会怎么封装啊？那低档饮部的主键呢？我们中它的话是不是直接写标签啊？那么我想让你封的一个组件呢？直接可以用 v 杠 model 绑定一个变量。你应该用什么去做？这个？没整明白。我问你微 能不能作用在自定义组建上来？应该可以吧。所以说我问你这个东西怎么做嘞？怎么会问你微杠摩托的审讯原理是什么？这个组件应该怎么封装嘞？嗯， 想不到。是是没搞到题吗？嗯，是的。你觉得 vivo 里边我们有没有什么优化性能的方案啊？为什么我们很少用微钢瘦，全用微钢艺术？我有点不清楚了。这次我给你开不了十组了。哥们，这几个题可能你全没答上来。这个微钢猫等，按理说你应该会啊，基本功啊。
724黑马老高聊技术
09:00查看AI文稿AI文稿同学们大家好，在本套课程里，我将会带领大家使用 view element admin 这款后台前端框架完成全线模块的制作， 其中权限模块涉及的 a p i 都是真实线上的 a p i 可供同学们在课程练习的时候进行调用。所有的 rest for a p i 地址在夏目源码 a p i 目录即可查看。 那在本套课程里，我会带领大家完成以下知识的学习。首先我会带领大家完成 view element admi 这款后台前端框架的一个安装， 那安装好后，我们面临的第一项工作就是实现后台的一个登录认证，那这里我会 带领大家完成基于 g w t 啊全称是 jason web token 的登录认证逻辑。那这里呢？我们先登录输入账号额的密，密码一二一二三，点击 logi。 那登录进来后，我们面临的第二项工作就是啊，或者说在登录的时候，我们面临的第二项工作就是根据用户的角色，那我当前登录的是这个管理员角色， 根据我这样的一个角色来实现左侧菜单的一个动态展示。 那这里我们主要跟同学们讲解如何根据用户角色渲染前端路由菜单，实现前端菜单的一个 动态显示。实际上这边的这个菜单的一个配置，我们就是在这个菜单管理里面进行配置，比如说我们的权限管理，我们点开， 在这里面我们可以去配置哪些角色可以看到啊？比如说用户管理，我们点击编辑，在这里面我们就可以去看一下这个菜单啊，哪些角色可以看到他， 我们就可以进行一个下拉选择啊，这个是学员添加的，我们系统里面会有一个初始化管理员，我们目前登录的这个账号啊，就是初始化管理员， 我们也可以选择啊这个角色，那这样子的话，如果某个用户被分配了这样一个角色的话，他也能够看到用户管， 那最终我们返回给前端的就是一个角色，前端呢根据这样一个角色实现左侧菜单的一个动态渲染。 那以上这两项任务呢，属于后台必须要完成的任务，我们可以理解为是宏观层面的任务，那完成这两项任务后，接下来我们会带领大家完成我们各个页面层的制作，比如说我们的用户管理 啊，我们的用户管理，我们在这边可以进行用户的一个添加啊，编辑删除 以及我们的这个权限管理啊，我们的这个角色管理， 我们可以指定这些角色啊，都拥有哪些这个权限。那实际上这个权限的话，这边呢，我们只是用了 elements ur 这样一个多选的一个组件，在具体分配权限的时候，我们还可以做成啊， 添加角色的时候就是进行角色添加，在分配角色的时候，我们可以来到另外一个页面，因为我们随着具体的一个后台系统的一个制作的话，里面的这样一个权限肯定是非常多的，我们可以按照模块来进行一个划分， 那最终我们可以在这边再加一个按钮，是点击分配权限，然后来到另外一个界面，我们在这个界面里面进行权限的一个分配啊，如果说我们的这个权 线比较少的情况下，我们是可以直接在这个下拉菜单里面进行权限的一个分配的。 那在带领大家完成这些页面的时候，我们会讲解到接口层的分装与调用，不同的页面，我们会讲解到 element ui 组件的使用，如弹出层的使用、塑形菜单的使用，如何实现分页以及多条件搜索。 那同学们有了这些页面制作的经验，那对于你工作中遇到的其他页面，相信也能得心应手。 正所谓授人以渔不如授人以渔，那完成上述工作后，基本上我们就完成了权限模块的制作了，但是对于系统里这个不同类型的错误提示，非常有必要 区别性对待，以提高用户的体验，也就是说我们应该根据不同的错误码进行针对性提示啊。我们举个例子，比如说对于某个接口的权限，我们并没有分配， 但是该接口所在的页面啊，用户是有权查看的。比如说我们的用户管理页面，我们现在是有这个权限查看的，之所以有这个权限，是因为我们在这个菜单管理里面，我们分配了当前的这样一个角色，是可以进行 这个用户管理的一个查看啊，也就是我们的这个初始化管理员这样一个角色是可以查看这样一个页面的，但是呢在用户管理里这个页面里面我们会去调用用户列表接口啊，那这边呢，我们来看一下， 我们试着把这个角色里面的这个用户列表啊，给他这个权限啊，给他删除，然后确定这个时候我们再到用户管理这边看一下。 哎，这个时候呢，我们就根据这种权限的一个缺失，我们做一个针对性的提示，并且呢这个错误提示呢，我们要求用户可以进行一个手动关闭，因为这个提示的话，相对而言需要一定的时间去阅读， 然后呢他可能还需要进行一个截图啊，所以说呢，我们留给用户手动关闭啊，他是一个警告提示，也就是说这样一个提示，他并不是一个致命性错误，只是呢一个警告 性错误啊，说该页面或者操作啊，目前呢是一个页面，那什么叫做操作呢？操作，有可能是啊，你不具备这样的权限，但是呢你可以点相应的一个按钮，那这个按钮一点下去之后，我们的后端呢 会进行一个拦截啊，知道你不具备这样的权限，但是因为某种原因，前端啊显示了这样一个按钮，或者说显示了这样一个操作的一个通道， 或者说用户他是通过这个 postman 啊，或者其他的工具直接进行一个接口请求的，我们在接口返回的时候还是会进行这样一句话的返回啊，所以说是页面或者操作，那当前呢就是我 的一个页面涉及到权限啊， slag， 这是我们权限的一个标识， user 点 index， 那 user 点 index 呢，就是我们这个用户列表的这样一个权限，但是你未获得此权限，可能会造成页面部分功能无法使用或者操作被终止，终止请联系管理员解决。 那这样的一个情况呢？通常啊不会发生，可能是管理员在分配权限的时候啊，遗漏了，比如说我们刚才的这样一个情况，那既然给你看这个用户列用户管理，那肯定会有这个用户列表相关权限的 啊，所以说我们在角色这边把这个权限给他再加回来，我们选择一下这个用户列表， 点击确定啊，这个时候我们再看一下这个用户管理，我们就能够看到这个用户列表了。 好，这个就是我们刚才说的啊，根据不同的错误进行一个针对性的提示，这个只是其中一种错误类型提示 啊。还比如说我们用户长时间为没有这个操作后台，那用户登录已经过期，我们的错误提示呢，就会引导用户重新进行一个登录。 好，那以上呢，就是我们这套课程的一个课程介绍。感谢同学们的收看，我们下节课再见。
48老衲的飘柔
