00:00
最后呢,我们对缪脚手架的配置做一些优化和调整,那么同样的问题一样出现在六脚手架,也就是说我们也需要使用一些UI库。只是对于real脚手架来讲呢,它的UI库用的比较常见的是element UI。当然,在VI3这个版本中呢,他改了个名字叫plus。那么这就是六中最常见的一个UI库了,当然其实还有很多啊,但是我们主要教大家。讲这个element plus的配置。Plus配置呢,在官网中呢,它其实讲到有两个点,第一个就是它可以全部引入,第二个呢,它可以按需加载。两种方式我们都给大家演示一遍。来,首先全部引入,我们先安装element plus。安装成功,我们就可在面点JS中进行全部引入的配置了。
01:03
全部引入,需要引入所有组件和组件的样式,然后安装上。那么我们就可以使用了,那在这里我们往下走,我们引入element plus的所有内容。然后再引入element plus的样式文件,在定义下面有一个indes,是它打包生成的所有样式文件。然后呢,需要在创建之前挂载之后,对吧,去安装这个所有插件。那么安装插件呢?它会全局注册element plus的所有组件,所以你想用的组件都可以直接使用。举个例子。比如说我们用按钮,它的所有组件都是一样开头,比如一样button。通过type来指定它的一个类型,比如primary。好,这样呢,我们可以通过n PM start来去查看我们的这个element plus中的按钮的效果。
02:10
喂,按钮就出来了,没有问题。那么这里全部引入,全部引入的缺点呢,就是它会引入所有组件,以及引入组件所有样式,所以体积会比较大,所以开发的时候呢,Plus呢,还可以进行按需引入。20、引入的配置呢?我们在官方文档中能找到。这里呢,我打开了plus的文档。我们找到这个指南。指南下面呢,有plus一些设计理念啊的一些内容,其中我们来到快速开始。在快速教学史里,它其实介绍了完整引入的用法,以及提供了一些咱们的呃,语法环境的一些提示,代码提示啊。那么我们这里要研究的是按需导入。按需导入,需要用上这两款插件。
03:01
然后呢,我们的配置是WiFi配置,然后呢引入这些插件。使用这些插件,它就能实现按需导入了。我们要做的就是按照他流程走就完事了。来终止我们下载我们的插件。然后呢,复制引入它这个插件的内容。OK,最后呢,我们进行插件的配置。当时呢,我们就完成了这个按需导入。按序导入的话呢,就不需要引入所有的样式和整体的这个组件了。这些就不需要了。然后呢,反而就变成你需要用什么,你单独的引入它,然后再注册它就好了。
04:02
引入组件,注册组件。最后诶上面使用。我们接下来启动啊,R序导入的话呢,这个过程中我们能明显看到我们并没有引入组件的样式,但是它能够帮我们自动引入组件样式。哎,你看按钮效果还是如此。那么这就是按需加载的这个配置。讲到这里啊,不知道同学有没有发现,我们之前在做RA的时候,并没有做这个RA的去加载。这是为什么呢?因为的那个s design啊,它官方文档其实在那个up中有提到。就是按需加载的时候呢,它会加载一些辅助代码,从而使样式的体积变得更大。所以就是,而且它本身的V代码呢也不大,所以即使全部引入也不影响大局。
05:00
也不影响大去,所以第三呢,他就干脆啊,不让你进行按时下载了,没必要。没必要为了省这么一点点体积啊去做一些事情,反而如果你用的这个按需加载啊,假设你用的组件是非常多的情况下,还会超过原的原来的这个,呃,打包后的这个样式的大小。而开发的时候呢,我们的组件一般来讲会比较多,虽然不是全部,但是会比较多,所以啊,咱们的阿里赞官方就觉得你没必要了。就是这个啊。好呃,那么我们再看到这里啊,二期加载配置好了之后呢,我们再看这个自定主题,自定主题呢,在官方当中也有是的。但是这个配置会比较费劲啊,我们来看。那么自立主题呢?这里涉及到一个点,就是在。And plus中啊,它是通过SARS去改变这个主题的一个颜色的,因为它内部是通过SARS去定义的。不管是安利还是安利plus,它内部自定主题都是要去改变啊,它里面库定义的那些变量。
06:05
把变量的颜色改了,那么所有组件用的这个颜色就自然会发生相应的变化。那么怎么改呢?它下面有介绍。这是原文件定义的这个SS变量的一个情况,我们要做的是去覆盖它。覆盖它,那么我们也要定一个这样SS文件,然后想办法去覆盖它。OK,我们第一。好,第一个S,诶,然后在下面定一个element,在下面再定一个。用上官方复制的这个代码。它的做法就是它会选中啊这个element plus中的这个变量的这个文件,对吧,用上我们的配置去覆盖掉它。那么你把这个文件引入即可生效。OK,那么也有一种自动引入的方式,它下面接着跟你讲啊,也可以手动引入,这是可以的啊,它下面呢,还有一种自动引入的方式,我们可以通过SARS的一个选项叫addition no data来去编译我们SARS变量的组件。
07:16
可以去做这个事,那么怎么做呢?下面就有也是啊。我们往下走,用we派,我们要看wepe,我们需要在SARS的这里加上一个这样的选项啊,这个选项就是使用什么呢?使用我们定义的这个SAS文件来覆追加到我们的这个SS中,那么我们因为在后面就会覆盖掉它前面的内容。就这样的,那么SS选项怎么追加呢?我们复制啊来看配置。SARS选项追加需要在这里一样的,我们要进行判断。如果有值的话,我们用对象的形式来搭建这个load,同时它的options我们在这里来指定。如果你是SARS。
08:02
No。那么我们就要给你一个选项了。如果不是,那就空对象就好了。选项呢,就是这个选项。它会往我们的中心追加一个SS文件。那么这里呢,它用上路径别名的用法,这个波浪线的派默认是不识别的,不知道你是什么路径。那么这是路径别人的用法,但是我们开发的时候一般习惯用艾,所以我这里改一下用艾。路径别名需要配置才能生效啊,我们需要在这里去配置路径别名。路径别名的意思就是写路径的另外一种写法,之前我们写路径可能要点斜杠,点点斜杠或者是怎样,那么现在可以使用一种什么形式呢?来?可以使用艾特福,艾特福就代表SC。当然它到底代表什么东东,我们需要配置啊。那么今后我们写路径啊,就可以直接写艾特服了,艾特福就代表src的一个绝对路径。
09:05
所以我们看到上面上面这个目录路径的意思就是去SC下面找下面的animals下面的inex s,把它引进来。是这个意思。好,光这样做还不够啊,还需要用这个插件最终配置一下才能生效。那么这个插件用法呢,还可以说上面这种形式也可以啊,所以上面这种形式也行,上面这种形式的做法就是在我们之前的components里面去加一个import style的写法,代表它会引入S。那么就可以了。就是在我们之前的按需加载的配置里再加个对象,在这里面告诉他我们将来会引入SS文件,那么去覆盖它的样式,那么就可以了。这里是按需加载。的配置,好,这里是自定义主题的配置啊。那么引入。
10:02
那么引入SARS的主要配置都在上面在这里进行配置的,那么这里用上了路径别名,所以我们下面又去配置了路径别名的用法。到此我们这个自立主题就做完了,我们将这个基本的主题色改成了绿色,所以我们再次启动这个脚手架的话,我们能看到咱们的颜色,诶,就变绿了。是吧?那么整个过程中的配置比较复杂啊,所以大家一定要慢点一点点配置,当你配置过一遍之后,将来以后啊,你就知道怎么做的一种方式了。那么这个主题的颜色怎么改呢?它在官网的这上面也要也要注明。对吧,这里就注明它的这个。呃,对啊,这上面呢,就有各种颜色啊,什么danger的一个主要颜色,错误的颜色,衣服的颜色,Running的颜色,经典的颜色,还有白色是什么,黑色什么,在这里都有注明,你只要在这上面按照它的样子去复制过去,然后呢把后面的值改了就可以了。
11:20
好了,到此为止呢,我们就配置好了这个and plus的两个功能,按需加载和自定义主题。那么与此同时呢,我们这个配置呢,还可以有一些优化调整的地方,和之前是类似的。我们可以去配置这个cash。让他打包的时候呢,就是不要全都models打包到一块了,我们可以把view相关的文件是不是打包在一起。对吧,那么同样的。T检测一个正则。
12:06
没事。下面的没有代码。啊,你任意的入代码都行。OK,然后呢,处理你这些文件啊。遇到你这些文件呢,我们打包到一个串卡。那么我们可以来取个名字,就叫view吧。然后最后呢,我们可以指定它的一个优先级。那么群众呢?比如设置为40。然后下面呢,我们可以继续。还有plus。
13:02
对吧,我们这里要改一下element。好打包的名字呢,就叫。干吧,View呢,这里我们也干个创。好,权重的第一节就好了。那么剩下的一些内部这些东西就单独了。这样就OK了啊,这样就OK了,那么将来还是一样啊,如果你有些其他东西打包的,就可以打包也这样拆封就OK了。好了,那么最后呢,我们可以去关闭性能分析啊接,提升打包速度。
14:01
画面性能分析,提升打包速度,同时我们最后呢,这里还有一个小小的优化的地方,就是这个。可以去做缓存啊。那么我们给他一个绝路径,让他缓存一下就好了,可以开启缓存,这样呢,第二次打包速度必然更快。OK,开启缓存。到这里呢,我们就把这个配置呢,全都配置完了。我们呢,从这个element plus配置开始,它的按时下载,自定主题到这些优化啊,我们全都做完了。
我来说两句