day05/下午/099-尚硅谷-尚融宝-element-ui入门

好，那么呃，我们通常情况下呢，如果学习view的话呢，就是有两种组件库，一种组件库呢是。MUI这个是基于移动端的UI组件铺，那么也是VIVO的啊，然后呢，它是这个饿了么，饿了么大家都知道是吧，这是送外卖那个公司啊，它的一个开源的啊，基于VI有的移动端的UI店铺，那因为我们现在呢，做的是PC端的一个项目，所以移动端的这个呢，大家知道有就行了，未来如果真要做的话呢，大家可以来参考啊，然后呢，现在我们PC端呢，我们就用这个还是element UI element UI它也是饿了么出品的是吧，饿么是吧？啊所以呢啊，他的这个网址呢，在这个位置我们访问一下。好，他先访问着啊，然后呢，我们来看一下它这个呃组件库里面有什么呢？它定义了一系列的CSS样式，就预定义的，还有呢，就是基本的UI组件的功能啊，比如说我们常见的弹框啊啊或者是呃一些复选框，单选框啊，还有呃一些常见的一些提示信息啊啊表格啊，美化出来的表格啊，列表啊，还有这个表单呀等等等等，都可以在VUI的这个组件库当中找到啊，那这样的话呢，我们来打开这个VI组件库之后呢，你会看到他说的其实就是它的核心功能了，叫网站快速成型工具，能够利用这里面的UI呢，我们快速的建立出来一个网站模型来啊，然后所以呢，这个是它的一个主要的一些简单的介绍吧，然后我们重要要看哪呢？要看它这个组件里面的内容，我们点进去，点进去之后呢，这个里面呢，就有很多就是组件，然后呢，它前面呢，介绍了一些安装的方式。

这个NPM安装的方式，后面我们再说，我们现在呢，还是用这个比较简单的方式，就是用脚本的方式给它引进来啊，那因为如果我们去这个呃，下载这个没有组件的话呢，里面可能呃会有很多的GS文件，包括很多的CSS文件都要一并给他下载进来。

然后所以非常方便的方式呢，我们就直接使用CDN网站上的一个，呃，给我们提供的啊这样的一个呃CDN脚本，那我先来说一下什么叫CDN啊，实际上CDN呢，就是叫做。在我们的这个啊，互联网上啊，其实有很多的区域对吧，比如说中国啊，或者是亚洲啊，什么美国对吧，还有什么，呃，日本东京啊，还有等等新加坡啊等等，就是各种各样的南非不同的地方，然后呢，比如说我们在中国要访问美国的一个，呃，网站的一个地址的话呢，可能速度会比较慢，那怎么办呢？那一般情况下，比较大型的互联网公司呢，会把它的这个应用程序呢，比如说默认情况下，我们的这个服务器呢，是部署在北京的中国北京，然后呢，呃，那美国的这个，呃，有一个用户呢，想访问你北京的这样的一个服务器呢，就会比较慢，那怎么办？它会在纽约建立一个叫做CDN服务器的，那这个我们管它叫内容分发服务器啊，CDN就是内容分发网络的意思，好，那我们建立一个在纽约建立一个服务器，这个服务器呢，完全复制我们北京服务器上的内容啊，相当于我们把北京服务器上的这个内容呢，分发到纽约的这台。

服务器上了，然后这个时候呢，纽约的用户他想要访问这个，呃，北京的这个服务器的时候呢，他不用访问北京的服务器，他直接访问我们的纽约的服务器就行了，那纽约的服务器呢，它会事先呢叫访问我们北京的服务器，把北京服务器里边的这个内容呢，给它同步过来啊，我们管它叫数据的回源，好然后接下来呢，同样在日本的东京，在新加坡。对吧？啊，然后在其他的一些城市，它都有这样的一些CDN的网络存在，那这些CDN的网络呢，都会通过数据回源的方式，从我们北京的服务器上面预先加载。

我们的这个服务器上面的啊，这个程序代码啊，以及一些数据，那当然了，这些东西呢啊，一般情况下呢，我们都以静态文件为主，比如说CSS呀，Javascript呀，图片文件呀啊视频文件呀等等等等啊这些东西呢，这个把他们部署到这个CDN网络当中的话呢，那么还是比较方便的啊，然后所以说这块都做回源啊，会员的话呢，那各地的用户他访问的时候呢，就访问他自己的这个服务器就行了，保证呢我们的访问速度呢，是最佳的，访问效率呢，是最快的好，所以这个就叫CDN网络，那么一般情况下呢，很多公司都会把它的这个脚本呢，放在它的CDN网络上啊，保证我们全世界各地的人呢，在在线访问它的这个脚本库的时候呢，都有一个非常好的访问速度啊，所以呢，这块呢，我们就从CDN网络上来访问我们的这个脚本就可以了，那么啊，我们首先呢，要引入一个link啊，这个是一个样式，这link呢，呃，我在怎么去用呢，我在。

这个地方呢，我们再创建一个文件夹吧，我们再创建一个文件夹，创建一个06UI pro啊文件夹，然后接下来呢，我们把刚才我们做的零五的这个综合实力以及X和view JS啊，给它拷贝到这个零六里面来，好就是这样的，接下来呢，这个零六里面我们重新运行一下这个零六里面的这个例子啊。Open。好，然后呢，在这个零六里面的这个例子里面呢，我们就把刚才我们啊从CDN网络上拿到的，我把那个关了哈，来访问一下。嗯，地址哈，我看一下啊，这个地址。

我们拿到我们从CDN网络上呢，呃，这个获取到的CSS样式以及脚本。所以呢，我们找到这个CDN，然后把这个样式先给它引进来。好，样式呢，我引到had当中，然后接下来呢，我们再从CDN当中呢，拿到组件，也就是说这个脚本库好，然后接下来呢，这个脚本呢，脚本呢我引入到我们的。呃，View要因为它是基于V的啊，这个这个脚本，所以你至少要放在view的后面，那我们要放在这个地方就可以了，然后呢，这样的话呢，就说明我们的组件引进来了，那怎么看是不是真正的引进来呢？还是之前的方式，我们F12看一下我们引的这个脚本。选这个二啊，刷新一下这个页面，看看我们这个后面引的这个。西丁网络上的这个脚本有没有进来用这个这个就是啊，就是element UI里面的脚本是吧啊。

好，那就被引进来了，对吧，嗯，好，然后这个呢，是CSS应该也引进来了吧。CS叫什么名字，现S叫这个丁大CS对吧。应该也引进来了啊。我看一下他在哪呢。在这呢，是不是，所以CSS呢也被引进来了啊，所以这个呢，就是我们引入的这样的一个过程，那引入了之后呢，我们接下来呢，就应该去使用它，怎么去使用呢？很简单啊，在这个网站当中呢，这里面就有这个组件列表，你要用什么样的组件呢，你就使用什么样的，呃，这个组件的一个参考文档就可以了，比如说呢，我就想弄一个，嗯。按钮上去，那这块就有个发散按钮，好，这块就有各种各样类型的按钮供我们参考，那这块呢，有个叫显示代码，我们把它点开，点开之后呢，这是有个默认按钮，我们把它复制一下，复制到我们的页面当中。

比如说在这个div里面呢，我先写一个div div吧，再写一个div啊这个呢，我写一个默认按钮，好，然后我们来看一下，大家看这就是一个默认按钮，长得还不难看是不是啊，比我们自己直接写的这种普通的按钮呢，要好看多了，普通按钮。好，你看这就是普通的按钮了，这个呢，就是我们element UI渲染出来的按钮呢，就特别好看，然后接下来呢，那这个除了这个默认按钮之外呢，还会有一些其他的形式的按钮，主要按钮，成功按钮，信息按钮，警告按钮，危险按钮，实际上他们的不同呢，其实就是颜色不同啊，就颜色不同啊，我们把他们都给他复制过来看一看。

那颜色不同体现在哪呢？体现在它有一个type属性，这里面的type属性都有不同的值，这些值都是固定的，不是我们创建的，不是我们自己创建的，不是我们自己编写的啊，是固定的值，那如果是primary的话，那这面呢，就是蓝色的，如果是success的话，那这面呢，就是绿色的是吧，如果是呃，Danger的话，那就是红色的，Running的话就是这个橙色的等等啊，不同的颜色，然后用不同的type属性来表示，所以这个呢就是按钮了，然后呢，后面呢，还会有这个，你像这样的叫朴素按钮，那朴素按钮呢，相对于上面来说，其实就是样子不一样，那它的区别体现在哪呢？就是加一个plan啊这样的一个属性就可以了，我们就可以把它变成一个朴素按钮了，Plan好，那这样的话呢，其实就是变成一个空心的按钮了啊，空心的啊，然后接下来呢，还有就是你会发现，其实只要我们就照葫芦花屏做就行了啊，然后第三行呢，叫圆角按钮啊，圆角按钮怎么实现呢。

可能就是在我们这个按钮上面能加一个run的属性，它就可以变成圆角按钮了。好，你看这边就变成像胶囊一样的按钮啊，有的时候我们也管它叫胶囊按钮。然后接下来呢，我们再来看啊，除了这个之外呢，我们还可以仅仅用一个图标表示叫图标按钮，那图标按钮怎么做呢？在后面，比如说嗯这款我们给他嗯复制一个哈，这个。好，那这块呢，Circle circle是什么意思呢？这round叫胶囊，Circle就是圆形的意思啊，就是圆形的意思，所以呢，这个按钮呢，它实际上呢，就是一个圆形的按钮了，那圆形按钮里面我还想显示一个图标，比如说这个图标呢，是放大镜，那这图标怎么展示呢？用IQ来表示，然后这里面呢，就会有不同的图标的名字啊，然后都有哪些图标呢？我们来看这里面呢，例子里面呢，还有一些不同的其他样式的图标。

我都把它复制过来吧。好，这块呢，我就给它啊，就是像这些样式都可以组合使用的，所以这个图标按钮呢，我就让它是蓝色的对吧，然后呢也是圆形的，然后呢，这块显示一个编辑图标啊，这块是一个check检查图标，这个是message消息图标，这个呢是start off，叫什么start start off，这个是delete，我们看一看它们分别长什么样。所以这块呢，就是这几个图标了，这是edit check对吧，这个是什么，这是什么来着。Message对吧？Message啊，这是start off，然后这个是delete，所以这样的话呢，我们就非常方便的去展示一些不同的图标，那有的同学说，那除了看这个地方之外，我们还在哪个地方能找到一些参考呢？啊，在每一个组件的最下方，它都有相关的一些参考文档，比如说我们把这个鼠标滚动到最下面啊，这会有个attribute attribute里面是什么呢？就是对这个button按钮的一些属性的一些说明，比如说刚才我们的type，那type里面呢，我们就用了这个primary啊，Success呀，Running danger for text呀这样的一些按钮。

对吧，你看primary success in for war in danger，那如果是text类型的呢，也就是说刚才其实我们在这个文档当中，在这个文档当中看到了还有一个task类型的，那我们把它改成task类型看一看，这个呢，实际上是一个超连接按钮。啊，那我们来看一下这个按钮长这个样子，就是它本身是一个按钮的功能啊，可以定义它具有按钮的所有的特性，但是呢，它的样子是一个超链接的样子啊，因为有的时候其实我们啊页面上要展示的是一个超链接的样子，但是并不想一点它它链到某一个其他的页面当中，而是呢，让它像按钮一样去执行一个什么事件，对不对，所以呢，我们就可以用超链接按钮了，好然后接下来呢，就是还有一些其他的，比如说。

在这里面还有size size呢定义的是尺寸啊，那默认情况下呢，我们这个size呢，就是这个最大的meium叫中型按钮，那么我们还可以定义small，还可以定义迷，所以呢，比如说我们给其中的两个按钮呢，去定义一下尺寸，比如说这个叫size，然后呢，我们给他一个帽，然后这个信息按钮呢，我们size给他定一个。Mini好，接下来呢，我们来看这面呢，就会你看这个就稍微小一点，这个就更小一点是吧？啊，所以这个是定义按钮的大小啊，然后剩下其他的刚才我们都接触过了，比如说play素按钮，Round是胶囊按钮，Circle是圆形按钮，然后loading loading呢就是加载状态啊，看在这个地方呢，比如说我们。

就是有一个叫做，嗯。叫加载中数据加载中好，然后呢，这块我们可以写个loading。大家看这个按钮呢，就变成这个样子了啊，就一般情况下我们来啊加载一个远程数据，这个数据量比较大的话，那可能呢，它要有一个加载的时间，那所以呢，我们就可以把它展示成这个样子，这是loading按钮，另外呢，有些时候呢，我们啊，就是按钮呢，并不是时时刻刻都能够点的啊，比如说一些提交按钮啊，当这个呃，表单当中的数据我们还没有填写完成，或者是啊数据你填写的还不太合法的时候，那我们这个提按钮呢，我就不想让它那个能够提交，我想让他禁用是吧，比如说这个主要按钮，把它变成提交按钮。好在表单真正填写完成之前呢，我想禁用这个按钮，等填写完成之后，我再想办法把它启用了，那所以呢，我们就先给它一个Dis，那大家看这个按钮呢，它就是一个禁用状态了啊，所以这个是disc，那图标这刚才我们说过了，就是给这个按钮上加图标啊，然后当然了你也可以这个按钮上呢，既有图标啊，又有这个，呃，又又又又有文字，比如说这个危险按钮，我们给它加一个图标。

危险按钮。危险按钮在这呢，我们加一个图标叫做icon，好，那这图标怎么加呢？这图标你看这里面有这么多个图标，这些图标呢，也都是固定的，那么在哪找这些图标呢？在这个位置。这里面有个叫爱扣图标啊，我点进去，那这里面就有好多好多的图标了，你看这里面都是啊，比如说那危险按钮呢，我想给他，嗯，加一个什么样的图标呢。

啊，大家注意哈，加我我们这个element UI就是跟我们嗯加载的element UI的版本有关，就是你一定要先看一看你这element UI的版本是什么，因为有的时候版本不一样的话，他有可能就不好使，我们这个是index哈，我看一下我这个版本啊。怎么看这个版本呢，就是F12。然后呢，我来刷新一下页面，然后我进入到刚才我这element us index里面去。他呢，会。我看他好像没写版本哈，写了吗？啊，写了在这块呢，看见了吧，2.15.0看见了吧？啊所以这个我们这个element UI的版本呢，实际上是2.15.0了，那如果是这个2.15.0的话呢，那我们参考的这个文档就可以明白吧，就是你一定要确认你的element UI的版本和这个是不是一样的，因为这里面有很多版本，不同的版本的话呢，它这个里面包括这些其他的功能属性啊，都有可能会有一些细微的差别的啊，所以确定版本，然后确定完版本之后呢，咱们再来找，比如说我想显示一个单坠的图标，很危险哈，啊灯的图标呢。

嗯。我们随便找一个吧。显示哪个好？显示一个这个吧。那个有个闪电这个啊，然后呢，我把它复制一下。好，然后呢，我就把它放在我们的这个单转危险按钮这个图标这个位置，好，然后接下来呢，我们来看这个图标。你看这块呢，就有一个闪电符号了，对不对啊，所以这个还是比较灵活的，所以呢，通过刚才这个例子呢，我们也学会了怎么去找图标，学会了怎么去使用按钮，也学会了怎么去看文档啊，那么按钮的文档是这样看其他的呃这些呃组件的文档其实都是这样的看法，所以其他的这个属性啊，大家有兴趣的话，可以一点点自己去看一看，去研究研究啊，这是element UI的一个入门啊，我们针对按钮和图标做了一个讲解。