134_尚硅谷Vue技术_element-ui基本使用

好嘞，各位，我们进入了V2里的最后一章，咱们来聊聊这个UI组件库，所谓的UI组件库呢，就是给我们提供了一些常用的布局啊，按钮啊，输入框啊，下拉框啊等等这些在网页UI布局里面常用的元素，并且呢，把这些元素以组件的形式提供给我们，我们只需要用它提供的组件，然后你发现结构啊，样式啊，交互什么的就都来了，但是什么事儿啊都不是绝对的，不是说我们用的UI组件库这CSS自己就一点也不写，不是的，人家提供的按钮颜色你不满意，当然可以写点样式去改一改，人家提供的那个交互逻辑太简单了，你也可以写点JS去完善一下，对吧？各位UI组件库呢有两大类，一类呢是移动端的，一类呢是PC端的，在课件里呢，移动端给大家写了这三个啊，就比较主流的，挺好用的啊，一个是还有一个是cube UI，还有一个呢是MTUI，当然了不仅仅说只有这三个，明白不各位就现在来说UI组件库啊，层出不穷，一堆一堆的，各位你就比如说啊，最近就有一个大厂啊的。

终端团队就打造了一套移动端的UI组件库，哪个大厂呢，就是京东啊，它出了这么一个UI组件库啊，叫做nott UI搜一下啊，第一个就是你看这路径，各位nott UI点京东点。com打开，然后呢，我带着你看看啊，它提供的这些组件，我找一个有代表性的啊，来找哪呢？就找这按钮同学看这。感觉到了什么，说老师，我好像打开了京东的那个APP，好像打开了京东的那个网页，是不为啥，所有的这些按钮的设计都是京东风格的，哎，说老师，那这东西我能用吗？当然可以用吗？说老师，那我这不属于偷人家东西吗？同学，不算偷，你这从何谈起呢？是吧？不算偷人家京东的前端团队免费打造的开源的给我们用的嘛，是吧？各位，诶，那这个时候呢，就可能有一些同学说老师啊，这个东西我不想用，用了呀，我就太low了。说老师，你看我自己写的，比如说我也想写一个电商网站，那你说我上来就用这东西，那不知道的人一看还以为京东呢，然后仔细一看，呵，不是京东，瞬间对我这网站呢，就有一种感觉，诶你好像在山寨京东，然后就不想用我这个网站了啊，那也确实是有点存在这个问题，为啥说呢？京东的这套UI同学不觉得辨识度太强了吗？是不白红的这个配色说老师，那以后是不是就不能用了？同学，咱得这么说啊，这个UI组件库适用于什么样的项目呢？同学，如果你是这种项目啊，给大家举这么一个例子吧，比如说这个唯品会。

对，你打开它看一下它的这个主页面啊各位。稍等等他都加载完啊同学你看这些东西什么100%正品八八包忧退换无忧，就这些东西，同学觉没觉得这个颜色呀和整体这个色调其实是经过精心设计的，包括这块和这个对不？各位那如果说你想打造一个高度定制化的这个UI，其实你不太适用于用这个UI组件库，为啥说你能用别人也能用，那就会造成两个网站一看起来，哎哟感觉这个整体差不多是不？你像这种网站各位那咋办？结构一点一点写，样式呢，你也别投机取巧了，也一点一点写，说老师我拿boattrap那样式你能用别人也能用啊是不？各位哎，所以说你像这种，那就是只能是设计师怎么设计，咱们就一点一点写，那CSS这种呢，同学，就是属于定制化的网站，哎，说老师那哪种不是定制化的呢？咱就拿这个举例子，各位啊，在讲路由的时候吧，我给大家呢，举了这么一个例子，就是我们之前做过的一个系统啊，就是高校管理系统，同学你觉不觉得像这种系统啊，对整个页面就不要求高度的定制化，就说白了这东西能用就行，哎，然后你再最好再给我提供一点好的效果，你就比如说这块，哎。

上一页下一页这个页码什么的，哎，整体是绿色调了是不？还有这会儿给我提供一个，诶整个这个导航对不对？哎，展开的这些是黑色的，收起来的是暗灰色的，哎就这些东西，同学适合用啥UI组件库，你体会体会，你还真以为我这系统这些东西都是自己写div，写SPA u Li Li什么样式啥写出来的呢？不是各位全是UI组件库拖出来的，一点一点拼出来的是不？各位哎，所以说你得找好自己这个定位啊，不是说说什么网站都能用的，OK啊，这是京东的这个，然后回到课件里，同学除了这个移动端常用的这三个还有什么呢？还有PC端的这个UI组件库啊，那说到基于view的这些UI组件库啊，就不得不提一个人了，谁呢？就是element UI这个东西呢，是我们国产的一个啊，是由饿了么这个前端团队所打造的这么一个UI组件库，同学，UI组件库一说，你比如说啊，你跟人说了这么一个UI组件库是吧？ABC的UI组件库不错，人家马上会问你两件事儿，一，这个UI组件库是基于哪个技术的？

大家要知道啊，组件这个概念是有了前端框架之后，什么angle view之后才有的组件这个概念，所以说你跟人家一说，哎，说ABC啊，那个组件库不错，人家马上会问你一个问题，问你啥问题，哎，哥们儿，你说的那个UI组件库是基于哪个框架的呀，是啊还是还是等等什么其他的，对吧？第二个人家会问你的问题就是你这个东西是P端的还是什么呀，移动端的对不？各位哎，这是两个我们比较关注的问题，在PC端基于view啊，比较好用的一个UI组件库呢，肯定是element UI，当然谁也不错呢，这个I view啊，当然了，还有好多好多，各位啊，自己如果感兴趣的话呢，可以查一下，然后大家呢，也可以去这个呃，Github上啊，不断的去找一找，看看有没有更好的，哎，UI组件库这东西同学我给你一个建议，不要去整理什么笔记啊，也不要去死记硬背里边的一些什么东西，因为啊，咱怎么说呢，这个UI组件库你用它的时候直接翻到文档就得了，它就是一个画页面的东西，没有必要去把那些东西啊给它死记硬背是不？各位所以说接下来我讲的时候完全是参考官方。

走，他让我怎么办我怎么办？行，咱们时间有限，不说这些东西了啊，说说他element UI来打开一下走。我给大家的呢，是element UI的这个主页面啊，一上来看这，他说目前啊，你正在浏览的是基于VIEW2的element UI文档，点击这里查看基于VIEW3的升级版本，哎同学怎么样，VIEW1升级它也跟着升级，它得迎合嘛，啊但是当你打开element点了么？哎，点CN的时候，同学你打开这个东西的时候，你发现默认给你的哈，啊虽然有这个提示，默认给你的还是V2的，那就证明目前V2开发用的还是多是吧？诶他这说的就很准确了，各位网站快速成型工具啊，挺好的是吧？来说的很低调啊，来同学打开组件啊，组件你别打指南，指南里面各位他没教你怎么用啊，他在跟你扯一些设计相关的东西，什么一致性反馈性怎么怎么地这些啊，咱们直接打开组件，诶看看他教咱们怎么用啊，首先一上来第一个就是安装，同学是不是得用这个NPM去安装上啊，如果你不喜欢这种方式，当然你也可以low一点，就是借助这个link去引入它的样式，借助这个script的标签，引入它的这个交互的代码。

同学，当然我们不采用这种方式，都在脚手架里了，是不是得用这个，而且人说了嘛，他能更好的和webpa这个打包工具配合使用，那我问各位，我们的view c Li里面用不用白ipac肯定用了吗？啊好了，不墨叽各位把这个呢，给它复制过来，那个杠S我不复制粘贴了，我用的都已经是NPM6了，你写没写那杠S其实已经无所谓了，你不写人家也能写入依赖对不对？各位好，回到我这个里面开一个终端啊，新开一个啊，在这呢给它安装上这个库呢，同学怎么讲，你要网速比较慢的话，还真得等一段时间啊，反正建议各位呢，把那NPM配置上淘宝的镜像下载的能快一点，OK，他呢下载他的，咱呢回到文档里继续去看啊走，然后这会儿咱就直接忽略了啊来往下往下他就给你写代码了是吧，哎，这会儿接忽略再往下没了啊说老师呢，然后呢，然后看这啊快速上手走了，这里边这些咱也不用听他扯，直接代码上见他告诉你第一种方式就是完整的引入element UI，他说在面点JS里面写入如下内容，各位你别那实在整个全都复制粘贴，把你那些东西全都干掉，没必要观察一下同学跟它相关的。

有哪些，其实这东西同学不用他教咱，我还自己不知道，得引入view啊，咱们关注跟这个element UI相关的，这个是不是引入我所下载的那个element UI啊，那这个是啥？是不是引入，你看后后缀哎样式，然后在这儿呢？同学你见到这个了，那你就明白了，Element UI其实是一个view里的插件库，是不是？各位好了，那回到我们的这个m.GS里，是不是安装完了，安装完就给它关掉，回到我们这个min.GS里面，同学接下来啊，我得精简一下了，就把之前啊，咱讲路由的那些东西啊，我都往下删吧删吧，哎，也就是说这这咋了，全都删掉，我就用一个APP就能演示明白怎么去使用，为啥还要再写一个组件呢？是不回到这个点JS里，同学来吧，这些的引入，但是roer不要再引入了，路由器也没有了，也不用再配置了，这块呢，也不用配置roer了，对不对，干干净净的来关掉，回到这个APP里面，这里面呢，我也给它删减一下，不用写这么多啊，这结构呢，只留下这么一丢丢啊，然后在这里呢，各位随便写几个按钮啊，我写一个按钮叫做原生的按钮，咱一会儿把原生的按钮和人家提供的咱对比一下是不是。

哎，各位走input，其实我这儿对比啊，就有点怎么讲就不公平了啊，因为毕竟一点样式都没写，然后和一个精美的UI组件库所提供的那些进行对比，其实是有点不太公平啊，就是简单对比一下啊，来在这儿这块呢给它删掉，删掉名字是APP写完了吧，嗯，回到页面呢，咱看一下效果啊，把这关掉，找到咱之前写的这个刷新，你看最原始的按钮，还有这个输入框，OK吧，嗯，那来看看他教咱咋写啊，回到他的网站里，把这两行给他拿过来复制，放到midin.JS里走，写好注释啊，引入element UI组件库，然后在这呢再写好，叫做引入element UI的样式，但这呢，我说的仔细一点啊，各位，全部样式啊，就是element UI所写的这个样式，有一行算一行，有一个算一个，你全都给它引入进来了啊，那随后呢，还得再写一个就是use啊，最好呢，放在这个生产提示下边去写啊，来写好一个注释叫做应用element UI。

好，OK，完事了吧，同学，就这三行啊，引入element UI，引入样式use一下，好，就这三行写完了，那你就给它关掉吧，回到这个APP点里，或者是任何一个组件里面来吧，各位随意的啊，你去使用element UI给我们提供的这些组件，那在这呢，同学就不用再往下看了啊，我知道下边说了一个更高级的什么按需引入，那是下一小节我们讲的东西，这一小节就是热热身啊，引入完了，配置完了，我得写点东西是不是？哎，找找到哪呢？同学，其实吧，你这随便选，但是我得选啥呢？我得选点，让你一看出来，哎呀漂亮，哎呀好看，你说是不？我得选这来打开这个按钮，同学，这是不够，是不能有点说明性，对吧，你自己选那按钮哪这么好看呀，啊行，来不墨迹了，说老师这些东西怎么写呢，这显示代码。

说老师啊，那你这用UI组件库，我这一天就是复制粘贴呀，诶说对了，就是CV工程师是不UI组件库的使用原则就是你看哪个东西跟你要用的那玩意儿长得像，那就把它扒过来，完了调吧调吧就得了啊说说啊，它这里面呢，一共有几行，各位啊，1234是不是四行，那你发现它底下在写代码的时候啊，一个两个三个四个，你说这说明了什么呢？是不是说明了每一个红色的区域都是一行啊，而且你看这各位，你英文单词但凡好一点，RO啥意思，有行的意思吧，EL啥意思呀，Element的两个首字母嘛，对吧？来同学我们先把这一排给拿过来啊，把这一堆呢给它复制好，回到APP里面在这写一堆缩进的调一下，说老师这就写完了，是的，回到页面看一下效果啊来了，你看这按钮对吧，各位你这多迅速啊，多快呀，而且你看有这个呼吸的效果啊，点击的时候也是，哎，一会儿深一会儿浅的，对吧，这效果多好啊啊这些东西其实你要自己写吧，同学也不难，但是就是耗费点时间是不？各位啊，来回头看看咱粘过来这些代码啊各位，你说人生HTML里面的是不是叫button，人家所封装的这个EL button其实是个啥？各位，其实它是个组件，只不过呀，咱们有些日子不用这种形式写组件了啊，咱一般都这么写，大写的MY完了list等等这些是不是这么去写呀？但你别忘了各位，组件是不是还可以这么写这个组件标签啊，OK EL button，但你回到这个开发者工具里啊，你能发。

建各位啊，你刷新一波，你打开APP，你发现你虽然写的是EL-button，但是到这呢，全给你调成首字母大写的，或者说叫做大驼峰，因为R和B是不是也大写了，咱之前聊过这问题是不？嗯，好了拿回来了啊，那说老师这就是一个简单的使用，就提供点按钮，就这么low也不是各位，如果说按钮你自己写，呃怎么说呢？说呃我轻松而愉快的也能写出这个效果，那接下来我再给你找到这个组件，你自己写起来，那可就真有点麻烦了，谁呢，这找点代表性的啊，就是有一个日期，哎或者时间也行，我就选择这个日期选择框，就这玩意一点，哎出现一个像日历似的对吧，还有这种啊，什么今天昨天这种同学，这你自己写可得浪费一点时间了啊，而且你写的兼容性还不一定那么好，人家设计这些东西的时候，同学你看这小日历啊，这些细节是吧，也挺不错的，来吧，复制代码走各位，哎呀，你得会观察呀，哪块是哪块的是吧？哎，他写的比较完整，你看他的都给你带上了啊，这有1DIV是不？就是左边这个下边有1DIV哪啊，就是右边这是不？各位那我这样先把左边那个给它粘过来，你不用都粘啊，各位你粘过来一个就行了把。

这一堆给它复制回到我们这里啊，然后在这呢敲个回车把它拿过来啊，同学你看这样，EL杠，Date，日期，Paperer是不是选择器的意思，同学，这你明白吧，Type等于data，就是类型是日期，这是啥意思？Place holder提示文字吗？那这是啥意思？Viga model等于VALUE1说白了就是人家能帮你收集你所选择的那个日期，那我们在这暂时不收集，就是想看看我写了这13 14 15、16到底能出现一个什么样的效果，来回到这边刷新，各位一点击走，你看这都来了，而且它做的特别好，就是说如果下方这块产生遮挡了，它会自动的给你形成一些滚动条啊，或者说给你放到一个不被遮挡的位置，它这些东西写的是很细节的，是不？你自己写这些你可费点事吧，OK，各位，这就是UI组件库的一个基本使用，那可能有些同学说老师你就光复制粘贴不行啊，你就比如说这个按钮，我想调整一下它的样式，那你可以去调，各位回到这儿你看看啊，人家刚才给你准备这按钮的时候，你发没发现人家还有这种，就是浅色调的按钮，还有种椭圆型的，还有这种是不，你完全可以参考它的。

这些代码你打开去调一下看怎么写，比如说我把这一排也给它搬过来，这一排啥呢？是不是图标啊啊往下找最后一个就把这一堆全都给它复制再拿过来，然后在这儿呢，我再给你敲个回车吧，然后缩进呢，给他一条观察特点，各位都叫做EL button啊，这个组件名是一样的，说老师那怎么他们的颜色不一样呢？其实颜色呀，是靠这东西控制的，Primaly主按钮就是蓝色，为啥主按钮是蓝色，它咋不是红色绿色呢？因为饿了么的主色调就是蓝色，哎，所以说你发现同学整个它这些设计里面啊，就是所有的主颜色都是饿了么那个蓝是吧，然后你往下看，只有size代表成功，成功就是绿色的，再回来info代表信息，那信息呢，它的设计就是灰色的，那这个警告按钮就是warning对吧，Dangerer呢，就是危险的，你比如说我把这个dangerer也给它改成primary，那你回头刷新，你看危险按钮咋的，它也变成了这个主色调的这个蓝色是不？各位哎，回来把它撤回来走，再看这个图标，图标是咋加上的，各位你说咋加就靠这个呗，是不是？哎能分析出来叫做I。

嗯，肯定是配图标的，说老师这个circle呢，Circle是不是带有圆的意思呀，各位瞧着，把这circle删掉，第一个没circle，刷新一波它就变成正常按钮了，回来你加上再回来它就是圆的按钮，说老师这图标啊，我不喜欢用这小铅笔可以找啊，回到这儿再找哪呢？找这个icon图标，有这么多的图标供你选择呢，但是同学他只说给你选择了一些基本的交互的，你不能说说老师我想要一个什么什么谁的logo，那不行，对吧，他提供的都是基本的，比如说想要这个小印章，那你就把它复制过来，回到这个里边，然后你调一下不就得了吗？把这个给它删掉粘过来，好，回到这儿刷新一波，看小印章就来了，自己去选择这些组件，然后自己呢，去看它官网写的这些东西，然后呢，再跟大家说一下，就是有些时候吧，来找到这个按钮，它这里面确实写了tap啊，还写了icon，但是这个EL button里面一共能写哪些配置项呢？那哪些配置项都是干嘛的，你不能让我猜吧，你不能说，哎得有老师给我讲，说icon是控制图标的，那官方有没有文档告诉我呢？有各位你一直往下滑，一直往下滑，你看同学诶啥出。

看了。Attribute是不是有属性的意思啊，咱就拿这个来说，Icon，人家告诉你了是啥图标的类名啊，而且还告诉你默认值是什么，可选值是什么，类型应该是什么，对吧？当然他没有可选值和默认值，就是人家给你提供的那些，咱再看这个，比如说type，就是按钮类型，你看可选值来了吗？主按钮成功的警告的什么危险的，呃，Info的普通文字的是不是？哎，这是一个详细的说明，任何一个组件都有这些配置项，你比如说给大家找一个特别复杂的啊，谁呢？Table表格，哎，同学可别小瞧这表格，它里边的配置想特别多，而且表格有排序，有搜索，对不，同学你看这滚动条啊，你慌不慌是吧？这么长啊，一直往下滚动，最后啊，一定会有一个API说明呢，再往下，同学来了，你看看table里面都能写什么，这么多同学，你觉得有那个必要说你花一点时间把这些东西全都从头到尾过一遍吗？同学可能说两三周你都过不完，我们的原则就是用的时候用哪个组件了，那就去查哪个组件，咱就这说啊各位，你把一个成型的项目都做完了，都不见得人家这个EL。

2TABLE就这个组件身上的属性你都用过，那都不见得是不位，哎，就是能出效果就可以，你说这些东西用背吗？根本不用，同学，这就是个UI组件库帮咱画页面的，跟view不是一个级别的是不？各位啊，它是基于view的，OK，同学，那这个呢，就是UI组件库的一个基本使用啊，但是这种使用呢，肯定是有点问题的啊，有点什么问题呢？简单跟大家说一下啊，首先回到你的midin.JS里，同学你说现在我用到了几个组件，咱数数啊，这是一个，这是一个两个吧，还有这个啊，还有什么呢？还有这个，呃，这个跟上面都一样了，是吧，也就这么几个，但是同学你用的很少对不对？你引入的呢？哼，我跟你讲，同学就第13句话呀，你小心点，我们之前是玩过这个view里插件的人，那插件能干的活可太多了，同学就第13行啊，你就这么简简单单的use了一下这个element UI，那我跟你说啊，他就把element UI里面提供的那么多个100多个组件全都给你注册成全局的组件了，全都给你注册上了，不管你用不用来吧注册，而且。

单你看这同学，你引入的是element UI里面的全部样式，就正常来说吧，我只引入什么呢？EL EL button，还有这个elda的配ER的样式就可以了，但是在这你却把所有的样式都引入了，同学所有的样式再加上所有的组件，我跟你讲，这就很吓人了，你这个文件的体积目前是大到离谱，朱老师怎么就大了呢？看一下，找到network。

啊，刷新一下，我让你看一个人啊，你看那人有多大呢？同学来就问你，吓人不，在前端领域一个GS文件咱都别说几兆就达到MB的级别了，达到兆的级别了就已经很可怕了。朱老师，为什么会出现这种情况呢？这为什么出现一个GS这么大呢？说一下各位，就你所有写的组件都在这里呢，你写的组件代码都在这里呢，还有就是你所写的那些交互啊，样式啥的，目前来说在开发当中全都给你混在这个GS里啊，正常来说吧，你这个GS就目前来说也就一兆两兆的就差不多，就咱写的那点代码，但现在居然达到了7.2兆，那我跟你讲啊，是因为这个点GS里面混着element UI里面所有的组件，所有的样式，这就不太好说，老师他咋没载进去呢，他咋在这呢？同学你忘了呢，这大哥不是咱们在那个index.html里面通过link形式去引入的吗？是不，哎，所以说他没有在这里，OK，也就是说目前你这么写同学能写下去，但是咋的就是有点不完美，那么时间关系呢，在这儿就不给大家演示太多的这些组件了，而且同学光演示这个组件吧，咋的也挺。

无聊的，所以说建议各位学完咱们这个基础之后，去看看咱们上硅谷的view项目，在那个项目里面，我们大量的去使用element UI里的组件，那个时候才是真正拿这东西干活是吧？各位好，那这一小节呢，我们先听。