vue3创建项目报错怎么办

hello， 各位小伙伴啊，最近呢，我要录制一个 vivo 三的视频教程了啊，有兴趣的小伙伴呢可以一起去学习一下啊。那首先这样的，之前呢，有些小伙伴会问到，我说，诶， vivo 三都这么长时间了，你怎么看是吧？是怎么看的问题啊？怎么看这个 vivo 三，一会呢我给大家去聊一聊。然后其次呢就是 vivo 三的一个使用吧啊，使用，那我后面会给大家讲 vivo 三的各种大使用。然后呢再其次呢就是公司怎么用，公司怎么用， 因为有三个产生来说，呃，有很多东西他是比较乱的，所以说呢，有的公司呢，使用方式可能都是不同的，比如说百分之八十公司这么去用，但是有百分之五的公司那么去用，百分之十的公司呢那么去用，那我这呢需要呃通过这么几个情况给大家讲一下分别不同的用法。好吧，那这随着我们课程呢慢慢就会更新下去啊。 行，那先来说怎么去看的这个问题吧，那版本的升级，首先 biu 三呢，肯定是从 biu 二升级到 biu 三，对吧？他有一个升级的过程啊，那么升级来说呢，我之前看到一个学员说过一丈话啊，就是换汤不换药，我特别赞同这句话，大家如果觉得说一个东西他升级了，改动非常非常大，大到硬境界了，那这个产品也基本 什么意思呢？就拿举个例子吧，比如说王者荣耀啊，这样游戏来说，他是一个推塔游戏对吧？不是一个人的王者，是团队荣耀对吧？推塔一个游戏好，如果有天砰一旦升级变成一个可能合格制游戏，或者变成了一个什么呃，射击的游戏等等乱七八糟游戏，那这个产品内法又和之然不一样了， 等等等等，使用的人肯定就会下降，大幅下降。所以说呢， vivo 二升到 vivo 三呢，大家不用慌啊，就是他就改这么一点东西吧，差别呢，并不特别大，也就是你会 vivo 二升到 vivo 三，很轻松的就可以过渡，只不过有些东西呢，我们人可能也会有固有思维啊， vivo 玩挺好，突然弄个 vivo 三，我觉得这不好那不好，是我们的固有思维啊，当然也确实需要我们的分辨能力 啊。然后呢，再说一下，就是 vivo 三，啪刚一出来时候，很多的小伙伴啊，都会觉得好牛化层啊，全都一猛子都去学了。好，你要注意啊，就是一定要有自己的分辨能力啊， vivo 三，咱们假设一个情况， vivo 三都出来了，然后挨了问 t u i， 他没有升到三，也说你用 view 三项目去以外 mpv 做掉，你觉得是不是有必要？你觉得你的相声有必要，完全没必要，对吧？所以说呢，这个 东西他只个升级，并不代表说他很强，对吧？他可能是未来呃，绝对会替代二的版本，这个我们不能确定啊，但是如果要有再出了 vivo， 那 vivo 基本上可能就不降，我们一定要有突破固有思维的思想，就是我们一定要有接触新鲜事物的能力，或者说接触新鲜事物的能力，或者说接触新鲜事物，我们要勇于去接受啊，但是也要分辨出来，不是说一个新东西 polo 数量就一猛去学啊，弹出来讲，这东西被炒的最多的就培训机构， 所以说呢，大家一定要有分辨能力啊，然后其次呢就是大家可能在网上也看过，比如说这个 vita 加 vivo 三，甚至还有加什么 gucci 四是吧，甚至还有加什么啊，平亚还有加什么 that， 还有加各种各样东西，乱七八糟啊，甚至还有这三大加一大堆， 这家到底是啥是吧？我分别给大家去说，这就是我告诉大家的，刚才说到他好乱啊，咱们一点聊好吧，一点聊我就当大家呢这些东西都不知道一点聊，那我六三，呃，怎么看呢？就是他目前来说吧，或者 vivo 本身吧，肯定是做后台管理系统非常适合的，做前台内容还是不适合的，然后随着这个课程大家慢慢去体验 vivo 三吧，或者体会 vivo 三的优缺点就可以了，那至于他怎么 去使用呢？这个随着课程咱慢慢去聊啊，我就一步给大家去说，包括那些东西啊，位置啊，加什么东西，对吧，慢慢的去聊好吧啊，然后公司怎么需要呢？就是后面等等都会的括号。但是呢，我这先要强调一点啊，就是，呃，我这次呢会讲的 vivo 三，主要是拿 vivo 和 vivo 三进行对比，如果一些小伙伴呢，没有学过 vivo 二啊，我建议呢就是你去学一下我的 vivor， 或者说学别人 vivor 都是可以的啊，无所谓啊， 大家要学我的 vr 呢，可以到这个学习路线展森或者小路线展森这个网站，然后这呢有课程的全能框架，然后在这有一个 vivo 基础课，大家可以学这个。好吧，那我就不在这呢不多说这个 vr 东西了，我只说这个对比，好吧，如果说你真的不会 vr， 一定要看 vr 再看这个，要不然你别看好吧，因为这里面都看不懂，你也看的费劲是吧，彼此都难受。好，那下面呢，我就呃正式的去来说微商的一些东西啊， 来写一个 bg， 我就当他家的这个 vivo ok 的 vivo 三什么都不会是吧他其实呢，我也当他不会了，我就整个都给他过一遍啊要首先呢，今天第一节课的第一个事，我们就来创建 view 三项目呗。啊，创建项创建 view 三项目创建 view 三项 上面呢有很多形式啊，很多形式，比如说我们经常一个命令就是 view， 呃， creature 这这个项目名称是吧，这么去创建，来吧，我把 view 二和 view 三都给创建出来啊，我进入到我的桌面儿，然后 see view creature 代号二就是 view 二啊，我再提一个 viv crate demo 三，那就是 vivo 三了。好，我先把 vivo 二这个版本选一下，我就把 return 和 vivo x 都安了啊，然后这样选择，看到二点叉走你。哎，我就按个二，那就二吧，就按个二，好，就按个二，然后这个玩意呢，我按个三，千万别点错了，三点叉啊走。好嘞， 好，他们先按着，然后呢，哥几个去聊着是吧，咱先喝着。好，就是。呃，我们通过这样的形式呢去创建这个项目啊，注意，这个形式是基于的构架工具。什么基于 构建工具？工具？嘿，是这个 wipe 啊，注意，这样积极构建工具是 wipe。 然后刚才呢，我给大家说过一个东西，就是 wait 加 vivo 三，看到吗？ 就不是基于外派。好，我们先来说一下，可能大家在六二章中已经做过很多项目了，那基外派这项项目呢，有一些痛点，怎么样痛点呢？大家看这个图啊，先说一个痛点啊，就是如果我们做这个项目，这个项目呢，可能有一百个组件，或者一百个点背文件 好，然后呢？某一个点没有文件呢？修改了点东西是吧？这个点东西啊，至于哪点咱就不说了啊，修改点东西，然后我帮你保存，我一保存时候呢，我去刷页面，我靠，怎么还跟原来一模一样，然后我一看这终端，我靠，你还没修完呢啊？你等半天，等上个十秒五秒都有可能。 大家发现一个问题，没有慢是吧？ wifi 好慢好慢，为什么呢？看这儿啊，是因为这样的啊，这个 wipic 呢，它有一个摁水，就是入口， 如果大家足够了解到 cat 的话，它有 encher 和 output， 是吧？入口，咱们拿入口来说，我这项目呢，可能有很多的页面啊，就是很多的这个 ruce 啊， ruce 这个路由，比如有三个吧，咱们举举个例子啊，有三个，当我去修改某一个时候，比如我改这个，我改这个和这个点没有文件，和这个没有文件，这俩页面有啥关系呢？ 我改，我和你俩啥关系呢？没关系，但是我要派克也会把他们重新的编译解析一下，然后包括他里边一带项全部再执行一遍啊，最后完事啊，我，我只说开发环境的时候啊， 这就是来拍个问题，导致你开发效率比较慢啊，就是我改一个，当组件特别多，改一个时候，其他都得编一下，超级慢。好，那么 有没有很好方式呢？ which 啊，这是这节课要说的这东西呢，大家一看图就明白啊，比如说我这也是有 n 多个这样的页面或者组件，不管啊，当我去改某一个，比如改这一个吧，哎，只是他自己生效，这几个哥们呢？不生效 啊，不就是说，呃，不根据啊，这呢进行什么加载呀，各类各样的东西啊，他不需要重新加载啊，这就大大提升效率。大家想想，我有五十个好假，五十都执行，但是我只改了某一个，那一个执行不就好了吗？所以说呢， wait 很好，那我们总结一下，呃，基于 ipad 的项目， 这项目啊，有一个问题啊，就是开发 map， 或者叫编译 map， 编译啊，编译版来解决它，该怎么去解决呢啊？使用 wait 构建构这个 wait 构建工具，使用它 使用解决，就是使用位置啊，就可以了，位置呢，要比他快，所以说呢，咱们要了解位置优势， 在开发，我只说在开发啊，在开发过程中大大提升我们的效率， 大家形容交流。好，那现在我再给大家阐述一遍啊，就是大家去创建一个 view 的项目，你可以通过战士创建，你也可以通过一会我讲 wave 方式去创建，这两东西呢，都可以完成你的项目，这个我说清楚了啊， 都可以完成一项，但是如果单纯的通过开发效率来讲的话啊，一个保存大码代码来讲的话， wait 要比 rap 速度要快，一会我带你带大家去体验。好吧，所以说呢，两个无所谓，爱用哪个用哪个，但是这个东西快，我们就用快的，舒服的，爽的，对吧？我们出出去就坐飞机，就坐高铁，就开车，我不骑。那那个什么，这，这个大轮车是吧？不，不，骑大轮车，不，不，踩平衡车，哎，就舒服， ok， 就跑车各种要开，哎，就这意思啊，就是我们要选一个跑的比较快的。好，那么 vit 项目怎么创建呢？创建 vivo 三项目，我们要基于 which 这构建工具。 命令这样的，跟它这儿就不一样了，命令这样， n p m 啊， in it， 然后这儿呢是 wait 哎， wait g s 哎，然后这是项目名称， 好，我再来一个，进入到我的桌面，然后 n p m e net， 啊，我们这儿呢，起一个名称，先写一下 wait g s 我叫它 wait demo 吧。好吧，随便儿起一个。 好，然后他让你选择你要创建什么样项目呢？那肯定 view 呗，选择 view 啊，走啊，然后是 view 的还是 view t s 的，呃，咱们先不说 t s 啊，如果小伙伴会呢，你就随便。好吧，不会呢，就 先跟着我走，选 v 五吧，走好，然后 c d 根据它的命令啊，进入到我们的目录里边，然后 n p m。 算了，我要 c n p m 安装它依赖，然后 n p m 绕 d v 启动起来啊，就可以了， 咱填不上第一位啊。行，好，我们来体验一下它的效率有多么的快啊。来，当然现在呢，还不是体验那么特别特别深刻啊。我们打开这个 logo， hose 三千， 呃，他访的时候扣后三千，大家看到了哈，来，我随便去改个东西，我打开这样的一个 app 没有吧，或者打开这个 hello 啊，都行啊，无所谓，就打开这好，我在这呢写一个一二三啊，我啪一保存，你看 是吧。四五六啪一保存，你看这速度是吧。叉叉啪一保存，你看这速度特别快，所以说呢这个东西呢只是提升我们的开发效率罢了而已啊，那就是你的一些选择了啊，到底你要用哪个倒无所谓好，但是呢大家呃 这样呢，我要给大家讲就是这个东西我不知道说了大家应该会对吧，这个就直接写代码就好了。那这个呢还有点问题啊啊基于 wait 呢还有点问题啊。首先呢 wait 呢它默认安装的如果你选择是 view 的项目啊它默认安装的这个版本呢是三的 view 三 啊默认是 vivo 三的啊。所以说我们这也记录一下如果选择 vivo 的项目默认版本是 vivo 三是 vivo 三。好，那 vivo 二能不能用呢？能一会我给大家讲啊。但是呢我们先来先来看一下这个 gv 的这个项目录啊 s r c 大家熟吗？不熟吧，熟是熟，感觉少点东西对吧。少什么呢？原来我们的那个撸件没有 store 没有。那咋办？这有啊啊，你把他的 src 整个的给他把这个位置的啊 src 给他删掉，把这 src 呢整个复制粘贴过来就可以了把这儿一复制 把这一复制把这一粘贴就可以。哎我这个粘贴的咋这么慢哎这是我电脑问题。好吧那那这样我我自己新建一下。这是我电脑问题啊各位你们肯定是不需要我这么去操作的这是我电脑问题我需要手动移一个来。那这个电脑 不听我话了已经好久已经坚持了很很久很久啊，我就一个一个笨点啊给它新鲜出来啊啊就是你要做的话呢就把你那个呃 s r c 粘删掉啊整个的复粘贴过来就可以了。好，我们就我这操作笨一点吧。 好，我把这个都拿过来。 好，这第一步还没有完呢哈，各位，呃，第二步呢？是你再打开你这个用 create 创建的 vivo 三项目的拍点 jason 啊，把 这一块，把这一块复制一下啊。哎，搁到这，搁到这个位位置，这个地方，把力量效应给按一下，好吧，来， n p m i。 然后呢，你再去启动啊，可能也会报些错，然后改一点东西就没有问题了。 好， n p m 状 b v。 走，启动起来。好，启动起来以后呢，我们看啊，它里边其实已经爆了一些错了，比如他说圈儿也不认识，对吧？咱们需要去改一下，找到这儿的一个，呃， home， 把这改成第二杠， 他们还会报一个错误啊，这个错误呢，我直接给大家去找吧，就是这个 ruth 里边这样呢，没有那个点 env 文件啊，所以说我们改天告就可以了。大家看，这不是我们熟悉的那个 vivo 的初始化的项目吗？哎，这也没有问题，好，给大家总结一下。呃，如果说我们要用 wat 即 wat 的来做项目的话啊，那我们要做的事情， 六三啊，六三使用。呃，这个应该不叫六三，应该叫 wait 加六三的方式。我们第一步， 把 print 创建六三的 src， 整个复制粘贴到 基于 wait 的项目中啊，只敢我们做第一步。第二步，把 create 创建的 六呃，把根的创建的 package jason 中的。我得给大家看看啊，这，这块， 这块，复制粘贴到这条 在项目中啊。第三步， n p m r。 呃， n p m i。 安装依赖啊。第四步， 启动修改错误就可以了。刚才我不是改了一个那个第二缸路径吗？还有一个是 rooter 里边对吧。改一个这个啊就可以了。那有些小伙伴可能还会有一些需求说，哎，我觉得挺好用的，对吧，这个东西挺好用，那我的 viewr 的项目呢， 也想用这个，我不想记 wifi 了，哎，那能不能用呢？可以啊，那可以。好，我们下面就来说一下 vr 的该怎么用。那 vr 呢，是在戴帽二对吧？好，那也是一样，前两步没什么区别啊。你要把它的 src 这块 给它放过来啊放到放到这边啊放到这边啊。那我又把 s r c 给删掉了，我这复制是有问题的啊，我再确定一下大概是不是 m 二啊 啊 ok， 好，复制我这个复制大家可别学我这种复制啊。我这我这是我电脑问题啊，你也别别到时候按照我本身你的电脑是可以的，结果按照我这样去去弄了。 这一句话不到位，我怕大家也笑话这麻烦大。是我电脑问题， ok， 然后这个里边就一个 logo 好行，完事以后呢也是把它那个拍着 jason 的，因为你是基于哎 the demo 二啊，这个啊，你看它是基于 view 的版本是二点六对吧？二点六点十一啊，所以说把这块也是要拿过去， 然后到这也是改一下再重新下载那个依赖啊，你看现在 vivo 的版本是二了对不对？不是三了再重新下载依赖。 p m i。 好，等下来以后呢， n p m 让 d v 去启动启动完事以后呢，就会报很多很多错儿了啊会报很多很多错呃，首先呢它报 d 个错呢，就是找不到这个玩意儿啊，找不到这个东西，那我们就需要把这个东西呢按一下啊， c n p m i 按一下。 好，我把这个给大家记录一下。第一步，第二步啊第二步，我们拷贝过来的是这一大堆 好，第三， 呃，第三是，对，这还有一个是复制安装依赖， 注意会报错，再安装一下这个啊，完事以后呢？哎，还没完事呢，等他完事以后我们再启动一下。啊 呀，这么慢啊， 呵呵，这还有点慢，行，他先安置吧，然后我给他去找一个插电啊，因为一会呢启动起来他还是不行的啊，还会有一个问题啊，所以说我们要用这个 wait 关闭原一会呢要用到这个玩意啊，我们去 n p m 去找一下啊，你要去下载一个这个玩意啊，然后呢在那个 wet ctrl ps 中的新配置啊，这样才可以。这还没安装完，行吧，没有安装完的话呢，我们就先按它去吧，周围要是慢啊，咱们先安装它，那我们就把这个删掉吧。第四步第五步 再 page page。 东西如下，比较简单啊，我我们直接来啊，直接来到这好，大家看啊，第一行这个地方把它拿到 我们的这款，这款就不要了啊，一会我给大家整个的 project 过来啊，这样就不要了，就看这个 好，然后呢这个底部也是一样整个换成它啊，直接都换成这样就可以了啊，这是最后我换完的。 呃，当然这一块儿的 defunt cray defunct convey 这个也算先留到这好我们再启动一下啊，可能会还是爆那个模块啊，我们需要把模块按一下 行，那再再运行一个第六步是吧，再运行好再去启动。 哎，现在就启动起来了啊，启动起来了，行，我们去看一下 logo home 三千，当然还会报一个错啊，就是你那个路径问题啊，路径问题呃， james view 是里边的 home， 这跟第二杠， 然后还有一个问题呢，是你那个，呃， rucher， 呃，这地方我们改天去杠， 小心，哎，还是有问题，看一下。嗯，没问题的。好，我再重启一下吧。 好，我们再重启一下，再看一眼啊，哎，大家看是不是现在就 ok 了，这是 vivo 二啊，大家看切换，哎，都是没有问题的啊。那这一课呢，就主要给大家说一下，呃，这个 wait 加 vivo 三，它到底是怎么回事 啊？然后大家呢，就可以后面我讲课也是会用 wait， 基于 wait 的，一个没有三项啊。然后大家呢，也可以按照你的自身情况是吧？你公司里边呀，或者说你自己想用哪个都是可以的，用 wifi 也行，只用位置也行，只是让大家清楚的 有一些地方的课是这样的，那么到底这个是啥啊？要给大家说清楚。好，那这节课呢，我们就先说这么多，然后下节课呢，咱们再具体的说。 view 三里面都强。好，那么构建创建 view 三项目我们就先说到这里。

各小班，今天我们来讲解一下今天我们的 view 组件报错的方案有哪些？ 如果你看到这个题目在你的心中没有答案的话，那么让我来给你讲解你的点赞，你的关注是我持续的动力。 我们在写项目的时候都是组建化开发，那组建化开发，我们封装那些功能，组建后面的组建库，这些组建它出现的错误，你是如何来进行监听的？下面就是这些方法来进行监听的。第一个就是我们的温度点 on ever， 这个方法可以监听页面当中的所有的结实报错，他在使用的时候，你只需要全局绑定一次即可，一般是在我们的 apv 点六哈 av 点六的我们的昂莽 t 的生命当中进行调用进行绑定，比如我们来看一下，首先来到我们的 av 点六，我在这里写那个组件图片来加载， 并且在这个图片呢加载这里个报错，我点击我们图片的时候，我在这里绑定了一个事件，看绑定了一个事件，这个事件绑定，我点击这个图片绑定事件，在这里触发这个错误，就这个变量我是没有声明的，那么我们来看一下， 并且我把这个来到我们的跟组间 a b 点 mu， 我把这个温度点 on ever 在这里进行绑定了，在我们的 a b 点没有绑定了，绑定的时候我们来看一下， 我点击的时候，这里就会出现我们这个温度点安稳，会监听到我们这个页面中的结实的错误，并且告诉我的错误他是 什么类型， number 是没有被定义的，还有告诉我的资源他在哪个位置，并且有多少行多少列，一百啊，一千六百，一十五行和我们的第七列，这是我们的类型。 number 是没有被定义的， 来看一下我们这里，我直接写在哪看，在我们的 a b 点 miu， 只需要用一次通过温度点 on ever 这里写参数啊，参数，参数在这里，我把它打印出来，这个可以看得到我们的报错。那么紧接着还有哪种方式？再来看一下 就是我们的 ever capture a 的这个方法，这个生命周期他是用来监听我们比较复杂的或者存在风险的组件，我们在使用的时候呢，进监听看，它里面是不存在错误，一般放在他的负极哈， 如果这个方法，这个生命周期也是这个方法返回 force 的话，那它里面的报错不会干个什么事情呢？不会再在我们的 window 点，我们的 onl 里面再一次报错了，比如来到我们来到我们的 a b 点六，那么比如我们这个图片呢？加载这个组件是一个高风险，存在 高风险的组件，我们在使用的时候对他进行监听，在他的副级组件在这里干什么？写上这个方法，他在监听我们的子级组件的错误。在这里有几个参数啊，参数之后写完之后，我们来看一下，这里返回 fours 呢，那么这里报错呢？我们这个温度点 ever 他就不会报错，来看下效果， 我们刷新一下，刚刚把这里点击一下，现在来看我们这里是不是报错了。 ever， 我们这个 ever capture eight 报错的 number 是没有被定义 number 哈， number 椅子在这里是没有被定义的。咱们 apv 点六这个十三行，十三行他点过去是不是在这里就拿到了，知道我们在哪，告诉我们报错地方来看一下， 并并且这个地方呢？并且这里还有个实力，哈，还有个实力，我在这里给大家打印出来来看一下，在这里看，这个是我们的错误，这是我们的实力，这是我们信 c 啊，应 for 我们这个方式干嘛？ on ever country 的，它可以减轻我们复杂的存在风险的组件，在使用的时候一般是放他的负极，他减轻我们的子级组件。如果这里返回 for 死呢？我们这个 温度点 on ever， 它就不会报错，如果你把这个 force 给它去掉呢？它就会报错，它这个报这个地方就会被执行，会报错。那么紧接着还有哪种方式呢？来再来看一下。 还有我们这个 ever handle， 这个是大家可能经常会看到我们写的 view 的项目，它会在我们的全局进行，在我们的 view 的实力上进行配置，配置我们这个全局监听错误， 就是你所有的组件报错都会汇集到这里，就是我们的 every handle， 它一般写在哪里？写到我们的闷点 t s 当中，这里实力放照的来看，我在这里写了，来到我们的闷点 t s 当中，找到我们的闷点 t s。 啊，闷点 t s。 然后这里闷点 t s 翻过来 到这里来进行配置，这样就可以干干什么事。全局的所有的人报错都可以到这里来进行汇聚，他在进行打印，如果你这个地方来到我们的 ap 点六这里返回 force 的，那他就不值，那我们的话就不能鉴定到了，不是我们把它给他隐藏掉，隐藏掉，我们再来看一下， 我们来刷新一下，刷新我们点击这里，我们的 ever handle 看包托就出来了， numbers 是没有被定义的，一样的，由我们的类型，由我们的数据，还有我们的实力，这几个参数都会打印出来。 这个方法来到我们这里闷点 ts， 在这里配置的全局的货物处理，我们所有的组件的错误都在这里进行绘制，那么紧接着还有哪种方式再来看一下，来到我们的闷点来 这里，好，就是一步错步的处理，就是我们在风中线组件里面一定会有一些一步的逻辑的处理，这个时候你写的我们这个，写的我们的衣服憨豆脑，他是监听不到的，还有我们写的另外一个，另外一个组件上面的这个组件他也是监听不到的，就是 a， 不开，不开，不哎， 就是我们的 ever capture a 的这个方法，他也是监听不到的，那么这个时候还是需要用的，用到谁呢？用到我们这个温度点，我们的 ever 这个方法，所以你看来到我们这个 组件，在这个组件里面，在我们的生命周期里面，我放那个夜部的处理，保存一下，保存一下之后，紧接着我们来看一下谁能监听到这个错误，来看一下，我们点击过来，你会发现监听到我们的错误的时候，哎，我们在这里刷新一下，刷新一下，我们不用点 点击，不用点击时候这里的错误是不出来的，是这么的温度点，我们的 on ever 这里有什么定时器，这里写了个错误，那么我们这个 e 不错误，还是要通过水位来进行监听呢？还是要通过来到我们这个地方啊，通过我们这一个温度点 on ever。 那么在我们工作中写项目的时候，我们一般怎么来进行使用？结合来进行使用，就是一些比较复杂的存在风险的这些主见。刚刚什么事情我可以先用我们这个 avert capture 来进行监听， 然后跟我们再来进行全局配置，全局配置的时候，通过我们的 averhand 和我们的温度点 on aver 这个进行给我们进行全局监听，避免有什么意外的处理，就是义部的错误，义部的处理可以用它这个全局的，他不能监听我们的义部处理啊。那么这个就是我们的 new 项目当中的什么一些组建的，就是我们的组建啊，你写的组建报错，我们有哪些方案，怎么来进行监听的？如果对大家有帮助，欢迎点赞加关注！

好了，那接下来呢，咱们就得创建 view 三的这个工程了，工程呢有两种创建的方式啊，跟大家都说一下。第一种方式呢，来，大家看我这个目录，就是 uec l i 这个吧，其实就是你特别熟悉的那个脚手架，哎，咱经常说是吧？哎，脚手架这个 view c l i 呢，它是基于什么实现的呢？是基于这个东西，你肯定很熟悉哎，用这个能创建 u e 三的这个脚手架工程，哎，你可以用。然后呢，官方又新推出来了一个东西，叫做 wait 啊，这个东西呢也能创建 voe 三的工程，而且官方推荐我们用 wait 去创建 voe 三的工程， 所以说在咱们的这个课程上，我就根本不用他去创建了，但是用他创建的步骤我给大家留下了，就如果说你闲来无事，比如说一会听完直播，你想尝试一下，老师我还用我最熟悉的 cri 能不能创建这个工程呢，也是可以的，哎，你就一 步一步就这么操作就可以了。好，所以说我就直接进入第二个了啊，直接进入第二个就是 wet， 简单的跟大家说一下什么是 wet？ 呃，最简单的描述就是它是一个构建工具， 其实在咱们前端圈啊，如果直播间有学那个家玩的同学啊，有后端的同学，我跟大家说一下啊，就是在前端圈里边 whatpack 这个东西， 他绝对是属于构建工具领域的老大哥啊，这属于大哥级别的人物知道吗？啊，就包括 react 那脚手架都是基于 webpack 去实现的。然后呢， vivoe 官方啊，他又写了一个，这个准确点说应该是刘禹锡，他又写了一个构建工具叫做 vit， 对吧？哎，它是一个新的构建工具，也就是说跟 whatpack 呢，是等价的。呃，同学说是不是 made in， 其实还真不是，你们后端的那个 made in 啊，后端的那个 made in 呢？有点像前端的 npm， 这个是吧， n p m 算是跟你的那个每文有点相对应的是吧。哎，好了，来，不多聊啊，不多扩展，也就说 we 他呀，是一个新的前端构建工具，简单说 就是他的构建速度比 whatpack 要快。官网地址呢？给大家放在这了啊，这也是由羽西团队的出品啊，大家没事的时候自己可以看一下。然后呢，他有如下优势，简单过一遍，读一遍就可以哈。来第一个 轻量快速的热存载，能够极速的启动服务，也就是说你去执行项目启动的时候 read 会更快 啊，至于说快到什么程度，一会我创建工程你感受一下啊。再有就是对 ts 还有 gs 叉还有 css 等这些东西支持开箱即用，就你不用配置什么东西，直接就可以写 ts 了啊。还有这个就是真正的按需编译， 什么叫按需编译呢？大家看一下这两幅图哈。首先呢，看这第一幅图，我不知道大家能不能看清这个图是吧，稍微放大一点啊， 放大一点来走。首先看第一幅图，就是红色框里的这个图，这个图呢就是属于哪个东西构建的流程呢？ webpack， 你看啊，它的流程是这样的，它从这个入口文件进来啊，这个 intric 叫做入口 啊，我知道啊，可能有一些后端的同学或者是前端没有接触框架的同学会觉得有点懵啊，说，老师，这入口是怎么回事？呃，你就理解为你走迷宫的时候那个入口，迷宫不是有入口和出口吗？对吧？哎，从入口进来呢，他先分析路由， 路由分析完了之后啊，每一个模块都分析，分析完了之后进行一个帮斗啊，进行一个处理，处理了之后，他再告诉你，我的 server ready 了，也就意味着你的工程启动了， 那整个这个过程，其实主要就是这个过程是很耗时的，哎，你可以感受一下，如果你用 webpack 去架构一个东西，你的路由特别多，你的模块特别多，你的左 件特别多，其实你的那个东西启动是非常非常慢的，对吧？这就是 webpack。 哎，第一个图，这是 webpack 构建的流程图，那 wet 的流程图呢？是这样的，来，大家看这个红色的 wet 的流程是这样的，就是他一上来就告诉你 server ready 就 ok 了，我的开发服务器启动了啊，项目启动了，那你看，你对比一下， whatpack 是最后这个 server 才 ready， 而 vita 是什么？一上来我的 server ready， 说，老师，他什么都没有准备，那怎么就 ready 了呢？他等你呢， 你看啥？他准备啥？哎，就简单说， whatpack 什么流程呢？我也不管你看不看，我也不管你看哪个，反正都分析，都处理，最后都帮都，然后，最后呢？哎， server ready， 那 we 的做法是什么呢？一上来就是， ok， 我已就位。然后呢，我看你想看什么？你从入口文件进来了之后，如果你看的是这个路由，如果你看的是这两个模块， ok， 我就立刻去处， 然后给你看，那你不看的呢？那你看这红色的，你没看这路由，你也没看这模块， ok 啊，那我就不处理。哎，所以说就简单来说，他变得很聪明了啊，这就是一个最浅显的认知，行吧，哎，在这呢，咱还是不长篇大论的，说过多的原理，对吧？ ok， 这就是简单的一个你对比，所以说一句话， 为他构建还是挺快的，是吧？哎，就像咱同学说的哈，我就看到这个同学说，那说像揽加载，确实有点那意思，对吧？你用的时候我再处理，处理完了我再给你看嘛， 就这意思。刚才有同学问说， g s 叉是什么啊？简单说一下， g s 叉呢，其实就是 g s 和结构混着写的一种语法啊，如果你了解过 react 的同学应该知道是吧？哎， g s 叉。好了，在这不多说，那么接下来 我们得一起干嘛？去创建一个 voe 三的工程，而且是用什么创建？用 weet 去创建好了。那怎么创建？步骤已经给大家写到这了， 说，老师，你这步骤你是怎么知道的呢？当然我也是看了官方文档，对吧，你可以点击一下，在笔记里边给大家整理好了。你看，这就是官方文档，也就是 voe 的官方文档，他告诉你要执行这个东西，去创建基于 vit 的 voe 三项目。哎，你运行这个就可以了。哎，这块呢，补充一下啊， 如果有后端的同学，首先我要说一下，你的电脑上要具备 note g s 环境， note g s 如果你不安装，你是没有 npm 这个命令的，对吧？那怎么安装呢？简单说一下，如果你的电脑上没有 note 环境，你就直接搜索 note g s 啊，直接找到中文网或者是官网都行，然后点击下载，然后你一步一步安装就可以了。安装这个啊，这是稳定版说，老师，我怎么知道我的电脑有没有 note 环境呢？简单，输入 cmd， 输入 note， 回车。如果他告诉你，哎，是哪个版本，等待着你输入代码，那就是证明你具备 note 环境。哎，如果你输入完了 note 呢？是这样的， 比如说，哎，不是内部也不是外部，命令就证明你没有弄的环境，你去安装就可以了，记得安装完了之后重启一下电脑好了， ok， 直接开始创建咱们的工程啊。那就是这段代码呗，直接拿不来啊，或者你如果不喜欢我这笔记，你从官网上拿也可以，对吧？ 好了，回来右键，然后在这呢，直接终端打开，那把这个往过一拿就可以了。好了，接下来敲回车走， 然后大家注意啊，你得在你知道的地方去执行绿色的这个命令。之前在班级讲课的时候吧，同学是这么打开 cmd 的，直接输入 cmd， 然后在这，那你看你这个目录呢，那就是这个，对吧？那你看，如果我在桌面上右键呢，哎，那我回来的就是这个，对吧？我的用户名，并且是我的桌面， ok， 接下来的这块呢，他让你输入你项目的名称，注意，原则是不能出现中文和特殊字符，最好用什么纯小写的字母加数字 加下划线去组成。那在这呢，我就起一个好听的名字叫，哈喽，下划线留意三，哎，这就是我们工程的名字了，这个名字在接下来好多天的直播我都要用。接下来你敲回车表示确定，接下来呢，他就开始问你了，就像一种定制一样啊，他问你，他说你需不需要添加 ts 啊？那你觉得呢？各位， 六一三拥抱了 ts， 然后你说，不不不，我不写啊，那肯定不行啊，所以接下来，哎，按你的键盘上的左右切换，选择 yes， 这就代表你要配置 ts 环境回车，然后接下来他问你是否添加 gs 叉的支持这里呢？我们就不需要了，哎，我直接选择 no。 回车表示确定， 这是什么意思呢？他问你，他说需不需要我帮你把路由的环境也配好呢？这会说一下，咱们不需要，你等过几天我给你讲到路由的时候啊，我会亲手的带着你去配置路由环境啊。确实，实际 开发的时候可能我们就选 yes 了，他给我配好就得了，但是如果你想仔细点学的话，不行，你得选 no， 对吧？再来，这什么意思？说是否让我帮你添加 pinner 这个状态管理呢？那当然是不添加。过两天我们讲的时候，哎，自己再添加，所以说依然选择 no。 再来， 他说是否让我帮你添加一个单元测试呢？这个我们也不需要，选择 no。 好，再来，他说是否需要一个端到端的测试呢？咱们也不需要选择 no。 哎，这会他说是否需要我帮你安装 eslint 这个语法检查呢？其实干过开发的人都知道，语法检查这东西在实际开发中 那是必须必须得用的，对吧？而且每个公司都有自己检查代码规范的这个标准，都有自己的配置文件。那在这呢，为了我们能够随便的写代码，为了我们能够自由发挥，所以在这呢，我选择的是 no， 如果要选择 yes 吧，其实就会造成什么问题呢？比如说有一天我 写了一个 alert， 你发现语法检查过不去了，说你不能写 alert 啊，然后有一天呢，我写一个 ctrl 点 log， 哎，然后你发现呢，这个语法检查说你不能打印 log， 这就很烦，我还得一个一个去关，所以说在这呢，我就选择 no 了， ok 吧，好，继续就完事了。 哎，舒老师，这工程就创建好了？是的，你觉不觉得创建的过程它比那个 v u e c l i 哎，就比这个东西，我们之前 v u e 二用的这个 v u e c l i 比这东西速度就要快，你看瞬间就 ok 了。所以接下来你要做的就是关掉它，然后放在这好了。那直接右键选择 vs 扣的打开。这会呢，说一个小事情啊，哎，浏览器我先关掉， 如果你是后端，那么你发现呢，其实你好像不太用 vsco 的，你可能用 idea， 对吧？哎，或者你用什么 eclipse？ 如果你要是后端工程师啊，并且呢，你现在在写前端的项目，我给你个建议，就是你用 vsco 的吧。啊，比 别的咱们不说，就至少对于前端来说，对这些主流成型的框架，而且是 v o e 三来说， v s 扣的其实挺好的，而且 v o e 官方还针对 v s 扣的设计了两个官方出品的插件，对吧？所以你可以看到官方对 v s 扣的这种支持， 所以说给大家建议是你用 bsco 的，当然了，这个呢，就是看个人喜好了。你说老师，我就喜欢 ybscom 是吧？之前也有同学跟我说过，老师，我为什么喜欢 ybscom 呢？因为我觉得呢，收费就有收费的道理，没毛病，这话可以，是吧，哎，所以说你选择一个你喜欢的就可以了，那在这呢，我选择 bsco 的， 打开之后呢，你会看到有很多的文件夹和文件，是吧，咱们挨个的呢，去给他说一说。首先打开这个点 vs 扣的，你会发现呢，它里边有一个 js 文件啊，给大家放大一下啊，在这里有一个 js 文件，他是干嘛的呢？打开之后你会发现他这里边其实配置着插件，就是说你的 vsco 的，如果一个插件都没有 安装的话，他会马上给你一个提示，来给大家演示一下啊，我的 vs 扣的呢，现在是已经安装上了这些插件，所以说呢，我给他卸载一下，我安装了这两个插件，哎，你发现都是带有官方认证标记的，这两个插件都是 vivoe 团队出品 啊，留意官方出的。来，我把这两个插件呢给它卸载掉，这个呢也给它卸载掉。好了，接下来我关掉 vs 扣的，我重新打开这个工程，然后呢，你就会发现呢，在这个右下角啊，他可能就会有一个提示，说希望你安装一下官方的插件，说，老师，你这也没有啊，你随便打开一个文件来，你看 是吧，有这个提示了，说是否要为此工程安装 voe 的扩展呢，你点击安装就可以了。好了，这个安装，哎，然后你发现这个自动也安装完了，所以说你看这个文件夹，他就是干这事的，所以说你要给他删掉吧，到时候也行。哎，所以说留着吧，还是啊，完事，然后再说这个 pop lake， 这个呢，其实就是脚手架的跟目录，这个里面呢，就放了一个就是夜签图标。这个东西是干嘛的呢？就简单说啊，各位，平时我们都用百度啊，我们也用京东是吧，我们也用这个今日头条这些网站，那你没发现每一个网站都有自己的这个东西吗？ 是吧？这个啊，这两个蓝色箭头所指的这是什么呢？这叫夜签图标哎，也就是说 pabak 里边的这个就是那个夜签图标。完事啊，收起来，咱们在这呢，先不聊过多啊，什么？这个服务器的跟路径有几种形形式哈，有几种情况咱们不聊这些是吧？好，完事再说。 src 这个里边啊，我说一下， 这个里面可是你的工作成果啊，你前端工程师所有的这个工作成果都是在这 src 里呢，你写的什么点 gs 呀？你写的什么点 css 呀？你写的什么点 view 啊？都在这个文件里呢，是吧？这是原代码文件。好，这个不说了，你前 前端后端的同学应该都明白，这是 get 的忽略文件啊。这个呢，有必要跟大家聊一下啊，我发现呢，有一些同学啊，他删这文件，各位，这文件你不能删啊，你删了他废了，他是干嘛的呢？你打开，你说老师他什么也没干，他里边就引入了这么一个东西，而且还飘红。说一下飘红的原因是啥，是因为来，你注意观察。 我问大家伙啊，你说这里面有这文件夹吗？有这个吗？没有，没有 model， models， 那就意味着啥？就意味着他没有依赖。哎，所以说飘红的时候啊，你别慌，你直接执行一下这命令就可以了。 n p m i。 这什么意思？就是安装所有的依赖啊，给后端的同学聊两句，其实你这个命令就相当于什么呢？你根据你没稳的那个清单，你把所有的架包都安上了，就有点那种感觉，对吧？哎，好了，安装完了之后呢，你最好关掉一下 vscod， 然后重新再打开一下啊，这时候你发现 你再去看这文件的时候，好了，他就不报错了，而且你发现一个文件夹他也有了，叫什么呢？ node？ modus？ ok， 完事好了，那这文件是干嘛的呢？直接说 ts 啊，这个东西他不认识这些文件，你比如说你引入了一个点 jpg， ts 不认识， 你引入了一个点 tst， ts 也不认识，所以说这个文件的作用就是让 ts 去认识这些文件。苏老师，我还是没太听懂，那我简单给你写一段代码来，你把这个代码呢给他删掉，没了是吧？删掉了这个东西，你看后果是什么？ src 里边我新建一个 a 点 ts， 我再来右键新建一个 b 点 tst， 这个时候你看好啊，各位啊，别的你先不用管啊，别的先不用管，你就观察 src 里边我是不是新建了两个文件来，注意看，这是 src 吧里边我是不是新建了一个 a 点 ts 和 b 点 tst 啊？好，那你看好，我在这个 a 点 ts 里边，我要引入这个 b 点 tst。 哎， b from 哪呢？当前 目录下的，找到这个 b 点 tst， 那这时候呢，你就会发现，哎，怎么呢？他不认识是吧？哎，说，老师，是不是你没用啊？那我用一下 conslog， 我打印一下这个 b， 那你发现他依然飘红，就是 ts， 他不认识这个点 tst， 那怎么让他认识呢？哎，回到这，你把这个给他加上，这时候回来，你看立刻他就好了。哎，那所以说呢， viv 官方把所有你可能要写的文件都给你做好声明了，你就比如说这个里边，你按住 ctrl 键，你一点， 同学，你看一下，什么点 c， s， s 呀，点 modu， 点 sauce 呀，还有你往下找什么点 saus， 点 c s， s， 还有什么呢？点 stylus， 都给你写好了，就是前端常用的这些文件他都配置在这了，你看包括各种图片，包括各种视频图标，是吧？都有。好了，这块聊到这就完事，那我不能随便去动这东西，所以说这 a 和 b 呢？我还是给他删掉好了， src 又回到了他原本的样子，完事。所以说这个文件是干嘛的？跟大家说完了， src 里边的东西，你别着急，一会我再带着你看，然后再说这个，这个是什么呢？这个是入口文件。哎，这块你一定要注意各位， wheat 和 whatpack 有区别了，对于这个工程来说，入口文件就根本不是什么命点 gs， 也不是什么命点 ts， 那入口文件是啥？入口文件是 index， 点 a t， m， l 就是他，哎，打开这就是一个 atm 文件，比如说呢，我们验证一下，我把它原来的这些东西都注掉好了，那接下来呢？我写一个我自己的一个简单的结构，我写一 he， 我写一个你，好啊， 好，这个时候呢，我启动项目，注意，各位，我现在要启动项目，那我告诉大家伙，你 src 里的东西你一个都没用，你只是把这个文件呈现到了你的浏览器页面上，我们来试一下，好考，大家一个问题啊，你拿到手一个前端项目，你怎么去启动他呀？拿到手一个前端项目，你怎么去启动他？ 你得看哪，当然是 pick 这点 jason， 对吧？哎，找一下这个短命令，短命令在哪？应该在这呢，叫 d e v， 哎，所以说你想运行的话，你要执行 n p m， 然后呢？ run d e v， 回车稍等 看，速度很快吧各位？ ok， 完事直接可以了，打开走，这时候你看项目就出来了，你看就是三个字，你好啊，对吧？哎，数老师，为啥这么简单？因为你把他原有的东西删掉了，那如果我不写我自己的这个，我把这个给他解开呢？ 哎，那这个时候你看啊，来，停掉你的脚手架，重新启动，稍等打开，这时候你就会发现来， 是吧人这些东西就都有了，对吧？说，老师，那他这个怎么这么多东西呢？哎，你仔细看来，别的咱不关注啊，就关注这个，你看一下他干嘛呢？哎，他在引入这个命点 ts， 哎，命点 ts 在哪里？看好 在哪里？在 src 里，所以说你打开 src， 你找到命点 ts， 你瞧他是不是在这呢？命点 ts 支撑着整个应用就跑起来了，对吧？但是现在咱先不分析 src 里边的东西， ok， 所以说各位把哪个分析完了，把 index 点 atm l 这个就分析完了。好了，这两个不说了， 熟悉前端项目的人都知道这什么，这是包的管理的这个文件，对吧？或者叫做依赖声明文件 redmi， 这也不说了，是吧？就是一个简单对工程的介绍，这东西其实我们不需要，直接给他删掉就可以了。好，然后这三个 简单说也是 ts 的配置文件啊，你留着它别动它就可以了啊。说老师我删掉不行，删掉之后你的 ts 可能会出问题。好，再说这个，这个是整个工程的配置文件，这个东西今天我们不用，但是过几天我们就会用了。这个里面都能干嘛呢？都能去安装插件啊，也能去干嘛呢？就比如说配置， 一些代理都能在这，过几天的直播，我们就会用到这个文件了。 ok 啊，在这今天你其实你点不点开它都无所谓了，好了，关掉啊，那怎么停掉脚手架呢？ ctrl c 就停掉了，好，完事。那这就是对整个这个工程的呢一个简单的分析。 注意，我还没有去分析这个 src 啊，还没有说这个。好了，这一小节停。

view 环境搭建的第一步，安装 note view 依赖于 note gs， 所以要先安装那个 note gs 环境，下载地址就是 note gsdlrg 安装包下载后直接双击，然后就进行了安装，安装之后呢，然后就有可以输入 no 的命令， no 的杠 v， 然后可以查看 no 的版本信息。第二步，安装 npm 镜像， 因为默认恩田默认的镜像是国外的，使用起来速度比较慢，所以我们这里使用淘宝的。第三步，安装全局无异议，肯定缴手价。 呃，命令就用刚才的用。第四步，创建新项目，这个命令是 wild park， 然后是项目名。第五步， 安装项目依赖，刚才只是初始画了这个项目所需要的文件，然后现现在使用这个命令呢，将会下载相关的依赖包，用 npm install。 第六步，也是最后一步，然后出入 npm 状，第一杯就可以看到控制台打出来 acp locals， 默认端口是八零八零，然后进入浏览器可以看到这个效果。

为什么用 opm 安装依赖又报错了？相信很多人在使用 opm 进行依赖安装的时候，也遇到过和我同样的各种报错问题，大部分报错的话是由于 notegs 版本所导致的。事情是这样的，前几天我想把自己写的一个前端项目在一个新的环境里面运行起来，结果我使用 opm 进行安装的时候，发现报了一堆错误， 大致的意思说我们这个当前这个版本需要升级一下，因为我之前的这个项目是用 vita 创建的， vita 创建的话它是需要我们这个就是 note g s， 就是升级到我们这个十七，结果我就查看一下，这就是当时报的错误，我查看一下我当前的这个 note g s 版本的话是十四， 我就升级到十七，但是说我旧的项目的话还是需要依赖于十四，所以说需要两个版本之间来切换的，这时候的话就需要用到。我今天给大家介绍这款 note gs 版本管理工具 nvm， 大家可以看到这就是这款工具啊，我们安装的话非常简单，我们只需要下载下来之后，然后下一 下一步就可以安装成功，安装成功之后我们用起这个命令就可以看到，大家可以看到这个图上所有的就是当前可安装的一个版本，我们只需要就是用这个命令的话，就是可以就是选择你要安装的一个版本，就我这边有写啊，就是我们安装某某版本就可以了， 安装好之后我们就 nvm list 就可以看到我们当前就是说安装到哪些版本，如果说前面有新号，表示说你当前选中的就是我们这十四点零点零，如果你想使用十六点一、八点一这个版本的话，你只需要输入这个命令，大家可以看到这个命令指定他一个版本就可以了。 好，指定好版本之后，我这个项目的话就成功运行起来了。我们再给大家介绍第二款版本管理工具啊，就是 notegs 版本管理工具，就是这个 n， 大家可以看到他是用我们这个 npm install 进行安装，他就可以安装到我们这个全局，这时候我们就可以用 n 这个命令来使用的 n list 的话就可以看到我们当前就是已下载的所有 版本。还有我给大家演示一下啊，因为这个的话我已经安装了，所以说我们只需要用 n， 然后的话比如说 list 就可以看到我当前安装了哪些，就是 note g s 的一个版本。

接下来讲什么问题呢？什么是主教化开发和模块化开发？他是两个概念，两个概念啊，哎，因为这个咱得分开啊。啊？先说这个主教化开发啊，主教化开发，比如说我现在写一个这个 应用，比如说这个系统里面是一个这个页面，然后呢？他有什么呢？有一个海底有个头部，有他头部，然后他还有一个侧边栏，侧边栏是一个菜单啊，菜单呢？咱就叫啊，一个耐还得有一个主体内容，对吧？这主体内容呢就叫 啃趁他那一个应用系统，基本上好多应用性都是这样的，大家大家可能看你们什么学校的一个选课系统啊，或者说那个办公司的欧威系统啊等等，基本都是这个时候啊，上面那个嗨点里面可能会有一些啊，比如说一个登录啊，一个一个用户的一个头像，然后这里有注销菜单， 个人信息等等等等，然后这个菜单呢显那个什么呃基础数据啊，什么各种业务啊等等等等，然后你点击这些菜单的时候，呃，主要的内容会不断的更新，对吧？基本上系统他都是这个思路，是吧？啊？所以说 咱们就用这个思路来给大家讲一下。呃，什么是组件化开发？组件化开发，大家想一下，我现在这个这个这个程序的话有几个组件啊？按刚才人的思路是不是有三个呀？一个是 happy， 一个是 nice， 一个是啃衬他，对吧？好，那咱现在就创建三个组件。那我组件写在哪啊？ vivo 的 v you 的程序，大家记得组件我写到康普嫩词，康普嫩词就是组件的意思， 咱写的程序呢，都放到这个康普顿词里啊，那我现在去建三个组件，第一个组件呢就叫嗨点点 beaut， 但是这里有一个问题，就是说组件的名不要和标签的名一样，一样的 话就会包错，所以说这个东西我就不能叫海胆点比我了啊，咱可以换一个，比如说咱叫麦嗨点点比我，对吧？我加我所有的主页，加一个麦，加一个麦就好了。麦嗨点，那他麦嗨点有什么呢？咱就简单写，就写一个这个 logo， 有个 logo， 然后 下面还有一个这个 a 圈啊，用户信息啊，海底里面就就这两个，写一个 spa 吧，写两个 spa 吧， spa 省的换行的吧。啊？ logo 和这个 spa 用户信息 好，然后嗨的有了之后，我再建一个组件。刚才咱们说这个图啊，咱是不是要建三个组件，还有一对耐磨和 ctrl， 对吧？那创建耐，那这个是菜单的话呢，咱参不累他，咱就写一个有点菜单样，是吧？啊？比如说咱，咱比较喜欢起一个 水果立表这个菜单，那就香蕉、苹果、鸭梨。如果说大家真正做系统的时候，这个菜单可能是一些什么跳转的一些页面啊，比如说技术数据啊，或者说权限管理啊，用户管理啊，这这类的啊。然后还有一个内容，内容就是 maccnt 点 biu， 那这里写一个 h 一，就写一个 helloword， 再写一个别的也行， 写一下吧，这个是应用的。呃，主体部分好，那组件都写完了啊，其实大家以后开发组件化开发也是啊，就是你把这个结构想好了之后，然后你会新建一堆组件啊，然后每个组件的功能都写完，然后把这个组件啪一拼，拼接成一个系统就 ok 了。 好，那然后咱接着写啊，那刚才咱是不是根组件是这个 vivo 啊？那我是不是说直组件都要放到根组件里啊？那这个写的话，咱就写一个，用这个根组件 去搭一个框架。搭个什么框架呢？就是咱刚才写这个嗨的左侧菜单， nice， 中间啃衬他搭一个这个框架，那咱就写一个 div， 那这个呢？克拉斯等于 开点，第二个呢？咱就叫 canting， 这个是一个容器啊，就是说 catty 是什么呢？是这个第二层这个容器，这叫 ctrlant， 这里面有两个， 一个叫内务，还有一个呢，叫啃蹭蹭。好，那这个结构有了，结构有了，然后咱们现在把这个整体的页面功能给他实现了啊，分区给他分。好，那咱就需要在样式里写了，对吧？样式里的话，那就是点嗨歌，咱们给他加一个高度啊，比如说这个高度是八十 像素，然后给个边框啊， epx， sorry 的 red， 随便给个颜色啊。好，他洗完之后，咱看一下现在的 程序啊，来看是不是有一个红色的边框呢？看到了吧，但是这红色边框他他他是一个，上面一个距离，对吧？这个距离是默认的一个刚才的样式啊，在这啊，音带个字 css 啊，这是创建项目，头是自带的，咱把它干掉，不要他了，保存啊，干掉之后，然后看一下现在的英雄程序，哎，回来了，到顶了，这是头部，对吧？头部有了之后，那左侧菜单呢？第二层呢？是点天津，点天津点我设一个 flax 布局， supreme， flax 让他横向排列嘛，咱就不用浮动了，对吧？然后这个 ctrl 那里面呢？看他这 ctrl 那里面，左面有个奈务，右面有个跟衬他， 咱就写写一下他俩的样式啊，那就是点看清点，然后点左边的 nice， 他是 flax， 咱给个一，然后包对 epx 手里的给一个蓝色啊，然后下面这个长青柠里面的这个跟衬的内容，咱给他 flax， 给一个五啊，让他宽一点，然后这个包点一 px sorry 的给一个呃， carry 吧。绿色咱给这个 nice， 给一个八百像素。但如果真做系统的时候，你这个高度你得适应屏幕啊，或者是按照甲方的要求来做啊，咱不能随便给这个尺寸，对吧？那好，那看一下结构 是有了，对吧？上面红色的嗨点左侧的奈姆，右侧的一个呃，这个，这个啃衬他，对吧？然后咱说主间化开发是不是就把主间拼到一起啊？啊？好，那咱现在就需要把主间都引到根主间里面把直主间都引到根主间里面，那我们这里就需要 新铺的先引这个 mary happy tom 哪呢？这个斜杠蹭蹭康城康普能吃 啊？斜杠他这里有一个麦嗨点，这咱刚才创建的，对吧？点不有，我粘贴一下。然后第二个呢？叫什么？第二叫麦耐，第三个呢？叫麦 肯称啊。需要先注册主件，对吧？注册主件，那我已经注册一个 hellowor 的，但是这个 helloword 咱不注册也行，对吧？咱也用不上他了啊。然后咱需要注册这个买嗨的，然后，然后注册这个 man， 然后注册这个 maccnt， 然后我现在需要把这三个组件把它放到上面的这个内容里面，对吧？啊？那咱刚说嗨点嗨点里面我放的就是嗨点这个组件 内容了，然后下面呢是这个是 nice， 对吧？菜单对吧？水果鸭梨水果列表对吧？啊？那 man， 然后下面的这个是 ctrl， 那就是 m a ctrl， 这个是 m， 对吧？哈哈，好，那咱给他改过来啊。呃，引入的这个康不能是，这个是写成 n 了， mm 好保存，然后再看一下效果刷新 好了，那这样的话，咱就三个组件就把它拼到这个应用里了，对吧？那首先是 logo 信息，用户信息在海底里，然后左边是一个菜单，右边一个主题内容， 那这个其实就是组件化的开发，组件化的开发呢，咱就可以通过这种创建组件的方式，咱建三个组件，对吧？然后把这些组件呢，最后拼到一起，拼成一个应用啊，这就是组件化开发的一个基本概念。当然如果说咱真正开营 开发应用的时候，会有一些问题，比如说某些组件呢，会有一些船只啊，会设置陆游啊等等等等这些获取数据啊，这些东西。但是好处是什么呢？就是如果出现问题了，比如说现在，你说说，哎，中间内容 helloword 出现问题了，那咱们直接就定位啊，我直接改这个麦啃衬他就可以了。 这这就两行代码啊，比如 hellowor 的，我给他改了，改成 hello vivo 了，就这两行代码保存，然后整个系统再看，哎， hello vivo 就变了，这样的话咱就成功的把功能给他拆分开了 啊，那哪些组件有问题就改哪，而不是说像以前的话，咱可能套模板呢，写了一堆贴毛啊，这个页面写了三百行一贴毛，或者说两千行一贴毛，然后还有一堆 gs， 需要去一个一个找问题，那个太难受了。但如果说组件化的开发的话，你可以把整个应用拆分成很小的组件，那 出问题就写哪，哪出问题就改哪，这样的话就开发效率就高了，这就是组件化开发的概概念，刚才咱讲的呢？是组件化开发，那什么是 模块化开发了？刚才咱是不是说两个问题啊，对吧？一个是组件化开发，一个是模块化开发啊。什么是模块化开发呢？模块化要咱举个简单的例子啊，就比如说如果我想实现一个功能啊，这个功能 他可能不需要去创建主页，比如说我现在这个功能是啥呢？我就想计算两个数的加和，那这个不需要页面，对吧？他是一个功能，那这个功能的话我怎么写啊？我可以在这，比如 s 二 c， 咱所有的声音都写到 s 二 c 里。 sst 里面，我新建一个梦露啊，这个随便起名啊，随便随便起名，比如说我就叫 utuse， 就一个工具，一个工具的一个梦露，那这里呢？我就 可以创建很多个。呃，工具工具的话，我们可以创建成一个 gs 文件，比如说叫 sum 点 js， 然后这个 sum 的 gs 是一个函数，翻个身，然后 sum 函数 等于什么呢？等于这个里衬十加上十加上二十啊，然后我现在写的是一个功能模块，对吧？叫 sum bs 啊，我需要把这个功能模块给他暴露出去。 暴露属于怎么暴露呢？呃， e s 六的模块化语法啊，就是 expoxd fox 啊，暴露这个 sum。 那这样的话，我在 康不能自理的啃蹭的啃蹭的，大家看啊，这是不是？呃，这是一个组件，对吧？主体部分啊，在这了，主体这部分啊，这个组件我希望在这啊。 h 一输出一个结果。 输出一个什么结果呢？输出刚才咱们模块计算的结果。好，那这个咱就写了 surprax boxd box， 那咱就需要自己写一个模块啊，那咱咱自己写这个模块的话，咱先咱咱现在自己写这个模块，我现在需要，需要实现什么功能呢？需要让这个 h 一里面显示啊， 显示刚才咱们模块计算出来这个结果，结果就三十，对吧？显示这个三十啊，那这个怎么写啊？我需要引入那个模块音 pose， 引入这个 sum flom 从哪引入呢？从这个 utus 啊，然后它里面有一个 sum 点 ts。 好，那拿到这个模块之后啊，然后呢？我现在写一个计算属性， ctrl d 的，那计算属性我可以写一个单本，直接在这就可以绑单本了，对吧？但是计算属性他是一个函数，是吧？我需要通 我计算得到这个值啊，那这个值怎么得到呢？ reaty 谁呢？ retexum 雕用括号。那我其实就是调用了这个模块，得到了这个模块计算的结果，然后把它放到单模上，然后我们看一下效果来，三十出来了，这个就是模块化化的一些方式啊， 就是说我可以单独定一个功能模块，这个功能模块可能是，呃，一步请求数据啊，可能是完成某些功能啊，可能是做了某些事啊，咱不管这个事是什么，咱只要知道这个模块做了一些事， 他跟这个呃页面可能是没关系的，他就是做了一件事，然后我们的组件呢，就可以去调用这个模块，然后引入这个模块去做一些事啊，去完成这个工作，这就是模块化开发的概念。而且模块化的话他会用到这个 enpout 和 expot， 这是 es 二零一五提供的 模块化的语法啊，所以说我们通过这种模块化的方式就可以把程序拆分成不同的。呃，功能啊，有的时候大家为什么混呢？就是说， 哎，你这个主件化开发也是拆分，模块化开发也是拆分，那他有什么区别呢？啊？这个简单介绍一下，就是说主间化，他其实说的拆分还是页面层面的拆分啊？就比如说这整体的页面我拆成了三个主件啊，那组件化开发其实就是拆页面，那模块化开发呢？是拆功能啊， 拆功能我可能一个主件我可能有多个模块，而一个模块呢，我也可能用到了多个主件之上，所以说这是他们之间的关系，这就是主件化开发和模块化开发，模块化开发的一个基本概念了。

哈喽大家好，前天呢有小伙伴问我在 v v 项目中如何解决跨越问题，那么咱们这次呢，主要针对使用 v v c r i 搭建的 v v 项目去解决我们的跨越问题，其他的呢，咱们以后再说。那么我们先来了解一下什么叫跨越，为什么会出现跨越？ 咱们看一下文档。首先为什么会出现跨越呢？主要因为浏览器的同样策略， 他阻止两个不同玉之间进行这个相互的访问。那什么叫不同的玉呢？就是协议，域名断口号 都不同的 ul， 我们称为这个不同的玉，那就叫跨玉。然后我这举了一些例子，大家可以参考一下。那么我们的微玉项目中如何去解决，其实主要就是使用这个微玉点肯定的 gs 这个配置啊，但是这个配置呢，我们是有一定的环境要求的啊， no 的十四，其实版本并不是非得是十四，十其实也行，然后 v v c r i 四点五点十五，我这个是四点五点十五，然后三点零以上即可啊， v e 是二点差，并不是三。 然后还有一个问题呢，就是如果你的项目不是用 vvcra 搭建的，就不能使用这个配置， 如果你是用 wipec 环境搭建的，那么其实也可以参考这个配置，但是就是不一定在这个文件中去写，需要在 ypex 的配置文件中去找这个 wipecade 的 dv c vs 配置项，然后去配置里面的 proxy。 接下来我们就在真正的项目中去使用微微一点，可微点 gs 去解决这个跨越问题。我已经搭建好了一个基础的项目，写了一个基础的内容，一个图片 和一个按钮，点击按钮就发请求，这个请求无论是跨越的，我们先看一下页面一个按钮，然后点按钮会发请求，然后我们请求已经写好了，就是这个请求，就是一个 位于中心社区开源的一个 api， 但是这个 api 呢，需要跨越请求的，我们先来测试一下，默认能不能请求成功， 我们刷新一下，然后点击跨越。哎，这样呢，就提出来我们这个啊，用八零八零向这个地方发请求的就失败了啊，直接访问我们是能看到的， 对吧？那我们接下来就使用微微一点 cpi 点 gs 去解决这个跨越问题。首先在项目根部新建一个微一点 cpic 点 gs， 其实在官方稳当也有说啊，在这个配置参考里面我们找到这个 dv server， 然后 dv server 点 proxy， 这里面也会提到啊，我们可以使用 proxy 去设置一些代理，解决我们的跨域问题。 首先在这使用这个 modeludin exports 导出一个对象，对象里面呢，修改这个 dvsro 配置， 修改 dvco 配置里面的 proxy 配置代理，利用代理我们就可以实现我们的跨越。然后这个代理里面我们要进行些配置啊，我就快速去写一下 啊，写好了之后我们来看一下啊， proxy 里面写了一个属性啊，就是杠 api， 这个属性干什么用的呢？路径开头如果是 杠一 pi 的，他就会拦截，拦截之后呢，就会把我们的跨域的域名修改成你的目标域名啊， ws 是这个外部骚 key 的，我们这个不需要就不用管，然后 change origin， 就是是否开就快于我们肯定要开启的写成数啊？ pass the red 是路径重写，把这个斜杠 a 一拍，重写成什么呢？呃，空啊，为什么要重写呢？一会我们就给大家说啊，首先呢，我们请觉得网址是这个网址，我们把它复制一下， 粘到我们的，他给的这来，这呢只需要填域名，我们其实可以直接这样去写， 但是我们的 api 往往是这样的，所以说我们可以加上写上 api， 写路径也可以，不写路径也可以没有强制性的要求。 不写和写呢，是有两种做法，如果你写了的话，这就得替换，如果你不写的话，这就不需要替换啊，一会我们去说一下，写了之后呢，这个配置就做好了， 然后我们发请求就不能以这种方式去发了，我们的发请求方式呢，必须是以 api 开头的 啊，然后后边添上我们请进路径，然后这个代理见到写个 api 这个请求之后，他就干什么会被你这个请求就会被拦截，拦截的时候呢，他就把你的这个域名替换成了这个，就是把这一粘 替换成了这个。替换过程中呢，你需要什么呢？多了个 api 吗？啊？你需要把这个 api 其实就是后边这个路径的 api， 这个啊选成空，就是这把这个路径重写，就是把你这提供的这个路径给你重写了，把 api 替换成空，然后再加上他的这个我们的这个目标域名就可以了，我们撤回 我们请求，就这样去写了，写完了之后呢，我们要重启我们的项目，项目重启好了之后，我们打开浏览器再去发一次请求， 嗯，刷新一下页面再点请求，哎，这样请求就已成功了，数据我们已经拿到了啊，快也没有了， 对吧？那么假如我们不写 api， 就直接写于名，不写斜杠 api 路径了，那么 在这边我们还是以这种方式去发请求，因为他会拦截 api 的嘛，就是他会拦截 api 开头路径，开头的这个请求拦截了之后呢，把这个域名地址切换成这个， 那么这一次呢，我们就不需要重写路径了，因为路径中是需要带写杠 api 的，那我们修改了配置，需要再次重启，重启完之后呢，我们再次回到页面中去发请求，试一下， 哎，这样也能成功，一定要注意重写路径，不是重写这个，这是目标域名，重写路径是重写你这个， 把这个 api 替换成空，如果此时你再替换，那么请您的地址就会 发生改变，就不能用了啊。 ok， 这就是我们使用微一点，肯配点 gs 去解决跨越问题。 在这呢，我们还可以添加很多项代理啊，多个代理也可以去使用。 ok， 小伙伴们赶紧去试一试吧。

大家看这样一个问题啊，你在使用以来创还有 fm max 在写这个应用的时候，你肯定也会遇到这个问题，我先把这问题让你看一下，现在呢我正常压缩啊，我点击压缩没有任何问题，他正在压缩，看到了吧？我先不压了，先停掉。 呃，我现在呢是使用开发模式，你看到我这个第八个状态了，在我开发的时候呢，没有任何问题，一切良好。那现在呢？我把这个给关掉，然后呢我回到这里边，在命令行里边，我把它编译成我们的应用，我先把我之前编的先删掉， 然后呢我给他编一下，如果你使用的是 windows 的话呢，你就使用 windows 的命令就行了。好，那现在就开始让他跑，然后呢我们打开那个编译之后的文件夹， 然后呢我们来运行一下咱们这个应用。好，那现在呢，我们来开始压缩。 好，你看这是我压缩的时候呢，他就压缩不成功了，看到了吗？进度条就不动了，不成功。所以这时候我们要分析啊，其实这个以来创他比较的容易啊， 我们有主进程，有序远进程，然后使用的第三方都一些库，很多库啊，其中这个 ui 库啊，包括这个 vivo 三呢，我们都正常运行的，否则我们也看不到这个界面啊。那现在唯一不 ok 的呢，就是我压缩不成功，就是调用这个 ff mag， 它不行， 所以呢这时候怎么办呢？我们回到我们的代码当中。好，那这次 f f max 代码，我们需要这个 f f max 这个命令来进行压缩，所以呢这块有个路径，我们可以先把这路径打印一下。打印怎么打印呢？我们可以使用以来创的 大家 log 来打印，随便找一个，比如说显示错误消息吧，这块就随便写一下。然后呢我把这路径打印一下，这个是咱编辑之后，我先把它关掉，他已经运行不不成功了吗？就没没必要展示他了。然后呢我们还是调取这个开发模式，然后呢观察我们这个任务栏。 好，然后呢这个弹出窗口之后呢，我们把这个路径给复制一下，你可以看一下，这是我们在开发的时候他的路径，那编译之后这路径是不一样的，我们可以新建一个文件，把这个路径呢先放到这里， 把这路径先放在这块啊，然后呢我们这段代码不动，咱们呢？呃，现在再编译一下，看看最终编译之后这个 ff mag 的路径是什么。所以这个时候呢，我再把这编译跑一下。好，现在我们已经编 编译完了啊，那么现在呢，我把这个软件打开，他会弹出一个路径，我把它复制一下。呃，这个路径是谁呢？是我们编译之后的啊，跟咱们刚才开发的不一样。然后呢我再把它放到刚才咱们新建的文件里边啊，其实上面的路径好像没什么用啊。 呃，那你看这个肯定是这个路径不对，也就说找到这我们必须得让他正确找到这个命令，他实际上肯定这个路径不对。那我们怎么怎么找到最 真实的路径呢？我们点击右键显示包内容，然后呢往里边点，双击，再往里边点，在这里边这里边 这里边点，然后找到 note models， 然后这呢我们的命令在这一块看到了吗？在这一块这时 是我们这个命令的路径啊，在这块，所以呢我们这么对比一下。呃，咱们看一下。呃，从这从哪开始看？应该是从 前面不要了，从这个 content 啊， content 没问题，是吧？然后后面到这块没问题。 然后到这块看到了吗？这块就不一样了，我们实际的文件夹目录在这一块，但是我们这个路径呢？是这个，这是不一样的啊。然后接着再往后看，是不一样后看是 note 猫就是没问题，然后这块也没问题，这块 这块也没问题。那最后的就是我们命令所以问题只差这一个位置，差这一块，那我们把它替换一下就行了。我把这目录复制一下，然后回到我们代码里边，咱们要把 这个给替换成他，我们回到 fm mag， 然后在这块我们替换一下搜索他，是吧？替换成他， ok， 那同样下面这个路径也是一样，替换一下。好，那这时候呢，我们这个 dial 对话框就不要了，给他清掉吧。呃，然后呢我们再来编一下，我还是先把那老的先删掉， 然后再编一下就打包完成了。咱们呢再进入到这个打包目录，然后呢再把咱们的软件运行一下。 好，现在启动了。然后呢我再添加一个视频吧，这是昨天晚上八点直播讲的代码，然后呢我执行转转码。好，现在我们看 我们这个，呃，程序已经正常运行了。呃，大家点个关注啊，我会经常分享一些有关于编程的视频，希望大家能够喜欢，再见。

哈喽，各位观众大家好，今天我们来学习一下第十六章动态组件，那其实就是让多个组件呢使用同一个挂载点，并且呢可以做到这个动态切换这个东西的话就是一个动态组件，那挂载点的话不会使用这个微微自在的这个内置组件，就这个 ct 他身上呢有个一字属性，去通过这个属性的去给他做这个动态切换。 ok， 然后我们在上一张呢是给大家留下来一个问题，就是这个问号点这个可选练操作方没有给大家做这个介绍，那我们来演示一下这个东西啊，那么就在这打开一个控制台吧。 ok， 然后我们声明一个空对象啊这样子，然后比如说我们去读取它里边这个属性，读取它的这个丘准，呃，读不到的话是反一个安迪范的是没有问题的，但是我们这读的话是这个论词，然后我们再 读这个认识的话，他就会进行一个报错，因为这个安迪范的身上呢是没有这个认识这个属性的，所以说他会进行一个报错。那这时候的话我们就需要使用这个可选链操作符了，使用可选链操作符，如果你后面这一层读到的话，他会给你反一个安迪范的， 这样的话就可以防止这个爆错了。然后返回的安迪范的饮食转换之后呢，他就是这个 fus， 所以说到这个威望以后他就终止掉了，所以说在这配合我们使用这个可选量操作服呢，是非常好用，就是你后面有多少层都可以了，只要他读不到，他都会反这个安迪范的，就不会跟你去做这个爆错了， 然后这个东西呢，一般我们配合这个双问号表达时去使用就是这个，这个东西呢一般是处理，就是比如说左边他返回一个安地范的，或者是为闹，他就会去反这个右边的一个值， 那这个东西注意他只能处理安迪范的跟这个闹，零的话还是反零 phos 还是反这个 phos， 零和 phos 不做处理，所以说跟我们这个逻辑飞这个运算服呢，是有一定的区别的，所以说大家一定要区分清楚，那么来演示一下吧，就是零他其实反的呢还是零， 然后后面的话我们给一个针就是一二三，但是他反的还是零，所以说零他是不会做处理的。还有这个 foss， 他也是反的一个 foss， 他只处理安尼范的跟这个闹，这样的话他就会返回右边的一个指，那这样子还有这个闹， ok， 那这个的话就是一个可选练操作，符合这个双问号表达式的一个用法。 ok， 然后我们来回归正题来讲一下这个动态组件，然后我是已经提前写了三个组件，就是这个 abc， 这个三个 voe 文件啊，然后里 里边写上点文字。 ok， 然后我们在这个 ab 展 vivo 呢，我已经提前把它引入好了。然后我们来给他定一下这个数据格式，就叫一个 data 吧，那是一个 rectangle， 然后类型的话我们就不需要定义了，因为他可以推导出来，他能推导出来的话，我们就尽量不需要再多定义这个类型了。然后内就是 a 组件， 然后 com 吧，就是我们这个对着这个 avo eok， 然后我们给他粘三个， 然后我们就，呃，然后我们把它做成一个太不切换吧，其实它的应用场景也就是一个太不切换之类的， 就是你可能下面每一个胎背呢，长得是不太一样，那这时候你就可以使用这个动态组建来做了。 ok， 当然你也可以使用这个路由啊，都可以啊， 然后的话我们来把它便利一下，在这个页面上， 这的话我们来个 wegan four， 就是 item in 这个 data， 然后把这个文字给它显示一下 item 的捏， ok， 然后给他来个浮动吧，来个 style 啊，第四 play flax， ok， 下面这个给个克拉斯泰宝， 呃，然后来个什么包的，来个线啊，搜里的 ccc， 然后盘顶来一点，上下的话就五啊，左右的话多来点，然后再来点麻针，麻针的话来点五，差不多。 ok， 我们来 看一下这个页面效果啊，那大概呢？就是长这样子，然后我们先默认的给他先选中这个第一个 a 组件，先给他展示一下啊，然后这时候我们就需要使用到他这个内置组件了，就这个 ccompo 政策， 然后他有一个 e 的属性，然后需要绑定这个值，然后我们声明一个阿姨和对象吧，就叫什么 comid 吧。 ok， 是一个 rf 对象，然后把这个 a 组件给它塞进去，去绑定到这个 e 的上面，他就默认的就展示这个 a 组件了， 那我们可以看到 ok， 这个报错，我们一会再来说啊，展示是没有问题，然后我们可以给他加点这个样式，这样的话我们再加一个小手吧，对，就是划上去的话，他就变一个小手了，然后再加一个阿根廷， 嗯，然后背景颜色是什么？该不录吧，搞成一个蓝的吧，给他来个选中的一个效果，然后这样的话我们来个什么 index， 呃，就也就阿克提吧。 ok， 默认的话是一个零，然后这的话我们可以给他来一个动态。呃， class 啊，其实克拉斯他是可以写两个的，就是可以写一个静态的，可以写一个动态的，但是不能出现两个这个静态的，或者是两个动态的。对，可以一个静态，可以一个动态，这样做是允许的。然后我们这个阿 kq 等于这个，这我们接收个音奈个词吧， 拿这个缩音给他匹配一下吧。等于等于这个什么 index 啊，如果劈到的话，我们就给他来个什么，这个阿克挺 ok， 如果劈不到的 的话就返回一个这个空的这个维吾尔，这个经常出现一些问题。 ok， 现在就好了，他这个编辑器这个插件容易有问题啊。 ok， 然后默认的话他这个就选中，然后我们点击的时候给他做一个切换，这的话我们来一个克力克，叫什么 switchcuvn 吧， 把这个 it 和这个音带都给他传进去，然后在这个方法上给他操作一下，其实也是非常简单啊， 然后这个 item 和这个 index， 那就是这个 c ymid， 呃，注意他是一个 r 野后，所以说我们要加这个点 w 就等于 item 的这个 ceon， 就是要切换这个组建，还有我们这个 index 就是这个 t octode value， 就通知这个 inlex。 ok， 我们来看一下效果，这样的话他应该就可以实现这个切换了。点击 b 来发现下面这个组建呢就已经换掉了，点击这个 c 也都换掉了，就他这个应用场景可能就是这个太不厌，因为你在现实业务开发中呢，可能下面每个太不厌的都长得不一样， 然后呢你又不想使用微杠易服去写这个东西，那你这时候就可以考虑这个动态组件或者是路由也可以，对，这两种方式都行。 ok， 那这个的话就是一个动态组件的一个基本用法啊，但是你会发现他有一个报错， 他这个报错大概的意思就是什么呢？他是会把我们这个组建里面这些信心的也去做一个劫持的，但是呢又没有必要啊，产生的这个性能浪费，所以说我又给了一个警告，我们来打印一下这个东西，就他里面这个 c o m 啊，这个点外流应该是。 ok， 大家可以看到 这里边的话就是一些组建的信息，但是这里边属性的我是没有必要去给他做一个劫持，所以说我们需要跳过他，跳过他的话呢，他提供两个 apn， 第一个是使用这个杀六，而野夫就是代理这个最外面一层，我们之前讲过他只到这个点，歪柳只到这，然后里面这些属性呢，他就不会去做一个代理了。 然后如果是在对象里面呢，他会加一个这个 macaw， 就是这个东西，这个东西的话我们之前也留下了一个伏笔，在讲那个 relative 原码的时候，我们说的会加一个 st keep 和这个属性， 就是使用这个 max r aw 之后呢会有一个这个属性，然后 rapq， 如果碰到这个属性，他也会去跳过这个 polk 的代理 说，这我们需要改造一下，那里边这些组件呢，都要套一个 mac r aw， 这里给他包一下就好了， 包完之后呢，他身上就会多一个那个属性，然后到 pro k 的时候呢，就会去跳过他。 ok， 我们来看一下啊，这一层警告，我们需要把它改成三六二野夫 把这对，那这样的话就好了，刷新， ok 啊，一点问题都没有啊，咱们再点击这个切换， ok 也是没有问题啊。对，所以说我们可以通过这种方式去节约我们这个性能啊，去避免这个不必要的一个浪费啊。以上的话就是一个动态组建的一个演示，然后我们来讲一下他的圆码，再讲圆 之前呢，我们再给大家补充一下啊，差点给大家忘了。就是这个的话，只是第一种这个书写这个动态组建的一个风格，其实他还有第二种方式，呃，第二种方式有点类似于这种微微二的一个风格，呃，那我们这再开一个 script 啊，然后这个浪的话还是写成一样的浪，等于这个 ts， 然后里边的话还是通过 expose 啊，底服好吃， 然后去搞一个对象吃这个 compotents 啊，这样子啊，然后我们把这个东西给他放到下面吧， 把这三个足劲给他放到这，然后把这个东西通过这个抗破层次给他去注册一下，那这种方式去给他注册， ok， 那这种方式注册完之后呢，那我们上面就需要给他改一下了，就不用去放这个组件了， 你要是把它换成这个奏创也是可以的，那就不需要这个 macaw 了，就是这样子他也变得支持了， 然后这个阿姨也会的话，也是把它换成一个租串的这样子。然后我们来看一下这个页面效果，他其实也是可以的，刷新，然后点击切换 也是支持的，所以说这是两种风格，就是一种的话就是使用这个字串风格啊，另外一种的话就是使用这个对象的一个方式， ok， 然后我们再来看一下这个圆码， ok， 那么继续来看一下这个动态组建的一个圆码。那首先我们需要先打开这个网站，就是把模板呢会编成一个软的函数，那这个网站我们在第一章的时候呢，就已经介绍过了，这是微微官网 提供一个网站。然后我们来看一下把这个 computer 的这个东西去编译成这个，让他函数他是长什么样子，然后我们给他来个属性叫 is， 然后纸的话随便写，就是这个 a， ok， 发现呢他是去吊用了这个函数，就这个 readoutenamic 这个 compot 的这个函数去做一个动态切换， ok， 然后我们来在原码里边去找一下这个函数，看看他究竟做了什么事情。啊？ 那我已经提前把这个函数呢已经找到了，这样也是非常简单，他就做了一个衣服判断，呃，然后他先判断了一下这个，这个我们这个组建的是不是一个死菌，就是我们之前也演示过了，他可以传两种方式，第一种的话就是传这个整个对象给他传进去。 第二种的话就是我们传这个 string 方式，如果是 string 的话，它会又掉这个 results 这个函数，然后我们去看一下这个函 书里面又做了什么事啊？就是这个东西，在这个函数里面，他去读取一下这个实力上面的这个太婆啊，他为什么要读这个太婆呢？因为他要区分啊，你当前使用的是这个 oppo nccipn 呢？还是说这个 compcnapn opponcivpn 的话，就是我们这个 vvr 的写法，就是这个什么 第一胎呀、 masters 啊，就那些东西，然后他通过这个探探的去给他做一个区分。那如果是三踏步函数呢？我们就会读到 ruanda set up 以及对应的碳玻璃，然后呢他又传给了这个伪造去进行一个注册，然后他会去判断啊，是要局部注册呢？还是要说这个要 全局注册，然后会返回一个 r e s r e s 就是我们当前要切换的一个组件。 ok， 然后在在最下面的会进行一个 retar 去做一个返回，这个的话是一个死追音类型的一个处理。 咱们再回到上面，那如果是一个对象，那就直接返回，大家可以看到哪个性能比较高啊？也是很明了啊， ok。

等会呢，等一下建的时候啊，我们新建文件项目啊，我们建的是啊，换一个重换种这种，因为后面我们要分成哈三种，再注意这个啊， vu 一 项目不是一天聊的，但是他跟天聊是一样的啊，实现起来是一样的啊，几乎是这种，那这里呢，我们要选什么呢 啊？为什么选这种？那？编程用的是六一的格式，小程序是一样的，然后这里呢，我们写一个目录，然后这里就写一个 啊，项目的名称建好之后，你这个创建现在我已经建好了，他在这里会怎么样的呢？我把它拿着养， 把其他页面关掉，是不是啊？然后打开这页，首先这是一起五，是不是 tl， 然后是头部 budy， 然后最后面有接触的标记，好，这里 啊这里呢我建了他原来就有这个个 div， 然后呢？加上 v， 六一的里啊格式，基本的格式哈，我们看到这个 啊，就啊就有点事，是不是啊？然后呢，上面这里啊有个导入的啊，一个接洗就不管他，他是没有一啊，要留住啊，不能上吊。什么意思呢？比如这里定一个变量啊，比如这里定一个变 量需要 untr， 这个变量怎么写在页面上面啊？怎么显示？首先一个 dip， 这 did 取的这个名字是 app 啊，这个名字对应这个名字， 然后呢，这个啊就相当于显示了一个变量，就这个数，好像我们运行一下这个变量在这里，现在我们准备要做这么一个效果 啊，这个效果上面的油没有，暂时还没变量，他说如果他登录了，把这个变量名字就放在这里，放这里已经登录，不需要再点登录了，而显示他的 路的名称，所以呢，这里一般呢，到时候呢，就是我们会建一个英文名，英文名是什么呢？啊？啊？比尔，就这个名字，这个名字怎么会显示在上面去呢？ 那么这有个 div， 那我们就会想办法了，我们要做一个 iv， 然后这个前面我们要把它圈起来， 他靠签起来，因为 app 是一样的，跟小人是一样，然后这里写上用户名。好，这里用户名如果他用黑米是公的，他说了，我们又让他显示 no， 将来定 再刷新一下个用户名就在这里了，但是在写在用名之前，我们要做好这一行，头部这一行，所以呢，这个内容啊，可能就不是只是一个 div 了，那么这个原来这个我们就删掉是不是？ 好，我们把这个位置把它定一下。好，这里第一个帮写成什么了啊？有 div， 前面这个点设置是 logo 那个文件名啊，所以呢，我们这里 会显示个啊 logo 的信息，是不是啊？然后呢，后面等会还要写这个文件名，我现在先选这个数据啊，分好好这一这两个内容是一个左边，一个右边，右边呢， 他还要有英文名之外还有其他在搜索的内容。现在我只是显示两个，然后现在定一下这个样式，不定跟前面样式写法是一样的，我们先在这里定，然后到时候再封装，直接封装也可以 啊，用这个哦，在这里呢，准备创建一个 cs 写写，我也写这个， 然后在这里写上他的路径，所有的样式都写到这里面来，先有个点的井号 app 是不是？ 然后这个我就设一下高度啊，这样我设一下高度啊，那宽度是多少呢？ 还不知道是不是那么给个颜色啊，先给个颜色，这种颜色呢，我现在随便给一种啊，看的可清楚， 好，补充一下他在这里，然后呢对这两个东西一个左一个右，所以呢我要用到，是 啊，伸缩的盒子模型啊，再刷新一下，还打横呢，是不是？然后呢再做一个啊，内容充满的方式，我们用的是啊，中间这个充满方式 啊，就要空白，在中间，那么就变成一个左一个右了，后面还要做一个小细节，一个上下集中。好，这样子来讲就一个左一个右，是 三十七中，还有呢，左边那有左边跟右边留点空位啊，同样道理，我们也要加一点点 这个盘顶的啊数据啊，当然这里可以调小一点，这样看一下 这里空位，这里空位，等会呢，我们就继续把左边跟右边的内容进行加工资啊，这里怎样找一张 logo 的图片， 他就充满这这实现这一内容的点四，然后右边呢继续在第二个 iv 里面加其他内容。好，这两个 div 呢，我们知道一个是这个，一个是这个，现在还没有做样，是不是现在第一步啊，大家赶紧起来。

今天我们来分享一个应该叫做提高 vivo 开发呃性能的这样的一个方式啊，其实这种方式呢，已经在那个 vivo 的文档里边写了，但是很多人没有注意到，为大家解释一下，就我们在使用 vivo 的时候，现在很多都在使用 ts， 那你在使用 ts 的时候的话呢，我们就需要 ts 服务器，是吧？呃，来分析我们这个 ts 的代码，给他们找出错误。那默认的话呢？我们这个系统里边啊，咱们看一下，搜索一下叫做内置搜索这个词的内置默认的话呢， 好，默认。我们这 vs code 它本身就带一个。看到了吧？然后呢，如果我们安装那个 will 插件之后， will 插件咱们 不都装这个吗？安装 vivo 插件之后的话呢，它里边其实也带一个，所以这样就等于说一个活有两个人在干，这样的话，第一个可能是性能有影响，而且的话呢也可能有 呃异常的错误提示，所以这种时候的话呢，我们怎么怎么样呢？咱们就关掉一个，比如说我们还是搜索内置，然后找到 搜索这个 types rept， 然后找到这个插件，比如说当前你正在写的是 vivo 项目，你就可以点击它。 然后呢禁用工作区，禁用工作区把咱们这个当前工作区我不使用系统的这个 ts 了， 我是使用我 vivo 插件那个 ts 服务器，这么操作一下，这样就可以了。好，今天的分享结束，感谢大家收看，快乐常在，再见。