38_尚硅谷_Vue_UI组件库_mint-ui

好，我们开始啊。那我们看，嗯，本来下一张是，但是中间中午的时候加了一个。叫view的组件库，UI组件库啊。啊，这里面呢，有两个非常常用的UI组件库，大家需要有一个了解啊，一个是UI，一个是element。啊，十安是同一个公司出的，饿了么他们出的，前面跟大家讲说过。前一个呢是用于移动端的element用于什么呢，PC端。我们可以把这个给它打开。这是它的一个主页，那我们那就是开始使用呗，对吧，那这里面有什么中文的2.0，什么英文的2.0，这也没有了，这什么意思。

应该一点几吧，对吧，那我们应该选2.0的对吧，应该选第一个吧。好，下面呢，就告诉你怎么用，那我们就去写一个，写一个小小东西啊，就写个按钮，点击提示一下，看看能不能做。啊，首先得干嘛安装下载是不是啊叫me-UI，那也就是说首先你的第一步应该是需要把me UI给下载下来，是MPM1思啊刚刚C啊me杠什么UI。对吧，点一下按键就可以下载，因为我已经下载了，所以就不下载。对吧？啊下来下来了，好下来下来以后，下面有一个，嗯，有一个基本步骤大家应该能知道，就是实现一个按需打包，还记得吧？啊，这个文档里面也是有的，这个不是，这个有一个quick start，就是快速入门叫你去下载，嗯，在这下面有一个按需什么引入，需要去下载一个包，其实这个包咱也下过。

咱再去实现。昂特莫标按需打包的时候也下的这个包。啊是同一个包，那也就是说大家还需要去下载啊，执行这样一个命令下载对吧？啊，刚才我一下载过，我就不再下载了啊好，下面需要改配置，它的这个配置呢，比安D要简单一些啊比就要简单一些，这里面改谁去了，改那个白板RC。也就是改这个念。改这个文件，那怎么改呢？他说要改成这个，我先把这个复制过来啊，但是呢，你先别急着改，别急着替换说一下。

这里面重点是加了一个什么，加的是加了这样一个配置，实际上是加了这样一个插件的配置。这个要知道啊，重点是加它也其他的是不需要的啊，也不要把以前的覆盖掉了啊，在这里面加一个配置，加一个插件的一个配置，把它加进来。呃，这个插件的意思是在干嘛呀，还记不记得。这个。这个实际上是用上了B的component插件，而这个插件就是专门用于说明按需打包的。大家知道UI组件库里面定义了很多组件，对吧，假设定义了50个。那我可能最多，嗯，很有可能用到十个，甚至用两个，我就用两个。对吧？那你难道把所有都打起来吗？没必要吧，对不对。

这个地方啊，我按需打包针对的是哪个包呢。Meet于Y等于什么意思呢啊？这个地方就在说我们需要自己去营养是吗？不需要样式，它是不是自动打包啊，啊就这么个事。二。那搞定这些以后呢，后面就是一个基本的使用啊，基本使用里面。这个应该能理解啊，就是me里面组件分为标签组件和什么非标签组件。就按照DEMOV里面不也是一样吗？对吧，就写成标签的和不用标签了，说白了是有可能对象也可能是函数。好，下面是使用的，因为我们是个移动端的一个库啊，用移动端所以要先搞一个啊是吧，这个代码咱前面写过。

替换掉这个report接着了。还记得我们引入了一个库叫什么？移动端有一个什么问题啊，事件延迟的问题，对吧，事件延迟啊，这里面引入了一个fast。啊，就实现快速点击的。啊，这代码都不用你写好，那后面呢，我们就要去写一些我们要写的一些代码。那假设啊，来，我们从这个。AP里面啊，我的这个这个这样啊，我把这个这个，因为我看看我的这一个是要备份一个吧，别又把这个给搞了，这实际上是我的什么用的。因为他都写下划线，那我也写下划线的，好把这个干掉。

好，我们就准备在main里面呢去使用啊，这些都不要了啊，这个不要啊，能不要的都不要了，好。我们就准备在AP里面来使用一下那个。Miss UI的库，UI库，那UI库有这么多，看到UI组件这么多，挺多的，非常多，从右边也能看得到它的效果，看到大家还可以点点的可以进行操作，诶这个这个还有这种。啊，都可以点啊。这没问题，效果都在那里演示。好。那怎么用呢？大家看这里啊，这是我们的这个路口结是吧。能看到不因为这里了一个U嘛，在入口JS里面，从UI里面可以引入我想用的插件用的组件嘛。能看到吧，那我怎么去做呢？看到这里我就用一下button啊，Import大括号。

From me UI。没事吧，嗯，Button这个不好的地方，他就在这里面没提示啊好，那官引入供吗。我下面就可以用这个标签了吗？不行，一个概念叫注册成什么标签，那注册的标签以前我们是在哪注册？是不是在组件的component配置里面去注册，哎，那个叫局部注册，这个叫全，下面我要干一个什么事，全局注册。所说的全局注册，就所有其他组件都可以用。能不能那view呢，有专门的注册组件的方法啊，这个名字一看你就知道。Component啊，第一个参数呢，指定的是组件名。就你想用一个什么名字呢。啊，对不对，大家看一下它的这个，呃，Quick star啊，这overview上面有一个使用的例子，大家可以看一下它怎么用的。

那他他在这里用的是它的，它的习惯是都是首字母是MT。Me UI嘛，杠什么八，也就是他的那个组件名的标签名都小写。实际上就相当于大写的啊MT啊大写的B对吧。真的吧，当然你可以这么这么整是一个意思啊。能懂我意思吧，嗯。好，那就按他，他既然都这么用，那你也这么用啊，那关键是我怎么。那这意思是不是在说我应该这么写？对吗？

没问题吧，这不是组件名，这不组件标签名吗？这不是我那个组件吗？对不对啊，他这这这自己写太烦了，他其实是有一个统一的处理，每一个每一个组件它都有一个属性来存的，它的默认的这个名字什么属性呢？很简单那。他之所以这么做，是房子里，你实际上大家应该要知道啊，你说我我我写成擦擦他行不行。也没问题，从语法上是一点问题都没有，对不对。但这样不是不太好吗，对不对？啊，如果你想都统一的用它给你，给你预定好的名字，那你就这么写。那比如说我们还可能有别的组件啊，啊，你看。假设啊，我们这个地方啊，假设有一个we干嘛的。

轮波滑动的来看这个，这不还有点点点吗。能懂我说的意思吧，好，那如果我形容他，那那我一样，那我怎么样去使用呢。嗯，接着注册，那我的那个组件名叫这个，那我的名字叫什么呢。对，就这就这行都知道。可以了吧，嗯。好，那写好以后啊，写好以后下面我们在任意一个组件里面都可以去写这个MT杠八的标签了，对吧？好，那我们就去使用一下，来回到我们的AP，把这些该干的都干掉。对吧，直接来一个什么呢，MT杠八的。怎么看懂啊，这都不要了，这些都不要了。能看到吧，好，那我里面写什么呢？我咋知道呢。

就是我知道我咋知道这个MT点八怎么用呢。啊对，看文档，那下面我们就找到啊，我们的button去看对不对啊，你也不用想啊，搜索一下button就行。是按钮吗？其实跟我们的那个。阿，是很像的。对吧，这里面啊不引入吗？这不是说将它硬生生标签吗？这不都告诉你了对不对。真的网好下面呢，有一个特别属性叫什么。Type，那type等于这个是不是能好一点是吧，其实跟那个你看这搞法一样啊一样的，也就是说我在这里面搞它是吧，那。要显示什么文本，是不是在这里面写啊，跟写按钮一样，假设我们上次叫他始，我叫他始随便来一个啊。能看到吧，啊，接着我还想给它加一个点击监听，让它提示一个小提示，这咋办呢。

这是不是要加点接听啊，我们看例子里面啊，有没有，其实例子里面是有的，大家看这个。这里面说一下这个后面是不是加了一个点native，再说一下它在里面加点，那是啊，说明用的是原声的啊，点击监听，那如果不加了，是用的是他包装的一个点击监听。根据他的这个使用方式，应该是他建议你这么写，那不建你这么想，那肯定不会这么想。啊，其实你这里面加也是可以的啊，就按它那个搞法搞。对吧，那我下面写什么。Noodles。写什么measures，那写一个回调函数不拉倒了对不对，好在这里面我想显示一个小提示，小文本提示，也就是说我想显示一个这样的一个效果，从。

是不是这种咱做过呀，嗯，这个里面这个东西叫什么来着。Toast。对吧，所以这个透视的使用方式不太一样，你看它这么用，说明它是个什么类型。函数嘛，对吧，那这个地方就没有必要在入口文件里引入了，在哪需要就在哪引。这个不懂，那我这里需要吗？那最简单的使用是不是直接把它搞一下。是吗？没问题吧，没问题，那下面呢，我们来去看一下我们的这个应用运行是一个什么样的效果，首先看运行没有运行的8080，好，我们来去打开我们的808。但它跟那个mobile有个不好的地方，就是它没有自动的充满宽度。所以我得自己去稍微写点什么，是不是写点样式啊，写样式怎么好，简单跟正常写怎么写，在这里面你可以用class，也可以用style，我直接来个style啊啊宽度为什么百分百拉倒是不是。

啊，点一下。各位，可也就这么简单。就是它的用法，所有的UI组件库用法都差不多，不是给你定义了一些组件让你去可以直接使用吗？简化你的编码吗？对吧，啊，还是可以用的啊。啊，这个里面呢，都有一些例子啊，都有一些说明，以及这边都可以进行操作，大家可以知道每一个组件都是用来干嘛的，而且他对他的组件呢，进行了一个分类啊。是可以看的出来的。嗯，这下面呢，还有一些，这这是一些什么表单相关的组件，这是一些样式相关的组件，说白了就是整布局的样式的，这还能。

这种这个咱不也用过类似的吗？咱那时候用的什么叫什么名字啊。咱在咱在项目里面用的。显示在顶部的那东西叫什么名字？Level bar是吧，叫level bar，它这里面加hand的随便啊，叫什么都没关系了是吧，这个应该是在那个在在他的这一个A，嗯，这里有一个。这个地方它它那个它那个它诶它这个这个东西。还能固定在这吗？嗯，还挺有意思，大家可以看，包括这种。啊，这个地方，呃，这个模型其实主要是我是PC的模式，这个模型就有时候不太好用啊，是下拉的时候刷新。还有那种什么，你看那图标你就知道什么意思啊，说实话就是你往上面不断拉，它就不断的去加载更多的页，对吧，实际上是分页的效果。

啊，移动端分页效果啊等等挺多的，基本上你要的效果都有啊，还有是这种排字母的，看到了吧这种。你说你要自己做是不太费劲了，对不对，如果用它来做就会轻松很多啊，挺多的，基本上啊，能满足你绝大部分需求。那有人说还有一小部分怎么办，那就靠你自己了，那任何东西都不能让你的工作说我都不用想，直接用它全部搞定。除非你那东西够简单，那还差不多啊。但是已经很不错了，有这些东西以后你你能少写很多布局啊，相关的一些效果什么东西啊，而且整体的整体的风格比较统一。不能说特别漂亮，但至少不会太丑。啊，这是这个，这个应该是比较简单的。