vue设置prod模式

假如说咱现在要做一个系统，做一个什么样的系统呢？比如说这里有一个登录啊，啊，输入用户名密码，一点登录，然后就会跳转到一个系统里面了，这就一个系统啊，然后这个系统大家可以看到啊，他这个啊上面呢有一些菜单，用画图给他打开，大家看啊， 这管理系统进来之后，上面呢他会有一些菜单啊，比如说这个，呃，资料审核呀，发票啊等等等等之类的啊。然后左侧呢也有一些菜单，然后右侧的主体内容呢，是一个 呃显示正常系统功能的一个页面啊，那点击这些列表或者翻页的话，都都能实现一个跳转啊，那咱们如果说想实现一个这种系统的话，肯定是需要这种 页面跳转的功能了，但是咱之前讲的那个 vivo 呢，单文件组件的 vivo 呢？他只有一个页面，对吧？不能随便跳转呢？那今天呢咱们讲什么？讲这个 vivoutut 就可以实现 vivo 应用 页面跳转了啊？那比如他怎么用？咱们从头开始新建一个项目再说啊，那我这里先打开一个今天的内容，八月三号啊，那首先呢，我在这打开一个密码工具， 打开面条工具啊，那咱们现在要做什么呢？要创建一个 vipo 项目，对吧？那咱上一次讲了，讲了 npm， 然后 innite， 然后是 vt， 用 vt 创建一个应用 vt， 那这个呢，就叫如车下划线呆萌回车，用 vt 创建一个如特呆萌的一个 vivo 的箱， 那这个创建创建速度应该还是挺快的吧，咱看一下效果啊，呃，应该是建完了，对吧？建完了，然后我用 wifi 之后把这个项目打开，把这个新建的项目给他打开， 在这个 oppost love you 八月三号啊这个项目， 那好，这项目建完之后啊目结构大家应该很熟悉吧？ sr c 咱主要的组件都写到这里了，对吧？这还有个拍开点这身，他依赖什么呢？啊？依赖这个 beau， 我需要把这个 beau 给他下下来啊，然后，呃，他这里还有个 beat 工具，对吧？这就是 beat 啊，然后我现在如果想下这个 beau 的话，需要 cd 先进到这个卢特呆萌里面啊，然后 c n p m 因斯道安装依赖，安装完依赖之后我们就可以启动这个项目啊。 好，那他下完了，下完了，然后我们启动这个项目 npm rend 第一位，这个呢，就是用 b 启动一个 项目，启动完成之后咱们应该就可以在这个呃三千端口里面访问这个项目了， 他还在还在启动，是吧？哎，启动好了啊，默认的话，咱创建一个默认的六三项目的话，他是有一个计数器，对吧？计数器啊，当然这个功能咱不要啊，咱要的是什么功能啊？咱要的是一个刚才说的这个啊，对吧？一个这种系统，对吧？可以实现页面跳转呢？可以可以，有登录啊，这个登录功能啊，当然 咱们把这个系统给他简化一下。简化到什么程度呢？把样式都给他去掉，大家懂吗？现在这个系统是一个呃 登录然后跳转到系统里面呢，是这样可以实现一个内容管理啊，菜单啊，可以切换呢，可以实现一个这个功能。那咱们把这些样式全都给他去掉啊，咱就给他搞一个最简单的一个。 呃，最简单的一个效果什么样呢？咱就实现一个这个效果。大家看啊，现在是用户名，比如说我用户名输个一二三，密码输个一二三点登录啊，他是用户名或密码错误提示了啊，那如果说我输正确的呢？他的命啊，然后密码是一二三四五六，点击之后就可以进到系统里面了， 你再看啊，是不是上面有一排菜单，然后这有一个内容列表，然后点击列表的时候可以切换到不同的页面。切换到不同的页面啊，然后点击注销的话，还可以进到登录页，咱实现一个这个功能，懂吗？ 那那把这个功能实现之后，咱如果说会一些样式啊，加一些效果的话，就可以实现刚才那种系统的功能了啊，这看完之后，咱现在啊需要下载 vivoutut 啊，为什么下载 vivoutut 呢？因为咱创建这个项目什么没有啊？就只有一个 vivo 这个项目就只有一个标。那咱需要实现页面跳转的话，需要需要下载一个 vivoutut。 怎么下载 vivoutut 呢？咱们再打开命令长工具啊，我们先把这个项目给他关闭，现在是启动状态啊， 完毕啊，然后呃 c n p m 因死照啊，刚刚 siri 添加一个依赖，然后下载什么呢？下载 vivo gute。 但是咱用的是 vivo 三对吧？ vivo 三的话他用的 vivo uti 版本是四版本啊，所以说我加一个艾特四，这样的话就可以下。呃 vivoutur 的一个四版本啊， 下完之后咱现在再启动这个项目，启动这个项目 npm ren。 呃，第一杯 启动那个项目啊？呃，他这个是这样的， npm 四十五也好啊， npm 第一位也好，就从哪看呢？大家看，是这啊，这里是不是拍开点这一身里是不是有 一个 surpe 的一个这个属性的吧，这个属性里面定义的第一位啊，是调用 mit 命令，那就说明我执行第一位的话他就执行 mit， 执行 vip 就是启动项目啊，那比如说，哎，有小伙伴说，哎，我就喜欢用 npm rond sorry， 那怎么办呢？咱给他改成 sorry 就好了，对吧？ npmry soro， 然后把服务器给关了 啊，那这回我再启动服务器呢， npm 四五对吧，这是可以设置的，你是第一位也好，四二五也好，咱咱想用什么用什么啊，都很方便啊。对的，启动方式可以定义啊，那现在 mm 四二五又起来了啊，然后咱还是这个三千转口啊。 好，那现在是咱们做了一些准备工作都做好了，咱们现在就要开始写这个。呃功能了，写功能的话咱先实现一个最简单的功能。什么功能呢？就是说我现在打开这个，我把这个 helloword 干掉， 这玩意没有用了啊，好了，我得给他去掉。去掉啊，实现一个什么功能呢？现在就是有一个菜单啊，这个菜单叫首页啊，首页后面有一个博客啊，然后咱看一下 首页和博客，对吧。当我点击首页的时候呢，下方他会显示首页的内容，当我点击博客的时候呢，下方会显示博客的内容， 然后我先把这个样式给他去掉再去掉啊， 那我怎么实现刚才说这个内容啊，点击首页啊，对了啊，点击首页放大点啊，点击首页显示首页内容，点击博客，显示博客的内容，那我就需要创建两个页面，创建两个组件，一个叫首页，一个叫博客，对吧？啊，那第一个呢？在康复单词里， 我先把这个 hellower 给他删掉。啊，没有用了，删掉他，然后在康复的字里，我创建一个首页，叫 home 点 book， 然后我再创建一个博客，叫 blog 点 blue。 啊，咱现在的目的是什么呢？就是实现简单的页面切换，对吧？ 实际简单的页面切换的话，我就不需要关注它里面有太多的东西了，我就直接写一个 h 一标签就好了。 h 一，这个是博客啊，然后这个首页呢？ h 一有个首页，对吧？啊， 那我如何实现页面切换呢？这个就需要 vivout 提供的一些功能了。 vivout 提供了一个什么呢？就是提供了两个标签啊，就比如正常咱如果写的话，可能写个 a 标签，对吧？ a 标签，然后这是首页，首页，然后这块 跳转到等了跳转到后米，对吧？啊，然后下面有一个 a 标签，是博客，对吧？如果是说咱们以前不用六的话，那这个跳转到 blog， 对吧？ 然后中间有个斜杠分割一下啊，他是这样的，对吧？首页博客，但是咱现在用六了，六的话，我们用 urout 提供的这个页面跳转就不用那个 a 标签了。 uroututuurututigo 的呢？叫什么标签呢？叫这个啊， utile mank， 如特令，可相当于就是这个 a 标签的意思啊，就跳转的意思啊，但是他还是有一些区别的，一会咱再说区别，那这个呢？跳转到首页，然后，哎，如特令可啊， 这个跳转到如，他另一个跳转到首页，然后呢？如如他另一个 不用那个 hr e f 的，用的是兔，用的是兔啊，兔就是跳转到哪？跳转到后面啊，然后后面呢？我夹一个竖杠，然后这边还有一个轮圈 mink， 那下面那个呢？就是跳转到博客页了，对吧？啊？然后这个是兔， 等于斜杠 blog 调整到博客页啊，那我们看一下现在的效果啊，这是不是一个首页啊？一个博客啊，对吧？啊？那下面首页和博客下面的话，就是切换页面的一个呃位置了。 那我需要用一个标签给他占位啊。用什么占位呢？用这个如天六，用如天六给他占位。也就是说我切换这个 home， 切换那个 blog 的时候，他的显示的东 你放在哪啊？显示的主件放在哪啊？放在这个如特六里面，他是一个这个思路啊。好呢，页面布局咱已经写完了，我现在点击的时候下面有切换啊，但是功能还没写呢，咱现在点击他是切换不了了，怎么点击让他能切换呢？咱们需要配置一下这个路由啊。那怎么配置路由呢？这么写啊？ 在 src 里面我直接创建一个如特点 gs 啊，因为咱们刚才是下载了这个如特 biu， 咱们还没有引进来呢，对吧？所以我现在需要引入这个。呃，引入这个如特啊，音炮的啊， 可以先控制从哪引呢？ fom fom 这个如铁 fm， 这个没有如铁啊，引进来一个什么呢？他有一个方法叫 ctrl 如铁 啊，这一个结构。结构，我可以拿到一个可瑞的 rut。 可瑞的 ut 的工作是干什么呢？就是创建一个呃，陆游的功能啊，这是可瑞的 utut 啊。好，那创建一个陆游之后，我怎么去创建陆游呢？定一个陆游叫 如此，等于用咱们引进的一个方法，可瑞特如此去创建一个陆游。创建一个陆游，然后创建完成之后呢？ cos 的写错了， sunit 啊，创建一个陆游之后呢？然后我们可以把这个陆游给他暴暴露出去啊， ex pot expotd box 啊，撸铁啊，但是这个撸铁怎么配置？我需要在这里配置。 怎么配置？咱一会再配置。我先给他暴露出去这个如天的配置呢，咱一会再写。咱现在要干什么呢？就说 我需要让 w 的这个应用把这个如特给他引进来，对吧？那咱再回到刚才的这个，呃， manel gs 入口是 gs 文件，大家看入口 gs 文件，这个是不是创建了一个 w 的应用啊？然后挂载，对吧？那我需要用这个 w 的应用来使用，刚才咱们新建的没有如帖是一个这个思路。那咱们就给他先改写一下 cost f f 等于这个 w 的应用啊，然后 apple 挂载。我现在代码没改啊，一模一样，跟刚才是跟刚才是一样，我只不过是加了一个变量 app， 对吧？啊，然后呢，我先引入刚才咱们写的那个 呃，如此 gs 文件啊，他暴露了一个叫如此的一个呃接口，然后 fom fom 哪个文件呢？如此 cs 啊，这个乳铁就是咱刚才暴露出来的这个乳铁了啊，那我拿到这个暴露出来的乳铁的话，我用 apple 点柚子方法 就可以直接使用咱们暴露出来这个 vout 了，这样的话 u 的应用就可以用这个路由了啊，那接下来呢？我们的工作就是去， 呃，去设置这个路由。设置这个路由，把这个路由设置成什么样呢？设置成，刚才咱们写这个呃，可以跳转到首页，可以跳转到博客的一个功能了啊。好，那咱们现在开始正式写设置了啊，刚才写了一堆都是引入，对吧？刚才写了一堆都是引入啊，现在写设置了。 设置的话，首先这个可谓是如题，他需要传两个参数，第一个参数什么呢？叫嘿 siri。 嘿 siri 是一个陆游的模式啊。陆游的模式，这个陆游的模式呢？ 是呃，有什么区别呢？一会咱写，一会咱再再给大家说，大家只要知道的话，大家只要知道现在我引入这个陆游的模式是一个呃哈西模式就好了啊。需要引入这个可以的 word， 这个是干什么用的？一会咱启动的时候再跟大家说啊。这个大家知道，这么写就 ok 了。然后下面有一个很重要的就是这个路子，这个才是真正的配置路由， 这个才是真正的配置陆游。那我我的目的是什么呢？我想点博客跳博客，点首页，跳首页，对吧？啊？那我怎么配置呢？首先这个 入词里面入词是一个数组啊，数组里面我可以写一个对象，对象可以写个陆游 pass 路径。路径是哪呢？跳转到首页，首页就是一个斜杠啊，首页是一个斜杠，然后， 呃，跳转到哪个组件？跳转到哪个组件呢？跳转到首页的这个组件，对吧？康不是等于 home 这个组件，但是 home 主键我得引进来才能用，对吧？所以说我叫引入 home 啊，你们 pose hom， 这个康不能吃里面的这个 home 主键， home 主键引完了之后，咱再把这个 blog 给引进来啊， 不落个引进来，不落个引进来，然后呢，我再写一个路径啊，再写个路径啊， pass， 等于我只要跳转到斜杠，不落个的话 啊，我就渲染哪个页面啊，渲染哪个组件啊？ blog 这个组件。好，那这样咱就写完了， 洗完之后，咱看一下鞋带的效果啊，路由也配置完了，路由已引入了啊，然后呢，咱看一下鞋带的效果， f 十二， 呃，然后咱现在是有了一个是首页，一个是博客页啊，然后咱现在想实现一个跳转啊， 啊，这里啊，真的是引入，引入入群，对吧？引入入群，我写个引入 app 了，不好意思啊，引入入圈， app 点右，这样引入入群啊， 引入入群，然后咱看一下，哎，这个就好了啊，入群引进来就可以切换了，然后这个首页啊，博客首页博客啊，就可以实现这个页面的来回切换了。每当我们点击这个时候，大家看上面那个路径啊， 路径现在是一个斜杠啊，警号斜杠啊，然后点博客，那就是警号斜杠 blog 啊，那他就会切换到博客的这个页了啊，就是一个这个切换的功能。

接下来讲什么问题呢？什么是主教化开发和模块化开发？他是两个概念，两个概念啊，哎，因为这个咱得分开啊。啊？先说这个主教化开发啊，主教化开发，比如说我现在写一个这个 应用，比如说这个系统里面是一个这个页面，然后呢？他有什么呢？有一个海底有个头部，有他头部，然后他还有一个侧边栏，侧边栏是一个菜单啊，菜单呢？咱就叫啊，一个耐还得有一个主体内容，对吧？这主体内容呢就叫 啃趁他那一个应用系统，基本上好多应用性都是这样的，大家大家可能看你们什么学校的一个选课系统啊，或者说那个办公司的欧威系统啊等等，基本都是这个时候啊，上面那个嗨点里面可能会有一些啊，比如说一个登录啊，一个一个用户的一个头像，然后这里有注销菜单， 个人信息等等等等，然后这个菜单呢显那个什么呃基础数据啊，什么各种业务啊等等等等，然后你点击这些菜单的时候，呃，主要的内容会不断的更新，对吧？基本上系统他都是这个思路，是吧？啊？所以说 咱们就用这个思路来给大家讲一下。呃，什么是组件化开发？组件化开发，大家想一下，我现在这个这个这个程序的话有几个组件啊？按刚才人的思路是不是有三个呀？一个是 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 二零一五提供的 模块化的语法啊，所以说我们通过这种模块化的方式就可以把程序拆分成不同的。呃，功能啊，有的时候大家为什么混呢？就是说， 哎，你这个主件化开发也是拆分，模块化开发也是拆分，那他有什么区别呢？啊？这个简单介绍一下，就是说主间化，他其实说的拆分还是页面层面的拆分啊？就比如说这整体的页面我拆成了三个主件啊，那组件化开发其实就是拆页面，那模块化开发呢？是拆功能啊， 拆功能我可能一个主件我可能有多个模块，而一个模块呢，我也可能用到了多个主件之上，所以说这是他们之间的关系，这就是主件化开发和模块化开发，模块化开发的一个基本概念了。

下面一个重要的东西就是路由模式。什么叫路由模式呢？路由模式它决定了两个，两个很大的问题。第一个问题， 我先不是要根据不同的路径来匹配主线吗？不是要做这件事吗？那么模式又决定了我从哪里获得路径？这第一个问题，我们默认情况下是不是从这里获得路径？第二个问题呢？是如何改变访问路径？ 就说我到时候路由路路径要变呀，那怎么去改变？他默认情况下是不是从哈？既然从哈吸获取路径，那么改变的也自自然是哈吸，怎么改变就通过 location 啊，他的内部呢？将来就会通过 location 来改变路线，比方说改变成呃， blog， 这里哈吸变了，是不是这里就变了，对吧？这是默认情况， 那么这个东西是能改的啊， will rotor 呢，给我们提供了三种路由模式，第一种就是默认，就是哈西，这是默认值， 他从哈西部分获取路径，改变路径呢，也是改，只改变了哈西部分，这种模式兼容性最好。好，咱们来看一下啊，下面有两个例子，比方说我们这个访问路径，他获取的是什么路径呢？获取的是哈西部分的后面的路径，获取的路径是 vlog。 哎，如果说是这样的地址呢？他看都不看前面的，他只看后边的哈西，因此获取的路径还是 blog 啊，也就说模式啊，他决定了从哪个地方去获取路径，你看能看懂吧？ 为什么说哈西的兼容性最好呢？因为我们要做的是无刷新跳转单页应用程序吗？你刷新干嘛呢？反正都是一个页面，你把那个页面反反复的请求干嘛呢？对，不要去刷新页面， 直接用 gs 切换就行了。那么但是我们要改动地址栏，而改动哈西，是不是不会导致页面刷新啊？无论你是多老版本的浏览器，哪怕你是三个世纪的流量器，改变哈西，他都不会导致页面刷新。而且哈西这个改变我们是可以监控到的啊，是可以监听到的。 因此呢，正是因为哈西有这样的特点，他特别适合做这种无刷新的跳转，因此哈西的兼容性最好。但是这个哈西呢，在我们现代的网站中，如果说前面的不变就变哈西，这个看上去呢，也挺怪怪的啊，我们还是希望呢改动前边的东西，那怎么办呢？我们去可以改模式， 这个模式在哪里改呢？在这里改。嗯？路由配置这里啊，刚才不是说配置的路由规则吗？这里还下面还可以写一个 mod， 表示路由的模式默认值。是哈西， 我们可以改成别的模式啊，比方说改成 history， 这个 history 模式呢，是对用户的感觉呢，是最好的，它是从浏览器的 location pythonym 中获取路径，从这里获取路径。那么这样子的就是跟哈西就没关系了啊，比如哈西你写个什么 blog 跟跟他有关系吗？现在就没关系了，看，现在是关于我现在获取模式改了之后，他获取路径的方式呢？不 再从哈西获取了，而从这里获取，不要意思啊，他通过这个拍死内容来获取的，不难吧。这个东西啊，比方说看首页啊，首页的话自然就是这个， 这就是首页嘛，对吧，摸的就是一个斜杠嘛，对不对？然后比方说博客 plot， 你看访问这个页面，但是现在页面刷新了，对吧？哎，访问这个页面的时候是不是匹配到了博客，看到吗？文章，文章组件把它匹配到这儿啊，这是 history。 这种模式 为什么叫 history 呢？因为我刚才说了有两个问题，对吧？一个是获取路径，从哪里获取？这个是怎么改变路径呢？改变路径的话，而且不能刷新哦，你不能刷新啊，刷新如果说你要刷新的话，那无所谓了啊，改变路径的话就怎么刷，怎么改变，就这样改变呗，对吧？特别简单啊，比如说 message， 你看页面刷没刷新，被刷新了吗？是吧？啊，重全部重新的来了一遍，那效果是一样的，但是这总之不是很好，因此呢，你不用去刷新页面啊。我现在说朱老师不刷新的跳转，那问题是 改动这个地址能够做到不刷新吗？是能够做到的，怎么做到不刷新就要用到 history api， 这是一个 h 五的 api 啊，那么这个 api 呢？其实就是 history， 非常简单啊， push state。 你看啊，我现在做一件事啊，前面两个参数传到第二，第三个参数就是传路径，比方说我们切换到呃， blog 这个路径吧。 注意看哦，我现在要回车了，注意看这个地方有没有刷新，这地方有没有刷新？回车没刷新吧，说没有刷新就改变了这个地址。 哎，抖音同学说改变了过后，为什么这里组件没变呢？啊？因为你如果说用你自己的代码去改变的话，那么他是监控不到的啊，他监控不到你的变化的，他不像哈西，哈西可以监控你这种改变他监控不到的，也就说他的内部啊，使用的是他来改变路径的，因此呢，可以做出无刷新的效果， 但是必须要支持 h 五的浏览器啊。如果说你那些不支持 history api， 因此呢，你就做不到这种模式。 history 模式，因此这种模式呢，兼容性呢？没有哈西好， 但是现在的大部分流量记得都支持了啊。呃，我们这种这种模式也是用的最多的，因为看着最舒服。好，咱们来看一下这种模式吧。最后我们来呃，总结一下，你看这个路径，用这种模式的话，这种路径得到的路径是什么？这是斜杠对吧？看都不看哈西。呃，这，这个路径呢，得到的模，得到的路径呢？就是 albert 这个东西呢，得到的是 blog， 对吧？改变的时候呢，它内部呢，使用的是 history api， 可以做到无刷新的变化路径 好，我们把它调成这种模式。还有第三种模式呢，叫做 x drag。 这个玩意呢，就了解一下就行了啊，我们平时不咋用的，除非你要用，用到什么。呃，手机应用上面 还不是那种网页应用啊，还是那种原声应用啊，或者是混合应用里边，那么这种情况呢，才会使用这个。这个玩意是什么呢？就是说有的环境里边呢，是根本就没有浏览器的，比方你玩一个手机游戏，你给我找一个手机游戏的浏览器是啥？没有浏览器，没有浏览下来的地址栏呢？哪来的哈西呢？哪来的 pythonym 呢？哪来的 noki？ 都没有。因此这个时候呢，还把路径保存在内存里边，你可以认为就是个变量来保存我们路径。这变量呢，一开始的值是这个，将来要变化的时候呢，就把这个变量的值变了啊，就这种东西，总之呢，就是这个玩意呢，不是很常见啊，我们将来如果说呃浏览器就是那个在呃移动端要去使用， 特别是移动端应用要去使用那个 view report 的时候呢，可能会用到这个东西啊，现在用不到了。好吧，这就是我们路由的三种模式。 关注路易简介号的同学，打断一下，我是袁老师，你能跟着我卷到这里，那我就再送你一个能卷死所有人卷的五体投地的课程。这套课就是我录制的大师课， 里边包含原理，原码，思想，还有笔面试题，这些都是求职提薪跳槽绕不过去的内容。并且呢，我毫不夸张的说，论这些内容的价值，如果说一份工作年薪三 十万，那么大时刻这几天讲的东西可能在你的面试中就能值十万。当然说他里边涉及到的面试题，只要你面试的时候遇到了，这是大概率事件，你把我给你的答案，不用百分之百，能够说个百分之六七十，对面试官的杀伤力都是核弹级别的， 不管他曾经面试过多少人，这种场面他没见过，我一点不跟你开玩笑。当然呢，我也欢迎各大公司的主管面试官前来参考借鉴，同时呢，也送给各位同学拿去学习提升怎么领取评论区第一条，进粉丝群，然后根据提示领取就可以了。

大家好啊，我们来看这页面，一进来以后，这个筛选条件的部分就占了半平，其实呢大部分筛选条件默认情况下是用不上的，所以呢我打算给他加一个折叠的效果，我们默认只留第一排，剩下的后四排都隐藏掉，我们把这个按钮往上挪一下，好，开始 这是那两个按钮，我们把它挪到上面 好看一下，然后接下来我们把后面的四排放到一个容器里面， 我们参考他这个代码，这个是滚动效果的代码，是一个这个标签配合一个 div， 然后把里面内容放到这个 div 里。好，那我们开始把它复制过来就行了，把它都拿过来吧， 放，这里面放我们要放的内容，这改个名，你叫猫，肯定是。然后把下面的这些艾特姆放埋，艾特姆都拿过来，把他都折叠起来，找一下， 把它都拿过来，然后把它缩进调一下， 然后把这个下面条件加上， 放到杯坛里面，然后呢我们需要放一个按钮，我们就在这个放门外面放一个一二八乘，用来点击 切换展开和收缩的这块我们用文字类型的，不需要样式，然后加一个艾肯动态的， 然后我们找两个图标，一个是这个向下，向下放到后面，一是这个 收起，收起用这个，然后我们加一个点击时间，点击时间就是 好，我们看一下效果， 打开那然后我们再把这个按钮集中一下，设置一下样式，我给他加一颗 mcb 田，我们加一个宽度， 让他居中一下。啊，居中。然后呢我们再加个背景 悬停的背景颜色， 背景颜色我们找一个。 好，我们再来看一下， 错了再看，然后这个稍微有点大，我们把上下的拍顶去掉，左右去掉，好变小了， 然后他太靠下了，我们往上挪一挪， 然后我们把里面的这个小图标的颜色改一下， 我们再找一个颜色差不多用这个试试， 深一点，是这个。 好，这样就可以。好了，今天就到这里，谢谢大家，再见。

好，那么这是我们给大家介绍的第一点啊，得他的强烈性，很显然啊，一个组建这个除了得他之外他还会有另外一个东西就是属性啊，因为别人要给我传参数进来是不是？呃，我要跟大家说的是呢，其实跟刚才的这个类型其实是非常相似的啊，来看一下这边 属性类型啊，那除了刚才的断言需要做之外还有另外一个东西，因为这个东西他是一个定义，不是一个直，所以直接用断言是不行的，所以这时候还需要用一个泛行类型叫 party， 我给大家演示一下 啊，那么还是刚才的例子假设啊，这次想让用户传上一个叫抬头阴粉 这样的这个类型啊，约束一下这个东西将来是我的属性类型啊，这个属性有什么呢？呃，比如说啊，我将来 希望他给我传一个这个啊，这个标题的内容叫白六，还有什么呢？我想定一下这个标题的颜色。 好，很显然啊，他俩都是子福串，对吧？好，在这我就定义好了。好，定义好之后我来这边啊，准备去定一下刚才的属性啊，我们在这去写啊，是吧，你看一下这个这这东西是不是叫抬头音符啊？好，请注意他的类型是什么， 我们在这给他写类型的时候我会怎么写啊？这东西呢，是不是比较你填一下，你快 然后回这填这个这个这个东西啊，请注意他是个对象，是不是你能声明？以前你能声明的方式是哦这个，但是你发现你声明个这有什么用啊，他不就是一个很模糊的壳吗？他并不强， 你必须有一个具体的类型，这时候呢，需要用是不是断言，继续断言，但是你注意，如果你想把它断言成抬头音否，你发现啊，对方会提示你一个信息，就是 他说这个东西啊，他现在怎么样，你是没有办法去做覆盖的啊，为什么？因为根据类型检测， probs 中的任何一个属性都不是一个自定义的类型， 而是一个范形类型，所以大家要记住啊，这里其实就是说啊，这个这个由于地方 ctrl ups 里头的这些像其实已经有了详细的约束，你这个东西是不兼容的，这时候大家需要有一个叫 pro 太 这样的一个范形类型，然后呢，大家用它对里面的这个具体类型做约束啊，这时候我们就约束了咱们这边的这个抬头音符的类， 于是我将来在用的时候我就清楚的知道啊，抬头音符里头的结构一定是这样的，我在上面就可以这样用。好，举个例子， 咱们在上面啊，把它输出出来给大家看看啊，好，那这里面啊，咱们回这边啊，我呢，除了这个这个东西之外啊，我在上面显示一个标题，是不是在这啊？显示标题，那我可能会写一个 h 一， 然后写一下抬头音符的 w， 是不是啊？你看一下啊，抬头音符有类型吧，看一下啊，类型是抬头音符检测到了点之后是不是出来 w 啊？好，我就知道我现在想输出的是这个这个东西的这个字符串的值， 我还要控制他的这个颜色呢，所以我在这呢再加一个 style， 做个动态样式啊，想控制谁啊？背景色是吧，白光咖啡， 想控制谁呢啊？就是用抬头 enfold 的卡了来对他做约束啊，大家看一下。好，现在设置完成之后显然在这边的这个使用侧啊， 大家伙要注意啊，在这边的使用册你要给他是不是要做传递啊，我们重新打开一下这个 app 啊，然后在这一端啊，我希望呢啊能够在这啊去输出一下刚才这个属性，这个属性的名字叫 开头音符是吧？好，大家把它说出一下啊。好，那么小伙伴们请注意啊，我在这边啊对他进行定义的时候啊，这边咱们要是不是要给他一个纸啊， ok， 我想给个对象啊我想给对象这是第一点，第二点是说我这个东西 是不是得有一个白六啊对吧啊我说呢这个是什么呢啊？我现在是一个代办事项这样的一个标题，然后是卡乐是吧给上一个常见的颜色，这是一个自助串，各位好请注意啊， 那我把这个定义完成之后啊回到这边啊，大家感受一下啊，就是刚才我写的这个东西能否正常如愿对吧， 他是可以的对不对？那么也就是说啊我现在有两点呃是起到了这个效果啊，第一个效果就是说啊这个抬头音符的检测性啊，我需要知道他的类型是什么 这第一点第二点是传进来之后呢在编辑的过程中很清楚啊，对他能够有强烈型的这个约束啊啊在这约束注意看一下这个写法啊最后一个这个注意 像是像这种东西一般是不是都需要服用啊，不建议大家写到这。写到哪呢？可不可以在 s c 里头建上一个叫 dts 啊， taps dts， 把声明放到这，把这个东西倒出去啊， akis pot 一下是不是啊？复制一下。 好，下面在这边是不是可以直接导入服用啊，好处多多是吧？啊，那么你的写法会怎样？从咱们是不是上级目录 type dts 中导这两个东西分别是一个是土度，一个是抬头应付，表示换一下。 好，把这个东西做完之后啊，回这边啊再看啊，没错，对吧？好，那就 ok 啊。

上个视频我跟大家说要用一个视频教会大家简单的 view 开发，大家把这个视频看完大概率是能学会的。所以话不多说，我们直接开始 看过我发的静态内容网站和动态内容网站有啥区别？这集视频的朋友应该知道，一个最简单的传统静态内容网页代码是这样的， 那么一个最简单的 vivo 页面代码是怎样的呢？首先，对于静态内容网页来说，网页上所有的内容都是用代码写死的，孤零不变。 如果把页面上一些需要根据数据请求结果动态变化的内容，用一个变量或者叫站位服代替，那么这个网页就变成了动态内容网页。而 vivo 开发的页面一般就是这样的页面，就像这样只是 vivo 的这个站位 或者叫模本语法是用这种双大括号的写法而已。为了让这种双大括号的模本语法起作用，我们需要给这个传统网页引入 vivo 点 gs， 也就是 vivo 的安装部署。 最简单的 vivo 页面就是这样的，每个 vivo 应用都是通过用 vivo 函数创建一个新的 vivo 实力开始的，就像这样，搞明白这三个参数，你就能开发一些简单的 vivo 页面了。 el 其实是 element 的缩写，指的是 html 元素，就是告诉 view 要把这个 view 实力作用到哪个 html 元素上。 在这个视力中，很明显就是把这个 view 实力作用到这个一句 tm 元素上。这个是页面模板上的变量或者叫站位符，也叫模板语法。这些 页面模板上的变量或者叫站位辅的值会根据 data 里对应值的变化而变化，而 data 里面各参数的值得变化，靠的是在 masses 里定义的各个事件处理的方法， 这些事件处理的方法可以被绑定在某个 html 元素上，让用户通过点击双击、长按干 html 元素等操作方法触发。就像这样， 或者把某个事件处理的方法放在某个 vivo 实力的某个生命周期函数内执行。比如就像这样， 美式页面加载后，这个唯有实力的生命周期函数就会被出发一次，就将服务器请求页面的数据后，再复制给 a 的里面的哥哥参数。 这也是三大框架开发的单页微本应用页面 su 效果极差的重要原因。再配合 view 的 class 与 style css 样式绑定、表单输入绑定、条件渲染、列表渲染，生命周期空利润， vivo 几乎就能随心所欲的控制页面内容和仕途的动态更新变化。 因为 view 的 class 与 style css 样式绑定、表单输入绑定条件渲染、列表渲染也是根据 data 里对应的某个值得变化而变化。这样基本上控制了 data 里面各参数的值得变化，就控制了整个页面内容和仕途的变化。 基本上没有掌握到这个程度，已经能满足大部分 unif 开放网站或小程序的场景了。 再学个主见单文件，主见计算属性和真经期以及 vox， 基本上已经能满足开发一个简单的实际可用的网站 app 小程序的需求了。就像这样的，所以 用 vivo 开发页面，简单来说就是在做两件事，一、把这个页面上要动态变化的一句， tm 代码和 vivo 实力中 dead 属性内的各个参数相互绑定，这个时候你手动修改 dead 里各参数的词，就能让页面内容和视图更新变化。 但实际用户访问页面的手，我们不可能自己手动修改的一个一个参数的纸，而且也做不到。 而让用户访问页面的时候，加载数据后自动修改的这里对应参数的值，或者让用户访问页面的时候，点击页面上某个地区天猫元素后自动修改的里对应参数的值，来实现让页面内容和视图动态更新变化。 又需要在 masa 这里写，用于代替你手动修改爹地里个参数值的代码，也就函数或方法这么 一个最简单的 vivo 页面怎么开发，你学会了吗？左下角零基础全站开发课还会详细的教你这些东西。通过上个视频我们知道，学完 vivo 再配上 uline app， 我们就可以开发出一个简单的现代 wifi 应用了。 而这个课程中 vivo 学习的内容也是专门为 uniaba 开发网站 app 小程序设计的。下个视频告诉你为什么有必要给大家制作一套专为 uniaba 开发用的 vivo 学习课程， 这也是为什么不用由你 ipad 开发的 vivo 项目，不能直接打包为 ipad 的原因。

什么叫动态组件呢？比如说咱做一个手机端的页面，我先说一下咱要实现什么功能啊？咱画一下啊。那刚才咱说了，就是比如说一个手机页面啊，一个手机端的页面的话，他可能分成几部分，分别是什么呢？分别是一个 top 啊，一个单宁， 一个堪称点和一个服帖啊。那这个咱写一下，这个就叫 top 组，这个叫班的组件， 这个叫天天的主角，这个叫福特主角。那，那假如说啊，比如说我，我现在是一个会员啊，那你中间搬，那是一个广告，对吧？那我会员的话，你，你不能老让我看广告啊，所以说我是一个超级尊敬的 vip 啊，那你怎么办呢？你把广告给我去掉，我 打开这个 apple 的时候，我看不到广告，我只能看到这三个。然后如果说你是一个普通的用户啊，你是普通的用户的话，那你不交钱没办法，你只能看广 广告，那你看广告怎么办呢？你呢？就能看到这个版本，所以同样的代码，同样的 apple， 我看的时候就没广告，你看的时候就有广告，甚至可能我看的时候这个富态在上面，他不在下面，反正我开心，对吧？我开心，我是，我是 ip， 我想怎么布局就怎么布局，而你呢？只能看斑点哈，所以说是一个这个功能，那这个功能如果说放到 w 里面去怎么实现呢？ 首先第一点就是说我需要让这个页面他是根据数据自动生成的，而不是说写死的，写死的页面，对吧？啊？是根据数据生成的，他数据可能是这样的，比如说我现在，哎，有一个，有一个，这个，呃 呃，叫利斯特，一个列表，这个列表上显示你的页面啊，第一个页面呢叫叫卖 top 吧，卖 top。 第二个呢叫卖班女啊，第三个页面 叫这个卖干净点，第四个页面呢？我得换个，行啊，看着可能舒服一些。第四个页面呢叫迈夫特，咱用实验这个功能啊，也就说数据是这样的，那你就给我这么的演示，假如说我是 vip， 我没有版本，我就看不到版本 啊，那你那我 vip， 我可能，我我我想看两个套吧，对吧？我心情好，我就是 vip， 我牛，我看两套吧，那你就得给我展示两个套吧。那这个怎么办？这个怎么办啊？ 那我就可以用动态组件来实现这个问题了，实现这功能了啊，那，那怎么写呢？首先我肯定是需需要把这些都引进来，对吧？那这个是没跑了啊，我需要引一个卖套啊，是这个卖套 买斑点，是这个买斑点，买 cant， 那是这个买 cn 点，卖 top。 哎，这这这个不用给了， top 斑点买福特抖音引进来之后我还需要注册， 注册，那我现在注册也注册了，引入也引入了，对吧？啊？然后是卖套盒，买班证，买，看，这还买福字啊，四个，那四个，那我接下来呢？接下来要干什么呢？就是用动态组件康复的标签啊，来实现显示刚才的那些 组件啊。那科目呢？是他有一个属性叫 e 字，对吧？ e 字，比如说我这个 e 字等于 mate， 咱看一下现在的效果啊，这是咱那个 mate 没写东西呢，是吧？ sunprahe， 这个叫 mate， 然后写个 stele， ste， 这个是包墩一片手里的 rap， 呃，写个灰色的黑色啊，然后再写一个，呃，高度是一百 像素，然后看一下现在效果啊，哎，换成手机效果，卖 top 有了啊，对吧？卖 top 有了，然后呢？我现在，我现在在回到这个 app 啊，比如说我现在想显示卖 top， 买单的，然后买强劲的，然后买福气 啊，那这个组件 come on 的呢？他可以写个义字，义字等于谁呢？等于咱们那个想要的组件 come on 的，买套房，买 单点，买康定点，还买福卷，哎，咱们现在都有了，但是咱现在想实现什么功能呢？刚才说了，我希望通过这个数据数据来实现，所以说我刚才那个代码是写死的，那我就可以用这个利是他来实现一个便利，便利之后呢？把利是他里的数据呢？给他显示出来。好，那咱再回来 就写一个康不能陈，写个康不能陈，然后呢？我这里写一个为父，便利谁呢？便利这个 立死他，对吧？艾特姆因立死他，然后这个艾特姆呢？就是咱想要的组件了，弄一些艾特姆，然后这里写一个绑定属性啊，然后保存，然后看一下现在的效果啊， top， 斑点抗性的服务题 top， 对吧？然后我现在只需要改变数据，比如说我现在数据变了啊，我是 vip， 我不想看斑点 删掉，而且我只想看两个套盘，我喜欢看两个套盘，然后回来斑点没了，对吧？然后我想看一个套法在上面啊，一个福特也在上面，对吧？咱 vip 嘛，就个性嘛，我想咋设置怎么设置 啊？福特在上面啊，两个套吧，没有斑点，然后一看福特在上面啊，那通过这种方式的话，我们只要到后台去把数据拿过来，就可以自己去组装咱们想要的页面效果，这个就是动态组件的一个共功能了，用数据来驱动视图。

好，看完了哈西模式之后呢，我们再给大家说一下第二种模式， 第二种模式了，叫什么模式啊？ history 模式是吧？先说一下啊， history 模式用于什么呢？打包我们的交付的结果文件。好，然后提供给谁呢？提供给生产环境。部署到， 哎，部署到我们的外部服务器使用。好，注意，是部署了外部服务器，使用这里的外部服务器，比如说 nike sir com， 开塔，阿帕奇等等等等。正能力讲 这个不能理解是吧？等等，好，这个呢，估计大家无法理解， 为什么呢？像这里提到了 ngx topic 的什么服务器的，好像都没见过是吧？ ok， 这么说吧，就是说我们 history 了，打包交付的结果，文件本地没法用， 知道什么意思吧？就是打包好了之后呢，专门交给什么用的？专门交给人家的服务器使用的。 就是说我们在操作的时候呢，哎，打包的结果。首先说一下打包的结果，文件本地无法操作， ok， 本地无法操作， 我们需要配合后端服务器，后端的什么呢？外包服务器来部署，部署才能什么呢？才能正常使用。第二个呢是打包的结果文件我们部署成功 后，在浏览器路径中可以使用正常路径进行访问， 不需要什么呢？不需要这种这种符号了，所以我们说他是生产环境才能使用的。好吧，一般情况呢？如何操作呢？我们同样需要在项目中添加什么呢？添加打包的一个配置文件， 就是我们 pro 零一下面呢，添加一个，呃，哎，添加一个 voe ctrl vga gs， 但里面写了代码呢，和我们刚才写了代码会稍微有点差异。 有点什么差异呢？不能写这个了， party pass， 一般情况呢，直接写一个什么呢？迪斯塔 好，通常呢写这样的一个绝对路径，如果大家呢，想打包后的这个文件名称呢？想改成其他名称也可以。好吧，一般呢，比如说 pro， 零一斜杠， apro， 零一 rote 什么呢？迪斯塔这样呢，去修改就可以了，这是第一个地方需要修改。 注意，这是第一个地方需要修改。另外呢，项目中需要修改我们什么呢？需要修改我们的路由模块， src， root， 下面一代写 gs 添加什么呢？基础访问路径 好，这两个东西都是需要大家去了解的，但是不需要大家去掌握它啊，记住，网红路径呢，这里再加一个什么呢？贝斯里面写上和我们 vu econve， 点击 s 里面配置的路径一 一模一样的路径。好来看好了啊， 对，把这个路径加上之后呢，我们就可以执行打包了。好吧，执行打包命令的时候就是 npm 让标的，然后呢，打包的结果文件我们本地使用的时候呢，是没法怎么样呢？没法操作的 来 ntm 好，把这个哈西拉注视掉， history 打开， 然后呢，让掉他啊，重新用行一下啊 啊，少了个逗号是吧，来，把它先停下， 停下之后呢，这样子，咱们 呢把刚才打包的这个文件呢，先给他怎么样？先给他备份一份，然后压缩一下。 好，这个呢，咱们的加油下划线是由哈西打包的，然后呢，我们在 history 再打包一下。 好，上面这个加个注视， 下面这个打开加个逗号。好， history 打包的模式呢？只有怎么样呢？打包的结果文件必须配合什么？必须配合后端的外包服务器 才能正常使用，就比如说将什么将我们打包，结果就是少林一，比如少林一 rotor 迪斯塔下面的所有的文件，然后呢放到什么呢？放到我们的 ngx 服务器上， ngx 服务器的什么呢？三 w 幕录像， 然后启动 ngx 就可以，怎么样呢？启动 ngx 之后就可以通过浏览器直接访问了，浏览器如何访问呢？浏览器访问 hddp local house 哎， logo house 的斜杠，少林一 rotor 迪斯塔 index 的 h 听没有好，就可以这样去访问了。那我问一下大家， njx 访问的时候写了这样一个地址，它使用的端口是多少？ 对，他因为前面是 http 协议，后面没有写端口默认就是什么八零端口。好吧，这个呢，大家如果说有兴趣的话，可以下来之后呢自己试一下， 打开他领带显示贴面啊，大家呢，可以看到他前面的这个 s r c 路径，多了这么一个东西，能看明白吧， 就是因为多了这样一个基础路径，所以呢，当他再到什么呢？再用我们的本地的这个打开之后，大家会发现什么东西都没有，一个空白的页面，打开控制台，他会给你提示什么什么？这些文件都找不到，这个能理解了， 就是本地了，你是没法用的，但你如果说想通过什么呢？想通过 ng 去使用的话，这个是可以的啊，咱们呢把它 打包一下。当然大家如果说想知道 ng 四是个什么东西的话，简单给大家说一下， 百度点 com 其实就是 ngx 点 o r g， 他的一个官方网站啊，就是 ng x 点 o r g 应该是个网站吧，对， 它里面呢，大家可以下载 windows 版的，当然默认是像就是 nils 版本里面的，大家可以下载什么呢？ windows 版本的下载下来之后就是一个可执行文件，一双击他就启动了 访问 look house 就可以直接访问了。好吧，如果想试一下的话，可以下载下来试一下。 ok， 嗯， 那个不行。呃，那个是一个简单服务器，在加载的时候他的一些文件都加载不过来，所以在这一点上大家一定要注意一下，就是我们的这个打包模式， 当然这一部分内容是什么是什么内容，说一下这一部分内容是什么内容。了解内容，就是知道说。哎，我们呢以后这个模式是用来做什么的就可以了，没有必要说大家自己会去写他。当然呢， 哈西模式建议大家自己可以操作一下。好吧，操作一下之后就知道啊，还可以这么来干。 ok， 好，现在这一部分内容呢就先到这里了啊。

element plus 是基于 vivo 三的组合式代码风格进行开发的，所以我们几乎没办法通过继承来修改或者定制化它的组件， 所以呢这种情况我们就只剩下一条路，就是我们基于他官方的原代码进行二次开发，顶多呢就是我们定期的合并他官方的发行版。其实很简单，首先呢我们先把他的原代码克隆下来，这块我已经克隆好了，在这里哈。然后呢我们先做一件事，就是我们创建一个分支，我这里叫 my 二点三，为什么呢？ 因为大家看他现在的最新发行版是二点三点一四，我们呢就不要最后这个小版本了，我们直接到二点三以后的话呢，我们定期合并他这个小分值，比如他二点三点一五发布了，我们还把他的二点三点一五合并到我们这个二点三的分值里，然后就简单了，我们就任意的改他的原代码就好。 好了，改完之后怎么办呢？我们用 p n p m， 注意它用的是 p n p m， 包括你意思带有的时候，然后 p n p m build， build 完之后呢，我这已经 build 好了，他会生成一个 distant 目录，目录里有一个这个 element plus 目录，这个目录就是未来我们项目需要引用的那个 element plus， 怎么把它引用到项目里呢？我给大家分享三种方式，大家根据自己的情况去选择。第一种呢就是我们把整个这个目录啊 放到我们的项目里边，我这块呢已经放过来了，我建了一个叫 depth 的目录，把刚才那个目录拷 pit 过来，我这已经拷 pit 好了哈，下边这个先不管他， 然后怎么做呢？大家看，我现在用的是一个普通的 button， 就这儿一个普通的 button， 然后呢，大家看啊，我把它原码里稍 稍微做了修改，在这加了三个等号，就是在这个文字前面， slot 前面。然后呢，我现在重新安装一下爱了们的 plus， 用，我打包过来这个安装。首先呢，大家看啊，这块引用的是 官方的 element plus， 我先把它卸载掉 instyle 好没有了，对吧？然后呢，重新 instyle i element plus， 注意后边加空格，点 depth， 然后 ilement plus， 这样就可以了，指向这个目录哈，我们回车， ok， 大家看，这块的路径就变成这样的了，我们再来试一下 mpm 软， 刷新一下，大家看他前面就有那三个灯号了，说明现在用的这个 button 就是我们刚才改过原码的那个 button 了。 那第二个方法呢，就是大家也看到了，我们需要把刚才这个 element plus 目录打包成踏点儿 gz 文件，怎么做呢？就是踏儿 z c v f， 然后呢起个名，然后注意有一个杠大写的 c， 然后呢选中了刚才这个目录，最后有个点注意这个杠 c 很重要，这样的话他生成的这个压缩包中不会有这个 element plus 这个目录，否则的话你在 npm 安装的时候总会爆，找不到 package。 好，这样打包完之后呢，他就有这个文件了哈，我们把这 这个文件放到我们其他的项目里，像这样代不死，然后点踏点 g z， 然后这会我们把这个文件先删掉哈，我们为了测试停一下，然后还是我们先把这个 nstyle 一下，卸载一下 pm， 好，我们重新安装 i element plus， 这回我们点 tar， 点 g z 好，安装好了 m p m run， 我们再来试一下，刷新一下，大家看也是一样的效果。那这个方法相比直接复制目录过来有两个好处，第一就是磁盘空间，我试了一下，他大概节省了十倍的磁盘空间。第二个呢， 就是这种压缩包，我们可以避免不小心修改到里边的代码。第三种方法就是我们直接把这个目录放到公司的 get 私服上面，或者 get up 上面，我这里边拿 get up 举例哈， 我在我的 github 上创建了一个 my element plus， 然后呢，把这个目录直接放上来了，而且我们放上来的时候注意我们还可以 打太个，比如这是二点三点一四，我又加了个点幺，未来我再改就是点二。然后呢，我们还是在其他项目做安装的时候这么做，我还是先摁一下， 然后呢，我们复制 dtap 这个目录， h t t p 的就可以哈， n p m i element plus， 然后把刚才那个链接直接粘过来就可以了，如果你想带版本就加， 加上井号，二点三点一四点幺回车。 ok， 安装好了，大家看格式就自动变成这种 get up 冒号了，大家注意这是 no 的，十六版本以后会是这样，十四版本的话他就不是这样，他就直接是这样，哎，他一直加上一个 tps 冒号 get up 是不是嘛？ 然后呢，我们不管他啊，我们再来 n p m 软一下，我们看下效果刷新啊。对，这个我刚才打包的是两个减号的版本，不是等号哈。

好同学们，大家好啊，欢迎收看跟东哥励志学 vivo 的第一天。那么今天我们来讲讲 mvc 设计模式与 mvm 设计模式啊。 那么在这个东西，这个设计模式其实对你有什么好处呢？就是说不管在你面试啊，或者以后你自己写 bu 的一个项目当中啊，能够了解他的设计模式的话，对你的一个帮助都是很大的，因为他能够让你了解到整体的一个框架的设计模式。之后你不管去写代码还是回答面试官的话，你会有一个全局的概念，能够让你更好地去理解和去设计你的一个项目。 好，那么在讲 mvm 设计模式之前，我们首先要讲一个设计模式，叫做 mvc 设计模式，因为 mvm 模式就是根据我们的 mvc 设计模式来发展而来的。首先我们来看一下什么叫做 mvc 设计模式， 那么在这个时候我们有一张图， mac， 他是一个经典的后端的一个框架的设计模式，那么在这里的话，首先我们有一个试图层对不对？那么试图层的发生改变之后，我们是会通过这个 c 层，这个也也是我们所说的控制层，控制层也叫做 c 层，那么通过他试图层修改之后，通过我们的 c 层，然后将我们的 model 层， model 层的话，也就是我们的数据层进行一个修改，说白了就是这样，什么 让我们的适度层能够影响的修改，能够影响到我们的数据层的一个改变，那么通过的是谁？通过的是我们的 c 层，也就是我们的控制层，而 mo 六层玻璃层，也就是我们常说的数据层啊，这个时候我们的适度层是可以直接就是可以影响到我们的数据层的一个改变，而当我的数据层发生改变之后，他也可以通过 v 层，也就是我们的 vivo， 那么这里我们所有视图上面展现出来的东西都是通过我们这个这一段的代码的一个修改，让他产生一个变化，那么当我的数据层发生改变之后，那么我的 v 层的数据发生改变，也就会影响到我们的数据层的呃，适度层的一个改变，所以的话我们的数据层也就可以影响到我们的呃，适度层， 那么这样的话我们四组层的改变会影响到我数据层改变，而我数据层的改变也可以影响到我们数的四组层的一个改变，那么这样的话实际上也就实现了我们一个双向接听的一个作用，对吧？那么这种方式实际上是在后端方面用的比较多，嗯，以前的话我们做服务器端渲染的时候 是这么做，就是我的所有东西，所有东西不管页面也好还是数据也好，对吧？都是放到服务器上面，那么服务器上面现在有一个页面，它里面需要一些数据，是不是？我去找到我 我们的数据库里面去要，要到这些数据之后再插入到这个页面来，然后再把我这些拿到的所有拼接好，或者说所有处理好的这个前端的页面代码已包括数据等等东西，是不是？然后这个时候再去给我们返回到我们的客户端，对吧？这个时候，呃，但是由于我们的现在阿贾克斯的一个技术的流行，对吧？ 现在所有的这些数据层还需要在服务器端进行一个渲染，或者说在服务器做一个处理吗？不需要。那么在我们前端我只需要干嘛？发送一个请求，然后首先拿到页面的一个模板，模板里面数据我们现在都是空着的，而当我需要数据的时候，我再发送一个请求，对吧？那么这个时候服务器到数据库里面去拿到我想要的数据，然后再通过这个数据返回给我，我前端自己来处理这些数据。 对，那么这个时候我们就不能用后端的这个 mvc 的设计模式，而是用我们前端也急需要一种这样的设计模式的框架，那么这个时候出来的第一个框架叫做我们的 back 包，那么这种设计模式是怎么来的呢？首先这里用户层对不对？用户操作之后，我们的控制层，控制层进行 c， 也就是我们长我们前面说的 c 层，那么 c 层进行 一个更改，更改啥？更改我们的数据？因为你用户修改了数据之后，我是不是首先得修改数据？那么数据被修改了之后，接下来数据可以影响什么？影响我们的四图层，那么就相当用户操作时候，通过控制层将我们的数据层修改之后，数据层又将谁？又将我们的四图层进行了一个修改，那么这个时候如果后续还要再修改，比如说这个时候的话，就是我们的数据层已经能够影响到我们的四图层了，那么当我的四图层然后 被修改之后，我是不是也可以通过我们的 ctrl， 也就是我们所说的 c 层来进行一个管理，让我们的数据层又进行发生改变，对吧？这就是我们前端呃，以前比较用的比较老的一个 mac 的一个设计模式，麦克棒，对吧？ 但是这个地方有一个问题，什么问题呢？就说我的数据层是可以直接影响到试图层的，但是我的试图层也可以怎么样直接影响到我的数据层，那么这个时候我的 c， 我的 ctrl 这个控制层的话，他就会显得非常的薄，为什么很薄呢？我完全可以跳过他，我 不需要经过你是不是就可以进行一个数据的修改，我的数据也完全不需要经过你就可以直接做一个什么试图的修改，所以这种，这也是为什么呃，这种，呃直接照搬，这个就可以理解成是直接照搬了 我们的呃后端的 mvc 的设计模式而来的一个前端的框架设计模式。这个模式为什么就流行起来？就是因为当你的数据或者你的页面量大了之后，那么你的这个控制层可有可无，这个时候你有时候可能通过控制层改，有可能你有时候直接去改，那么这个时候你的数据也好，你的次数层也好，就怎么样，非常的混乱，所以这也是为什么他没有流利起来的原因。那么在二零零九年的时候， 他们的安哥拉，安哥拉是第一个提出我们的 mvbm 设计模式的，呃，一个框架，那么在这里的话，他的适度层和我们的数据层并不能直接的进行一个修改，对吧？那么他们必须要通过一个中间层，也就是我们常说的 vm 层， 那么在这个层里面可以做什么事情呢？又四图层发生改变之后，我先要通知谁，通知我的 vm 这个层中间层，让他去修改我的数据层，那么这个时候就达到了我的四个四图层改变之后，我的数据层也可以改变，对吧？ 那么当我的数据改变之后，我也需要经过什么？经过我们的 vim 层才能去修改我的四组成，那么这就实现了我的数据修改之后，四组成也会发生改变。好，那么这就是我们安哥拉，但是安哥拉之后 六其实相当于六的官网上面他原话，原话有一段话就是说的他的 mvbm 设计模式并没有完全照搬安哥拉的这种 mbm 设计模式，他实际上还是为了方便操作，允许允许一些某些啊。这个我们在后面的课程当中会去讲到某些视图层直接去操作数据层，数据层直接操作视图层，但是我们尽量的不要去采用那种方式， 为什么呢？因为这样的话也有可能会产生我们前面说说的那种数据和数数组成的一个混乱效果，对吧？那么在这里六单中的 mvbm 是什么事情呢？当我的六页面当中的四组中发生改变之后，会有一个盗某的世界监听，监听到了之后我就会修去修改相应的数据，而当我的数据呃发生改变之后，我也会通过一个数据的绑定，然后去影响到我四组的一个， 对吧？这样也就实现了我们所呃常说的叫什么数据与视图的双向绑定，这就是我们 vivo 当中的 mvm 设计模式，那么为了印证这样一个说法的话，我这里给大家准备了一个例子，在这里的话，首先我是通过直接的导入的这种方式，我并没有直接呃通过那个 vivo、 pag 等等这些构建 的方式，这个我们后面也会想到这里的话，为了举例子，所以简单简单一点，那么在这里我们首先创建一个容器，给他来上一个 apapp， 好，在这里面我们还要去通过我们的 squitter 创建我们的一个 app， 等于这个东西的话，大家现在不用看懂啊，因为我们这个后面，嗯，都会跟大家讲到的 app 好，然后在这里面有个 ata 一个 message， 好，那么这个 message 的话，也就是我们所说的数据层，或者说这个 get 里面的东西，也就是我们常说的数据层，而这个地方就是我们的仕途层，对吧？在这里我们的数据一般是从服务器请求过来的。这个地方的话，我为了给大家举例子的话，我们先简单一点，直接写个例子， ctrl word， 好吧，好，然后有了这个东西之后，我相当于数据层已经呃创建好了，对吧？在这里写一下，这个叫做创建数据层， 数据层啊，这个叫做农农品，也就是我们所说的试图层，试图层好，然后在这里数据层和试图层都有了之后，我是不要把他们两个进行一个关联，我们用 a p p 来这里开始写上注册关联，将试图层、 事故层与数据层进行关联好，然后 a p p 点上一个 alt， 也就说也可以称之为帅人吧，那之后我们后面再去解释啊， 好，然后渲染完之后，他就会形成一个中间层，也就是说我们所说的 am 层，你看好，现在我们在这个地方，我们是要运运用到我们这里面的数据，对不对？那么这个地方有一个比较著名的他的双按胡子语法，对吧？哈喽，呃， message message， 好，然后这里再来上一个音符，为了方便让大家看到，那么这个地方大家先不用去理解他，因为我们这里只是想给大家举例子，让大家能够看懂他的一个双向操作，一个四度层，一个数据层以及我们的数四度层和数据层进行一个关联，那么在这里我们来看一下刷新 可以看到我的 message hello word 是在这里数据层的类呃，数数据层的东西是不是已经在我的视频进行一个展示，而我这个地方是不是拿到的也是我们的数据层的内容？当我进行一个修改之后可以看到怎么样？我的这个视图层是不是跟着发生改变了？而且我们能够在这个地方点上一个 free， 哦不， mesh， 能够看到我们的 hello word 是不是也被数据层的呃内容是不是也被改变了？那么就相当于我的四图层是不是可以影响到我的数据层了？而现在如果直接修改数据层，对吧？把 hello word 给它改成，哈哈哈， 那么这个时候你再来看一下我们的速度层会不会被他所影响，对吧？能够看到他是被影响到了，那么这个时候就证明我们的呃六的双向数据绑定是不是就是 ok 的？好，那么今天给大家讲的东西就是我们的 mvbm 设计模式六当中的 mvb， 呃，六当中的 mvm 设计模式，对吧？

大家好，今天给大家讲一下通过 uv 如何来配置多个环境。像我们知道一个项目开发中不可能只有一个生产环境和一个开发环境，像有些项目复杂，我们可能也还会多一个测试环境，第二还可能会多一个预开发环境。 像 uvi 他用假日就进了一个项目的时候，他只是会有两种环境，一个就是生产环境，一个就是开发环境。看我们这里一个 sir 和 beautiful 对应的就是用的一个开发环境， beautiful 就是用的一个生产环境和配置。看我们这里面有一个对应的两个文件， 但是 una 的脚手架他是没有升值的，这个我们可以后面给加上，加上他也他就会自动 uv 的，他会自动查找这个项目下面是否有这两个文件，我们看一下，我们如果修改一下这个开发环节，这里 我们可以重启一下项目，看一下这个很简单，其实我们就是取了他的一个黄金配置变量， 稍等一下，项目正在重新，那我们改了项目里面这些文件的时候，不在 src 下面改的时候，我们是要去重新启动这个服务的。 那我们可以看一下这这边的开发环境，对面就是这里开发环境改成一，我们去试一下，还有些情况我们需要，嗯，例如我们有一些接口的地址，我们都需要，可以就可以通过这两个文件来配置，但是我们要记住我们要以 一下划线 abp 开头，例如我们改成，先看一下之前的效果，是吧？这里我们就可以通过预约 app 后扫进去，把这里切换成这个， 我们要重启一下，记住我们其他的一些配置必须要用于一下划线 app， 看到 一边插入使用袋，大家可以看一下，直接可以取单。像假设我们一般我们本地开发都是用的一个可能本地 ip， 但我们 环境可能就要被配置另外一种请求地址， 他就会直接把这个 boss 打挖进去，可以直接到页面里面去，这样我们就可以根据不同的环境去取不同的配置文件。但是还有一个问题，例如我们要加一个测试环境怎么办？其实很简单，我们可以 先在这里加一个，这里我们可以 这种情况下我们就建立了一个测试环境的一个配置。 还有一步我们需要在这边去添加一个带子六的打包，之后直接扣添加一个 model 带子模特两边这样写， 这样我们可以就可以用一个菜色环境这个配置文件去打包，对于我们看效果我们改成 solo， 然后 我们执行一下， 他会用到这个真的特色文件，这样我们就可以特制多， 因为我们还有生产环境情况下，我们也可以再加一个也是同样的处理方式， 看一下效果要不要这样我们就可以直接扔到厕所里面的。

ok， 下一步的话我们来实现一下这个表格的一个分页器的效果啊，我们找到这个样式啊， 样式里边呢有一个叫 pj a nation 的分页啊，我们就找一个这个功能最全的这个一个完整功能的， 然后我们复制一下这块的代码 啊，放到这个表格的下边。 ok， 这块 spa 不要，然后我们给他改一个类名，就叫这个推爆 的 pj nation 啊，然后我们也去给他定一下这个样式，我们先看一下这个样式啊，是在这个下方的位置，那我们把它调到这个右下方吧，右下方的一个位置啊， 这样呢，我们就找到我们的这个共同的样式，然后给他加一下，还是 let table 香的，然后我们可以给他来一个 u 浮动 距顶部的高度呢， 给个十二 px。 好，我们看一下效果。 ok， 然后这个分页呢就到了这个右下方的位置 啊，现在的话我们就针对这个配置，配置微审上啊这几个属性给他添加一下啊，其中有两个这个方法， 然后我们先给他拷贝进来，然后大家这里有两个方法，然后我们也放到这个 message 中， 一个是在这个叶这个塞子发生变化的时候，一个是当前叶发生变化的时候，然后我们可以看一下他这个打印的结果， 那我们打开这个控制台看一下 ctrl 啊，这里有一些报错，我们先 给他加一下，因为这里有几个属性的没有被定义啊，这个看人的配置呢，我们就叫看人的配置，然后我们定一下这个 这个属性啊，想默认给一个空置啊，当天下的话，我们可以默认给个一， 然后呢有个配置赛的属性，这个配置赛的呢，我们可以看一下啊，就是一个这个下拉的选选项啊，可以是一百、二、两百、三百、四百，这个是可以自定义的啊，那我们不需要这么大，那我们可以从十 二十、三十四十啊，三十吧，就三个就可以了，然后默认的陪着下一个呢，我们给个二十啊，总 数呢？总数这个地方我们也要给一个啊，这个地方我们需要通过这个接口，我们需要把接口返回那个头套呢给复制过来啊，现在我们先一会，一会我们把这个纸给复进去啊，我们看一下这个效果， ok， 然后这个下拉呢，就是我们刚才改，改成了这个十二十三十啊，这个总条数呢，就是由这个头条来控制的啊，我们一会把这个接口返回的总数给复复制过来。 ok， 然后呢这个每一块的这个属性呢啊，一共这个总数，然后一个切换这个每页的数数量，然后这个跳页啊，包括这个输入跳页啊，都是有 从这里边的这个雷奥特来决定的。比如说我们把这个头套给删掉啊，保存一下啊，前面这个头套呢就没有了啊，同样的我们把这个塞子去掉呢， 然后这个塞子就这个钥匙就没有了啊，这个根据需要可以进行的适当的增加或者删除啊，然后这个呢是个 翻页啊，是向前一页啊，向后一页，这是个跳页，然后这个是呢这个中间点的这个啊，点击跳页这个啊， 然后我们可以看一下这个跳页的时候呢，他一个输出，我们选第二页，他会输出当前页为二啊，点第四页当前页为 于四，然后我们可以也可以在这输入，比如说输入六啊，当我们点到这个输入框外边的时候，就失去交警的时候呢，他会触发这个跳转时间，然后现在失去交警之后呢，他会跳到这个第六页啊， 然后另外一个呢，是这切换这个每页的这个展示条数，比如说我们切换十啊，他会显示每页十条啊，三十，每页三十条啊，然后我们就可以通过这个呢， 通过这个分页器啊，现在给我们返回的这个当前所处的页和当前所处的所选择这个条数啊，可以去 对应的请求这个后台的指定的数据啊， ok， 我们先把这个头套给他加一下，给一个变量，比如叫头套 cons 啊，然后我们也要给他定一下 头条看看呢，我默认呢给个零啊，一个 car 的配置，然后另外呢还有一个配置 size 啊，这个配置 size 呢，其实也可以，就是也需要得定义出来啊， 因为他也是需要变化的，我们默认是给个二十啊，完了，配置 size 呢，给他复制给过来之后呢，我们再 跳跃的时候啊，就是我们在这每页三十条啊，这就是我们的那个配置撒一次，就是发生变化的时候呢，我们需要把这个这个值呢对应的复制给这个配置撒一次。那也就说呢，我们在这个 size 发生变化的时候呢， 给这个配置 size 收一下值， ok， 另外呢就是这个当前页当前页的这个跳转呢，我们需要给这个卡润特配置啊，这个属性给他做一个复制， 就是当前页发生变化的时候呢，我们给他重新复一下制啊，这样呢就会保持跟这个数据 表格呢啊处于一个同步的状态啊。 然后呢我们再我们看一下这个，先看一下这个效果啊，然后这个头套是零啊，因为是我们这个取取得来的数据，我们看一下， 对，我们这里呢这个 dat 中呢返回了这个吐槽 count， 我要把这个吐槽 count 呢复制给我们这里定义的这个吐槽 count 等于， ok， 我们刷新看一下啊，现在就是总共有七条数据啊，就可以展示出来了。 然后呢另外呢我们把这个切换的时候呢，让他去重新去请求一下我们的数据啊， 我们先看一下这个网络请求啊，比如说我切换二十啊，这现在是没有请求数据的，我们就说正常的话，在这个切换这个条数的时候，或者是切换分页的时候呢，要进行重新的这个数据查询。 ok， 那我们在这个 size 发生变化的时候呢，我们可以钓鱼下这个楼的，对的啊，同样的我们在这个当前线发生变化的时候呢，也可以钓鱼下楼的，对的， 然后我们再看一下这个请求，比如说我们选十， ok， 我们看一下这个参数 offset 零，雷美特二十，那这个地方呢就会有问题，因为我们这个地方呢只是需要去请求十巧，但是我们这里呢雷美特是二十啊，然后我们就可以需要改一下， 改一下什么呢？就是在这个我们 low the data 的时候，调用这个 low the data 方法的时候呢，把这个固定的，把这个直呢给他重新计算一下啊，我们雷米特呢啊，就使用我们这个配置 size 啊， 我们指定每页有多少条，我们就让里面它等于多少。那这个 offsat 呢？就是我们要从第几条开始查呢？这个呢我们需要计算一下，那就是当前页 减一，然后乘上一个，这是 size， 然后这样呢，我们再看一下这个， 这样呢，我们再看一下这个请求参数，比如说我们选十啊，请求的是零到十啊，我们如果选二十是零到二十，然后呢这个这个总页数呢？我修给一个 小的，然后我们可以看一下这个有多个分，多个多条分页的情况啊，比如说我们给一个， 给个两条啊，一样的数据是两条，然后我们的配 塞子呢也给成改成这个两条，那也就说是一页呢，我们只显示两条数据，那这样呢，他这个分页上就会自动的去计算啊，根据这个总条数和每页的这个条数啊，自动会计算去除他会有几个分页， 然后我们可以点一下第二页。 ok， 我们看一下这个参数啊，是从第二，相当是第三条数据， 请求两条，也就说请求了第三条和第四条数据，那我们点第四啊，因为只有七条吗？然后第四页的话就只有一条数据啊， 那我们可以看一下 off 赛特六，雷梅特是二，比如说呢，他是从第七条数据啊，去搜两条，但是数据库呢，只有一条，所以说他只返回这个一条数据啊， 同样的我们可以看一下这个，我们输入二，我们失去焦点。 ok， 看一下，依然是这个当前这个第二页的数据啊， 然后我们可以点击切换一下这个十条啊，十条的时候呢，他会这个重新去计算这个分页啊，然后同样的这个参数呢也会发生变化啊，从第零条到第十条啊， 然后呢我们这里呢需要做一个判断，就是呢在切换配置赛的时候呢，我们可以让他从 第一条数据开叉，也就是让他重新定位到这个第一页表根第一页。 ok， 我们可以给他在这个落地塔中呢长一个直， 正常了，我们可以默认不传，那配置 size 的时候呢，我们可以给他传一个一，那我们在 low the det 的时候呢，就需要判断一下， 用太炮来接受一下，如果太炮等于一，那我们就让这个当前这个页呢等于一，也就相当于让他来从第一页开始重新查询数据啊。 ok， 后边的话，嗯，后边的话呢，我们再说这个啊，一种删除的情况啊，删除之后呢，这个分页会啊该如何去处理啊？一个小的一个 注意事项啊，然后现在的话，这个表格的这个分页功能呢就已经完成了。好了，这节课就到这到这里。

哈喽，大家好，今天给大家分享一下怎么在生产环境啊，部署我们呃前端打包好的 voe 的项目呢啊，首先我们准备一个这样的 voe 项目，我这已经写好了 啊，这个 voe 的项目其实比较简单啊，就是请求后台的一个商品列表啊，然后把这个商品列表打印出来啊啊，请求的是 api 的估值历史的接口啊，我们可以看一下啊，这个估值历史的接口啊，这个估值历史的接口比较简单，我们直接返回了一个商品列表啊啊， 然后我们启动一下这个 vivo 的一个项目啊，我们看一下效果， 我们让 因为把它启动起来啊，这个是五幺七三，我们打开一下看一下， ok， 可以看到这个商品列表已经正常加载出来了，包括这个后台的一个接后请求啊，他也是正常返回 ok 的啊， 然后这样一个项目啊，我们写好之后啊，我们要部署到我们的一个生产环境啊，怎么部署呢？嗯，首先第一步呢，我们先把前单项目做一个打包啊，打包的时候执行 n p n round build， 用 pdr 装 build 的时候，他就会把整个 voe 的一个项目啊打包成一个静态的一个资源啊， 可以看到啊，他新版使用的这个 white 啊，打包工具以前的话都是默认使用这个在 v o r 的时候啊，使用的是 web park， web park 的打包速度啊，比较慢啊， 现在 vivo 三的时候默认已经升级到 white 啊， white 打包速度很快。然后这个打包完之后啊，他是在这个 diss 的目录底下 diss 的目录底下我们可以看一下啊，在我们当前项目底下已经生成了一个 diss 目录，我们打开之后啊， 我们把这个 diss 目录打开一下，要整个卡哦。 啊，在这里我们打完之后啊，然后我们这个打包好的文件怎么去部署呢？一般的话我们是通过 n g x 的返乡代理啊，去部署这个呃， ngs 这个代理服务器啊，全部是我们这个打包好的静态资源啊。首先我们看一下我们的 ngs 啊，我们我本地是有一个 ngs， 我现在它已经停电了，我们把 n g x 启动起来，本地的这个 n g x 它启动起来 我们执行 n g x star 的这个命令啊，然后我本地的这个 n g 也都启动起来了，大家可以看到啊，这个 n g 已经 打印出来这个幻音页了，然后的话我们刚才打包好的这个目录啊，我们把它这个目录地址记住一下，然后怎么 在 ntx 里面部署这个静态资源的？然后 ntx 去代理我们这个静态资源啊，我们打开我们的这个 ntx 的一个配置啊， 我是在第一盘这个 n g x 底下 n g s 配置，我们调整一下，首先这个是原封 不动的时候的一个场景啊，然后我们把刚才的这个呃打包好的静态资源的目录啊，把这个 atm 给他替换掉啊， 然后我们访问这个根目录的时候啊，他这个 root 啊就指向到我们这个 dist 了啊，然后首页默认是我们 index 的 atm。 二、我们打包好的文件， 打包好的文件里面也是有这个东西的啊，可以看到是有这个 india 的 tmr 的。然后我们弄完之后啊，这个 ng 是要重启的，你刷新是没有用的啊， 这里改完配置之后，我们 n c x 要重启一下， n c 重启的话，我们先把它关掉，关掉，关掉之后这个稍微等个一两秒钟啊，这个已经关掉，然后我们把它再启动一下，已经 启动成功了，我们看一下这个页面的输出啊，哎，商品列表已经 ok 了啊，但是这个商品列表的话，他是发现我们 没有打印出来我们这个想要的一个数据啊，我们刷新一下看一下啊，你看这个接口，他返回来一个四零四啊，你说我们没有找到我们想要的这个估字历史的接口啊，这个时候我们 n g x 还要配置一个接口的一个代理啊，怎么配置呢？我们 location location location。 杠什么呢？我们看一下我们的接口路径啊，是 a p i 杠估字 list 的，我们杠 a 篇， 我们把 a p n 的请求啊全部做一个代理转发， 我们转发到我们这个后台的一个这个接口地址上，八七六幺啊，我们可以看一下这个是呃八七六幺的一个端口啊， 转发完成之后，我们再重新试一下啊，重新这个，你这样再去刷新的话，它是不生效的啊，我们 n g 再重新启动试一下。先关掉， 先关掉，关掉之后啊，我们再启动一下， ok， 启动成功，我们再刷新一下界面。哎，可以看到啊，我们配置了这个呃， proc pass 啊，就是把我们 a p i 的一个接口的一个请求 哇，全部转发到我们后台的一个八七六幺的一个接口上啊，做这样一个反向代理的时候，然后我们看到我们的接口已经正常进球了呀，啊，不会再输出那个四零四的一个，呃， 啊，异常了啊，这个就是我们这个项目，其实这样的话已经打包成功了啊，这样已经打包成功了。 好，最后我们来总结一下，就看一下我们，嗯， ngs 要部署 voe 项目的话，我们要做几步啊？第一步就是首先进行 vivo 的一个打包啊，打包完之后啊，我们在 ngs 上将我们的路途目录啊配置成打包好的一个静态资源目录啊。 然后再一个就是我们要做这个 api 接口的一个代理转发，转发到我们真实的一个猴端接口地址上啊， 做完这些之后，我们 n g 是重启一下，或者 n g 是 reno 的一下， ok， 我们就可以看到效果了。嗯，是不是比较简单的？嗯， ok， 今天的分享就到这里啊，谢谢大家。

哈喽大家好，近两年呢数据可视化非常火，这种比较炫酷的效果 对吧？那么在我们前端开发过程中呢，也会遇到这些数据口罩图表的问题， 那百分之九十左右的数据可视化呢，都是使用我们的一叉二次图表完成的，那么今天呢，我们就小试牛刀，在我们 v v 项目中去使用我们的可视化图表库一叉二词话不多说，我们开始我已经提前搭建好了一个 v v 的项目， 我们有一个 app 点六啊，里面写了一个标题，一个按钮，然后这是我们图表组件引入了在这使用，然后写了一些简单的样式，图标组件呢，暂时还没有，直接写了个空 div， 里面有个图表，我们看一下效果， 这样的一个效果。然后这呢我们用 ex 去实现一个图片。首先我们来到 ex 的官网啊，现在呢已经是五的版本，五点三的版本跟以前四的版本其实差别还是很大的，我们点击快速入门， 然后在项目中使用 exrs， 首先需要安装在你的微域项目中执行这条命令，安装我们的 hrs， 我提前已经安装好了，就不需要安装了。然后引入 exrs， 他这有两种方式，我是用的暗熏引入，因为现在呢暗熏引入的话用的比较多，所以说我们往下看这个暗熏引入，但是他这个暗熏引入其实并没有提示我们在忧郁中如何去用，那么接下来我们就在 没有一种在我们的这个图标组件中去带大家去用。首先引入这些包，我们复制一下啊，因为是按需导入，所以说他会引入很多很多的这个呃，包，包括一些组件，我们直接粘到这个 scree 的标签中，粘到这。 那么引入完了之后呢，他就会去注册这个组件，因为我们只是在这个组件中用，所以说我们注册组件的时候，我们可以选择考虑啊，写到我们的这个 critic 中，我们把这个 export 的 dford 加上啊， 我们再写到 crate 的中，粘贴一下代码，把格式稍微修改一下， 然后下面呢就是去使初始画，我们的图表在这呢，这个 catop 神被省略了，其实我们往上翻，这就是他的 opposy， 那么这个图表其实需要一个 id 为 ming 的一个 dav 标签，我们在这呢把我们这个 div 修改成 min id 等于面，我把图表这个删掉，然后初始画这部，因为需要获取面的真实道美元素，所以说需要我们在 motee 的中去初始画，我们找到我们的身份周期，这写个 mont， 在这粘贴处理化代码，格式化一下这个 option 的话，我们在这可以先创建一个 option， 然后我们这直接写，哦是这个对象，给他复制一下，粘贴到这格式化一下， 然后图表需要有大小，所以说我们给 min 写一个大小，找到下面的 style 请后， min 写个大小， ok， 大小设置完毕。宽六百，高四百，这个随意设置啊，给了一个居中，我们在浏览器看效果， 哎，已经有一个简易的图表效果，这样图表就出现了，生效了。我们简单来看一下，这个是胎头，这是工具提示，然后这个是 x 轴，这是 y 轴，然后这是数据啊，很简单的一些东西。然后我们稍微做一下修改，给他的颜色， 改变一下颜色的话，需要我们先创建一个颜色的数组， 写成字母串就可以快速写一下颜色。数组写好之后，我们需要在啊柱状图这一块这个地方写一个 items style， 他是一个对象，他里面有卡了，然后卡了的值呢，是一个函数会接受一个参数，这个参数里面有柱状图的缩影，我们通过这个缩影把它直接返回就可以了。 然后我们来一个货，防止呢我们的涂的颜色找找不到，这样呢，我们刷新一下， 哎颜色就有了，这样一个简易的图表就制作好了。 但是往往我们在项目中呢，这些数据呢，其实是后台提供给我们的，那么后台的数据我们怎么融会到我们的图表中呢？接下来我们搞， 首先我已经写好了一个后台，用真心思若模拟那个后台，后台的数据呢？我们已经啊摆在这了，然后我们在 app 中去获取这个数据，然后当做 pro 传递给他， 因为以后我们要需要对 exr stem 进行封装，所以说需要什么数据直接传给他人，让他展示注装图图表就可以了。所以在这呢我们对 app 进行处理，写一个 data， 然后在这呢有一个哎呀也是销量的一个数组， 我们打入 axos， 其实以后在项目中 x 封装的，我们在这就不做封装了啊，然后在我们 critic 的时候去获取发请求获取，我就快速写了， ok， 我们写好了，定一个 cx 数组，然后我们使用 axos 向后端发起球 请求回来的数据，因为我们是 excels， 拿到这个点 data 提供给我们的赛亚斯，然后当做 pros 向下传递，叫 data 等于赛亚斯。 我们用利用的是 asvic 和 aiawit 啊， s 型格位的这个一步解决方案啊。然后我们在这个图表组件中接收 pros， 接收 data， 接收之后呢，我们在这个区域，还有这个区域，其实就需要用到我们的这个数据 啊，我们真正拿到的就是一个数组，我们通过慢跑就可以拿到这个啊，慢跑公司内部以慢单本就可以拿到对应的数组，所以在这呢，我们可以把它替换成啊，这是点 data 点慢 i 层简单数 it m 点 g， 那下边的呢？是南北 数量，我们刷新一下看效果， 但是我们会发现图表是不会出现的，什么原因呢？原因是因为我们在 app 获取 图表数据的时候是一步请求，那么向下传递的时候呢？默认传的是空数组，请求回来之后再往下传递，再往下传递的时候 mote 的就不会执行了，所以说第一次传过来的是空数组。 那么此时呢，我们可以在 app 这啊写一个 v 刚衣服，当我们的销量数组 有内容的时候，我们再让这个呆萌出现，没有的时候就不让他出现，我们看效果， 哎，这样的一个图表就有了，这样的图表呢，已经跟我们数据已经联系上了，后端的数据是什么样啊，他就变成什么样的效果。 如果说不写微钢衣服的话，我们怎么办呢？因为在这边 motee 的是首次渲染的时候，那么首次渲染的时候传递来是空数组，你传给他 motee 的不会触发 啊。有人可能会想到 abday t 的， abday t 的其实是组建的 data 发生改变的时候其实也不会触发， 那我们就考虑用什么呢？用这个 vivo 里面有一个 watch， 当 probs 发生改变的时候，我要更新试图， 那我们可以选择考虑使用卧室监听啊。所以说如果你不洗浴缸衣服，可以在组件内部使用卧室去监听，而且接下来我们使用卧室监听也是比较合适的。为什么呢？因为当我要更新销量的时候， 这个数组也会发生改变，发生改变的时候，这个 v e 服他不会变化，因为原来是有内容，我在改还是有内容，所以 v e 服一直是处他一直出现的，但是 money 的也不会是行，所以说我们此时呢还是选择用 watch。 那么咱们去写一个 watch 这个对象监听谁呢？监听我们的 data 写成对象啊，憨到这是一个海人 sir， 然后在这里面监听得他的变化，更新图标。 所以说我们需要把图表在这里进行再次更新。那么再次更新的时候呢？其实一岔子提倡再重新使用赛达博审进行必要的配置 啊，其实还是使用这个图标的赛达不审方法。那么我们在这个函数中要使用买叉，那我们就需要把买叉的定义成什么呢？定义成我们的 data， 所以在这我们写一个 data just my chart 上来等于闹，然后在下面我们定义的时候，这就不是 word， 是 these step my char。 然后下面也是同样道理啊， these step my char side option。 那么在下边我们要更新的话，还是使用这个方式去更新，那么更新的 option 只更新必要就行了，因为数据变，所以说只更新 xldata， 还有这个驻足 data 就可以了，我们把它复制一下， 在这执行 x 周的啊，还有这个 只需要逮他就行了，其他的不需要， 各式画一下，然后我们把这个 v 服先去掉，看效果。 啊，在这里我犯了一个严重的错误啊，东西没出，这是说买菜的阿玛尼 fan 的。呃，原因是因为我这个汉字乐这一块呢，不能写成间断暗数啊，要写成普通暗数，这样里面这次才指向我们的组件刷新， 哎，这样也能出啊，所以说你这边不写 v 杠易服，我们要在这边做监听 watch， 然后我们再测试一下，假如更新了 watch 会不会执行呢？我们也去同样发个请求，把那个事件叫 update， 我们把时间写到下面，同样呢也是一个一步请求 update cells， 时间我们写到 master 的里面，我们就快速写一下。 ok， 我们请求写好了，创建了一个外套，然后呢对我们的 six 进行更新，透视一下，点击更新 cis 就会出发。这边呢，因为我们已经写好了 watch， 所以暂时就不用管我们测试一下效果， 我们点一下更新，哎，这个外套会出现 对吧？这样呢，我们的数据他是能实时更新啊，你随便改变的话，他也会能出执行了，这就是我们比较简单的 叉子图表在微微中如何去使用，当然以后的话图表会进行封装， xos 同样也会进行封装，封装这一块呢，咱们今天就不做介绍了，小伙伴们赶快去试一下吧。

好，这一课呢主要讲内容呢，就是基于 wait 这样的构建工具，在 v u 三的项目中呢，如何去设置代理来解决跨议问题？然后呢咱再顺带角的把 excel 四二次封装以及 a p i 解五呢，都给它顺带一下哈啊，毕竟 excel 四二次封装呢，美公司可能针对于他们需求呢，封装不一样啊，我们这呢就稍微带一下就得。 好，那首先呢，咱们先说第一个事情啊，就是来设置一个代理，那在 wit 中呢，设置代理是比较简单的，我们可以看一下这的一些内容啊，这是我写过的一个文章啊，首先呢我们要找到 wit 点 config 点 g s 这个文件啊，那我把这个参考文章也给大家放到这，这是一个设置代理 啊，解决这个跨域问题，那在公司里边呢，肯定是你要做这个代理，甚至还要做什么这个环境变料，然后以及 xs 工装是肯定的，对吧？ api 结果这些东西是必须的啊，然后这呢就给大家 弄一个参考文章吧。好，那下面呢，我们就按照参考文章呢去设置啊，来，我这样的设置可能是比较简单的，我们就直接去用就行了。那你公司里边呢，可能每一个 api 都不同，对吧？不是，可能是肯定不同的 啊，然后呢，在这呢，你把那个 api 呢给他添加到这就可以了啊，对应的这个网址啊，或者是 ip 啊，那我这添加的是咱们这个学习路线点私人这个网址哈。行，那这样的话就 ok 了，我然后我们把项目呢给大家重启一下，启动完事以后呢，我还会做 xs 二分钟，对吧？那这样呢，我们就新建一个目录啊，是一个工具类。 好在这个工具类里边呢，我新建一个 requested g s 啊。啊，这里边呢就是有关于 x s 二次封装的内容，那我就把这呢整体给拿过来了，那在这呢我强调一下，就是在 v o 三里边呢，它除了新增的什么乱七八糟那 东西啊，那 xs 这块或者 api 这块啊，他并没有一些东西，因为 xs 不是属于 vivo 的，对吧？啊，就是说你在这个上面里边可以去用，你在任何地方都可以用 xs 啊，所以说呢，他没有任何的改变哈，这点大家要切记啊，就是很多小伙伴会问到这一点啊。行，我就把 xs 给他下载一下。 好，下载完以后呢，我们重启一下，那他先下。哎，下载完了哈，那我们这就直接说吧， inpuls， 这不用说对吧？这是创建一个 excel 对象，然后这是一个请求拦截器，我这也没有做一些功能啊，就是大体的一个东西，这是一个架子啊， 然后这是一个响应的拦截器啊，然后你这样呢可能会判断很多的扣的码，那你就自己填就好了，好吧，然后这呢是 response data 啊，返回的一些我们的数据啊，当然你可以按照你的需求 data 点 data 啊，只不过我这样呢是点 data。 好，那么现在呢我们这样呢就，呃把它分装完了，分装完以后呢，在很多公司 里边呢，都会单独再弄 a p m 键，是吧？然后这里边是封装的一些呃，这个请求的具体的东西啊。好，那我这呢随便给大家打开一个接口文档吧，当然我也会添加到我们的课程里边啊，大家到时候直接在课程里边看，在这我给大家演示一下啊。稍等。 呃，我找到咱们这门 real 三的项目啊，在这呢会有一个接口文档，到时候大家点进去就好了啊，我这还没有给大家添加哈。呃，然后呢，我这就随便去找一个测试的就行了，比如说我就拿一个 轮播图吧，好吧，拿这个轮播图吧，因为毕竟他有很多图片啊，然后呢，在这我就新建一个 g s 文件啊， 好，那这就是一个轮播图的一些内容啊，然后把这个整体代码给他拿进去。好，那， 呃，他这个请求的一个 ip 啊，一 api 啊，我给放到这儿啊，然后他的请求方式呢是一个 get， 所以说我们这儿呢就都不需要了，参数什么都不需要啊，然后我把这名换一下， 行，那这样的一下这样的 api 解偶呢，我们就弄完了，然后现在呢，随便的去找一个页面进行一个请求吧。呃，我看一下，在这呢有一个 vivos， 那我就在这个页面吧。啊，咱们跑一下这个网页啊，在这。好， 那你可以通过选项是 a p i 或者 set up 这样去写啊，那我们就直接 set up 了，然后我们要引入的就是这个啊，然后这儿有一个 from， 找到这个路径，第二个要出去，然后是 a p i 下边的。 好，那我们请求的话呢，你可以在很多很多地方，比如说，呃，你是数据一开始要有的，你可以 在 b four 啊， on before mont 里边啊，如果说你是要靠这个第三个插件的，你可以写到 on monty 这里边啊，这个看你具体需求了，那这个呢，就等同于我们在 view 二的时候用那个 before creat 啊，差不多这样的一个内容啊，就是我们到还没有的时候啊， 行，那我们就在这里边去请求吧。啊，那我们先去拿到这个数据啊， is， 好，我们看一眼， 好，在我的控制台里边啊，大家可以看到这里已经有数据，对吧？ i s 点 date 点 list 嘛？ i s 点儿这个 date 点 list 啊，这就是我们的数据啊，一共有六项。行吧，那我们现在就把它选到页面上喽，那这儿来一个 u l l i， 那这里边我就放一个图片儿。 好吧，然后这呢，我们就写一个 steal， 呃，然后这有个 sql 的，那语言我就不写了啊，什么烂萨斯，我就不写了，挺烦的那个版本。然后宽度呢，就百分百，高度呢，咱们就来个二百吧，也别太大了。好，然后这呢，我们就给一会给他写上一个 item， 点什么什么玩意就行了。 行，我现在给他来一个微账号啊，循环一下 item in 一个 list 啊，那我们这呢需要弄一个数据，那这有一个 list， 等于 if 的一个数组。好，然后呢，在这呢给他做一个复值，他的 y 六啊，就等于这个值。 好，那么现在呢，我们这儿呢就可以写 k 了，等于 item 的 id， 是吧？然后这儿呢，就是 items 的什么什么玩意儿？好，我们看一下啊，来，看一下我们这个控台里边儿那个 图片路径是哪个啊？我们找一下啊，这样他有个错误，我先把这个先干掉。 好，此时此刻呢，我们的 l i 肯定会循环很多的。好，我们先看一下我们这儿的这个数据，呃，是 image 幺 l， ok， 那我就直接放到这儿吧。好，那这样的数据呢它就肯定出来了啊，一共有这么几张。 行，那这就是我们这儿呢做的具体的内容。那这儿呢给大家复盘一下啊，总结一下，首先呢我们第一步啊，在这儿呢写了一个 server 是吧？然后呢，这儿有 probacy 啊，设置了一个 a p i， 这是我们的代理。好，那设置完以后呢，我的 a p i 我在这儿呢就可以直接去写了。那当然，这儿呢我们有一个 x s s 工装啊，然后这儿呢会 呃有一个请求拦截器以及响应拦截器啊，那请求拦截器，响应拦截器，这个我就不想了啊，因为，呃，还是那句话，我们课程是从二过渡到没有三啊，必须要二，特别是 游戏啊。行，那在二里边呢，肯定我们要做这个 xss 封装吗？只不过我这就搭了个架，请求和响应来电器里边什么东西都没判断啊。行，然后呢，我们现在再到我的某一个呃文件里边去进行我的请求的接口的这些东西，比如 ul 是吧，可能有参数，你就把它写呗，是吧，没有参数就算了，或者请求方式。 然后呢，在具体的每某一个吧点 vivo 文件里边啊，我们 input， 然后在某一个生命周期里边直接去调用它就可以了。 那么大家可以看出来啊，就是基本上和我们二没有任何变化，对吧？所以说呢，就是请求这一块呢，就还好啊，没有给我们带来太多的一些学习的成本啊。 呃，然后呢，值得说的就是，呃，在这呢大家可以对照着他一些生命周期钩子啊，正常使用，比如说我们要在数据，呃，就是盗墓之前你要用 before mont 是吧？然后你如果要借助了啊，举个例子吧，比如 是吧，你肯定要写到 on monty 的这个生命周期里边啊，所以说呢，你要选对这个生命周期，然后呢，这样呢，有一个 a p i 的参考链接，我也给大家放到这儿吧，省的大家去找哈。 行了，那么有关于师师代理什么乱七八糟这些问题啊，那这节课呢，就先说这么多。

好，这节课呢，我们要说的是路由啊，就是那个 rooter， 那这呢大家要知道一个点，就是 view 点 g s 呢，它是作为一个核心库存在的，那其实呢， view 的 rooter 或者说呢， view x 啊，都是属于你可以这么理解， view 点 g s 一个插件， 那所以说呢，我们要了解的就是 view router 三的版本和现在四的版本，他们之间有什么样的一个区别，或者说呢，从三到升级到四，具体新增哪些东西？ 第一第二呢，就是在六点 gs 这个 set up 组合是 api 中，怎么去用这个东西啊，就是我们要了解这么几个点，那路由这块呢，无非我们作为使用者来说，最需要知道就是怎么跳转音量对吧，跳转传直啊，传直啊，还有这个导航守卫 啊，动态路由等等等等一系列东西，还有路由的模式是吧？ hitter 哈西模式，这是我们需要了解的，行到这呢，我们就依次去看吧，其实呢改动并不是特别大，那首先呢，我们要看的是 router 下的一点小 gs， 这是我们 router 的一个配文件，对吧？然后呢，它的第一行其实呢和之前就所差距啊，那第一行它是 loser， 然后这儿呢是 created 外 petri， 这什么意思呢？模式对吧？ petri 模式，那相信各位小伙伴呢，也知道它的模式，比如说黑 tree 模式哎，颜值很高的这种模式，对吧，就是 url 好，那其实我们这儿呢是无需写这个杠的啊，不用写， 他默认的就是直接这么一个样式啊，直接这么样式啊，那如果说我们在做后台管理系统的时候呢，我们经常会加一个，比如说啊的命啊，那这时候呢，他的首页就变成了一个 logo hose 的三千，比如说啊的命，是吧？到这里边关于我们就变这个样子， 好，这是我们可能需要去修改一些点，哎，那现在呢，明显是一个黑制模式，如果说我要改变成一个哈西模式呢，大家可以看这个地方的 a p i 啊，就是这是 router a p i， 然后呢他也提供了叫 craterbab 啊，哈西喝水，看到了吧，你可以把这个呢给他拿进来，然后呢在这使用的他，是吧？然后呢我们现在刷新页面，哎，刷新一下啊，大家看是不是加了个井号啊，哎，这就会走哈西的这种模式啊，所以说呢，这块本身改变的并不大，对吧？ 那大家呢，也都知道这种模式存在，那么具体你相中哪一种模式啊，以及它模式区别啊，那在二的时候呢，大家就应该知道的话，这我就不做过多说明了哈。然后呢还要需要提醒几个点，就是它其实呢含有这么几个东西 api， 大家下去呢也可以看看，不过呢，呃，特殊场景下会用到特殊东西啊， 那我们日常开发来说呢，就是，嘿，其实哈气就够用，好，这块呢，我就给大家介绍一下就行了。好吧，这两种模式本身改变并不大好，然后呢还有一个比较重要，就是，哎，跳转呢，对吧？原来我们通过什么 roselink， 现在呢也是一样的，也是一样的，我们可以试试啊，比如说这有个 roselink。 好，然后呢，我们比如说要跳转到关于我们这个页面，那这呢就写一个 to， 对吧？然后这个地方呢是关于我们这个页面， ok 然后呢现在我这拍一点啊就进来了这个地方呢就没改变啊就没改变啊。然后呢你要通过 gs 方式跳转呢也是一样的啊也是一样的。例如啊我这地方呢是有一个 banana 吧啊然后这呢 可以加一个事件啊，我随便写一个啊随便写一个然后呢你可以通过 set up 形式去写啊。好，那我们就跳转。好注意啊那这样吧，我先去写一个简单式 aps 那过去我们怎么去写呢过去我们要写的话呢就得这么写呃 messy 是吧。然后这儿有个 go 然后这个地方有一个 lace 点儿什么 rooter 点 pose 啊 啊跳转到这个关于我们这个页面好来试一下耶。哎也进来了是不是那。呃现在要用 set up 呢，比如说这儿我要写个 set up 注意 set up 里边呢是没有 this 的啊再说一遍是没有 this 的啊。所以说呢我现在 console 类 console log 啊打印 this 呢是肯定打印不出来的啊我们可以看一下。 扎心是吧他这已经给你返回了 itunes 是吧是没有的哎没有的话呢该怎么办呢啊这就是一个我觉得啊挺大的区别了，和之前呢比较大的区别啊，你得这么做呢你这样 import 然后这是呃这个 use 啊，比如说叫 root 和 use rooter from 啊这是 view rooter 啊这么写 ok 那我分别呢把这两个东西说一说哈。 来咱们就列举到这那首先呢这个地方的 root 啊，就是我们原来的类似的多少服 root 好吧这个 root 呢就是我们原来的类似的多少服 root 啊。那这样的话呢大家就很好去理解了，也就意思说我们要用的时候该怎么用呢啊，比如这 go 啊，我把这就删了啊，删 let's go 等于，哎，这是一个函数啊，就显示这个函数，然后把这 go 呢给它 return 出去。 好，然后在这呢你就需要做事情这样的看到啊，我们要用他，对不对？他，那我现在呢先 ctrl 一下啊，他返回的是一个什么呢来看啊，点一下是一个函数， 那么所以说呢他在使用的时候呢，你看插一下 reaction 这个东西，所以你用的时候呢有两种方式，一个是加括号啊，一个呢是弥补一下。哎，这两个呢都是可以的，大家来看啊，他返回东西呢是一样的。好，再来分一点。 咦，这地方加括号怎么没有个返回东西呢啊？我应该要在外面去用啊，那我在这呢先给他写一下 等于。好，我把这个打印出来刷新一下点。哎这呢出现两个东西啊，一个是一个对象，一个这个呢也是一个对象。好，他俩呢几乎是等着二的啊。好走点。虽然是 force 啊，但是呢都可以实现一个功能啊，比如我举个例子啊，那么现在呢 我去 console 一下好点，然后大家看这里边呢它有什么 go 呀， photo 之类的对吧。那所以说呢现在就可以直接什么 poot 然后到这个页面。好，这样的话呢也是可以的，来试一下刷新 点，你看进来了是吧，用刚才那种命的方式呢也是可以的啊，我应该在外面去用。呃算了，我在这换成这个六吧。 ok， 然后到这，因为我要加括号去 这地方要加括号，算了，不加了也是可以，我们把这个也打开吧，你看他能不能跳转啊，刷新点是不是也可以跳转啊？ 所以说呢，呃，就是呃，无非就改变了这么一个点啊，无非改变这么一点，我们要用的时候呢就需要这么用。好，那这样呢，我再声明一下啊，哎，这个东西呢，我要在每个页面，比如说我要传直接时都需要引入一下，能不能像原来我们那个引 pro 的什么 if 之类的别引出来，其实我们先不引就可以了，来试一下啊。刷新点为什么呀？ 因为我们之前安装过一个插件，而这插件呢，我们这配了 view 啊，说白了就是 inpult 是吧，我不管你这写啥 prom， 哎，这个 v 我对应这儿还有一个 input， 我不管你这儿写是啥，哎，但是呢，我有一个这个， 那大家看刚才我写的时候是不是在这个地方有一个 flow 什么什么东西对不对？哎，就是它，好吧，所以说呢我们就可以直接用了，但是你要知道这两个东西啊，如果没安装插件是一定要拿过来，好吧，那几乎没什么区别 来，那到我们的三 w 语法堂呢也是一样的啊，那你可以比如说把这个拿过来，然后到这对吧，然后也是拿这个，或者我们就叫它 roots ok， 来，首先点，哎，你看也过来了，哎，就非这么点东西啊。这个改变，那我就不详细介绍 root 和 root 的哈。这个如果大家做啊 view 二的这个项目，或者说呢，你了解 view 二，那这个东西你肯定是知道他们区别的是吧，一个是当前路由，一个是大对象是吧，这两个是不同不同的一个点啊。好，然后呢再往下呢？还有一些比如说， 呃。就这个导航，所谓啊导航，所谓啊动态路由和之前呢一模一样，你就可以这么去理解啊。原来怎么写呢啊现在你还怎么写？比如说啊，这个 router 点儿 before 是吧？ each， 哎在这地方你该怎么写怎么写 啊。我抗作为一啊，先抗作为一开心啊 before h 哎。怎么不出来 before h。 嗯在 a p 里边儿，比方 enter， 诶，在这儿，呃 rooter 点儿。哦我这写的是有问题的 呃。我先把 rooter 打印一下，咱们来看一下这个 rooter 啊，来刷新。没关系啊，就看这里边的这个内容吧。这里边它有没有，呃比如说它有 after 意识是吧？有个 b for 意识，那就可以这样了。 这一点好，我把这个 com 过去 be for e 是不是写的是对的呀，大家看他是不是返回东西了对吧？然后呢我在这呢我就给他传过去一个东西， 好到这呢咱们打印一下。这有一个，呃我随便写吧，就是我的第一个和第二个以及 nice 我把这三个都打印出来大家看，呃第一个当前是吧，然后这个是 nice， ok， 都是可以的啊。就是这个，呃录 这个导航手背啊也是一样的好，比如我这啥都不写，哎。刚才我写错了啥，到底是是吧，现在就进入不了这个关于我们了对不对？然后你可以 next， 这样的话就可以进去了， 这样就可以进去啊。至于导航首位判断呢和之前一模一样，你就该怎么判断怎么判断就行了啊。这是导航首位是吧？然后呢动态路由，哎。该绑定什么？比如说冒号 id 和之前呢一样，和这一样，所以路由呢，并不会给我们带来很多的学习成本。好吧，就无非大家要注意一点，在 vivo 三中，你怎么去写啊？那你可能会 比如说 use 啊，传值什么的也是一样的，我就不演示了啊，传值也是一样的，这是路由对象啊，你要接收值的话，我们翻这么减点儿，比如说 carry 是吧，那么现在呢，就等同于这么去写啊，好，我们可以 console 哎，有没有参数呢？我把哎这个数角 root use root 写错了， 好，来，再来重新好当前的路由对象， 然后并没有 carry 是吧，那我就不打 carry 啊，当然你也可以传一个是吧？可以传一个，比如说我在这传一个 a c t 等于一啊，我们来看一下，然后在这有一个 query 啊，在这啊，有个 value 是吧？把这打开， a c t 等于一，那么你要拿这个值呢，也可以去拿，就是 carry a c t 啊，那一就拿到了， 对吧？这就和这样写线基本差不多啊，传直还这么传，接还是这么接，无非就是这个对象，我们先要这么去写啊，原因就是三叉里边并没有类似啊，这点大家注意。行了，那么有关于这个路由呢，我就先说这么多了，基本上呢，就够大家去用了，去使用了。好，本节课呢，我就先说到这里。