00:00
那接下来呢,我们使用view整合一下elementum UI来测试一下他们的使用。element UI呢,是我们后来开发里边用的也非常多的一个5U的组件库,它里边呢帮我们抽取了非常多常用的一些组件,比如我们的单选框、多选框按钮等等,有了它就会简化我们很多的开发,那么要使用它呢,首先就得安装上我们这个element UI,那我们呢,使用NPM工具可以来直接安装,或者呢直接引入他们的样式和这个GS文件就行,那我们模块化开发都是使用NP,那NPM呢,我们先来停掉这个项目,我们想要安装我们使用n p m install,那这个install呢,简写那就是NP mi,然后我们来安装什么,我们这儿有element UI,好,我们来安装它。我们来保存一下回车。好,这个安装完成以后呢,包括我们安装的element UI等信息都在pack杰森里边都会有,比如我们这dependency里边element UI我们安装212版本,那要如何使用element UI,我们来看官方文档,在快速上手这里边当我们安装上了以后呢,我们就可以给慢点GS,这就是我们的主程序文件里边,我们将element UI导进来,包括呢,将它的CSS样式也导进来,那我们直接呢,在我们这个慢页面,好慢,这个JS文件里边,我们来导入import什么呢?我们先来写一个from from哪里我们安装了element UI,我们就在这直接来写element UI。
01:31
当然这个组件的名字呢,我们也写在这,比如就叫element UI,好,我们就叫大写的element UI,我们把这个导进来呢,以后还要导入它的样式文件啊,就像这个一样,我们把这个复制上来,Import element UI的这个样式文件,接下来呢,我们就需要使让view使用我们这个element UI组件,我们再来写一行代码,叫view use。Element UI,那此时呢,我们就将element UI呢导进来了,包括我们未来要导其他的组件库,方式都是一样的,我们直接在慢GS里边将这些组件库导进来,我们使用它,那我们后来呢,在任何组件里边就能用了,那举一个例子,在我们这个hello view里边,我们要用element UI的一个功能来抽一个来看一下,假设呢,我们要用它的这个单选框功能,那它怎么用呢?我们直接参照文档,我们发现呢,这有个单选框,我们就直接将它复制上来,诶CTRLC我们一复制这个复制上来呢,我们out shift f代码整理一下,然后这个单选框呢,是EL radio元素,这其实就是element UI抽取的组件,我们用它的这个标签,那VGA model,那就是绑定一个数据,这个数据呢就应该写在data里边,好,这个单选框呢,最终我们会选择上某一个值。
02:48
比如我想默认让它选中这个备选项一,备选项二,我想让它默认选中备选,备选项一,我们这个EL radio里边呢,有一个label属性,它是什么意思呢?我们都可以参照官方文档一直往下翻,哎,在我们这个radio attributes里边,我们这个单选框呢,属性里边有一个label,这个label呢,其实就是我们这个单选框radio的value值,那我们呢,如果想要选中它,我们就可以给它默认负一个值,比如我给一个二默认就会选中备选项二,我来保存一下,我来运行我们这个项目n PM run dev上次停止了,重新启动一下。
03:28
我们来访问看一下页面效果,诶我们点击去hello就会显示我们的hello组件,这里边呢就有两个单选框,备选项一,备选项二,备选项二呢是选中的,我们也可以打开F12控制台,我们来看view监听的这个东西,我们hello的这个组件里边,那有一个name和radio的值,如果我们切到被选项一,那它动态的呢变成我们这个一,这样呢就是一个非常简单功能的体验,接下来我们做一个完整的稍微复杂一点的功能,我们在这快速的使用element UI搭建一个后台管理系统的页面,那我们先来到element UI的文档里边,我们文档呢,这有一个叫container布局容器,在I里面的UI呢,帮我们来写好了几个常见的页面布局,比如呢,我们来使用这种布局,顶部呢是一个导航,我们有侧边栏,还有我们的内容区域,那我们把这种布局呢,我们就复制一个,包括它这儿还有一个实例,那我们来把这个实例代码直接一复制。
04:25
我把它呢全部复制过来,这是我们这个元素,这呢是它的样式,这是它5U实例的相关代码,那我们现在把页面模板我们先复制过来,那呢直接先把它放到我们APP view里边,因为这是我们页面一进来我们应对页面,它是一个ID为APP的div,在慢JS里边配置了,这个div里边呢去来加载APP组件,相当一进来展示它,那我们就将它里边的内容全部替换,注意一定要留temp这个标签,我们任何一个view组件都应该用一个跟标签来包围着,好我把它呢复制过来,Out shift f代码整理一下,我们把页面模板呢复制过来了,接下来我们再将数据复制过来,那么这一块呢,我用实例相关的数据呢,我们把它复制来,我们也放到我们这里边,我们把这个就不要了,好,我们来粘贴过来。
05:22
然后呢,还有它的这个样式,我们也可以复制过来,哎,这是我们这个样式,样式都在style里边,好,我们复制过来。我们来放到我们的样式区。好,我们来保存out shift f代码,整理一下,来看一下效果,我们这个view DEMO呢,现在就展示出来这么一个效果,这是我们侧边的导航顶头,以及这咱们这个数据,包括这一块数据都是怎么展示出来,我们都可以来进行一分析,它的整个EL container是一个大容器,大容器里边呢,我们来看aside,那就是侧边导航栏,哎,它抽取来了,然后呢,EL container那就是我们这边的容器,这边容器呢,它帮我们抽取了一个EL header header里边呢有查看,新增、删除等等这些按钮来,我们发现呢,点一下它确实有这些按钮,然后呢,下面是一个表格,所以我把这个header呢缩一下,下边呢有一个表格在EL man里边,在我们的慢区域里边,这个表格里边呢,要展示很多数据,那如何展示呢?它这一块写法是冒号data塔等于table data塔,那我们都知道这个冒号的语法呢,其实就是V杠棒的缩写。
06:34
也就是呢,它绑定了一个自定义属性叫data,这个data塔的值呢,它关联到我们这个里边,诶我们这个里边呢,Data塔函数返回了一个对象,对象里边有一个属性,这个属性呢就是一个数组,这个数组呢有20个长度,全部拿这个来填充,相当于呢,这个数组里边20个元素都是这个对象,那也就是说表格呢,有20行,但这20行呢,我们没有看见,在这一块便历它怎么就出来了20行数据,那我们就可以参照我们官方文档,我们来到table里边来看一下。
07:09
Table,好,Table这里边呢,我们是这么来写的,我们只要想要数据,我们都是用杠data,哎,我们用杠data注入我们数据的对象数组,接下来呢,我们是在每一个come里边使用proper属性来说明我们要取出数组里边的哪个键作为填充数据,它会自动遍历,也就是说我们这个data关联一个数组,然后呢,我们说清每一列,就用这个EL table c来说清每一列,每一列呢使用prop来指定我们取出数组里边每一个对象的哪个元素的值作为显示,包括呢,我们这个表头显示的字都是什么,比如日期、姓名、地址,这都,这都是拿label来规定,我们这到底能写什么,都全部要参照文档下边的这个写法,我们来往下看。在这里边呢,说明了我们这个表格的属性,用data来绑定数据,它是一个数组,还有表格的宽高等等各种设置,当然这是我们说的这个表格,而我们这个表头呢,是叫EL table column,那我们就来找EL table column来往下找,这有table column的相关东西,我们来一直往上看,它能规定哪些属性,比如Type C呢,能规定这些属性,其中有一个属性呢,就叫label,这是我们表头显示的标题,包括prop,我们每一列到底要使用我们这个对象里边哪个属性的值作为显示,那么后来我们element UI里边的所有组件,大家都参照官方文档,把它的这个实例复制过来,修改相关的配置数据就行了。那我们呢,稍微改造,再加一个功能,比如我们这个左侧的侧边栏,在这儿呢,有一个叫用户列表,我们选项一叫用户列表,来找一下侧边栏的这个选项一,诶这儿有一个选项一,我们把它呢就叫用户列表,当点击这个。
08:59
用户列表的时候呢,才显示这个表格,那当点我们这个选项二,比如我们是hello,那呢就给我们去显示我们hello组件相关的这个内容,好我来保存一下,那这块该怎么写呢?我们来分析一下,我们这个EL麦里边显示了一个table,那这个麦呢,其实就是我们中间的内容区,我们这个内容区呢,是需要根据我们路径的不同显示不同的内容,所以我们把它需要抽取出来,我把这个呢就先注掉,我们把这一块变成一个叫root view,我们以前呢说这叫路由视图,路径一变,这一块会动态替换,那所以说呢,我们接下来把我们这个表格显示的相关内容,这这个功能我们抽取出一个组件,比如呢,我们就放在这。
09:49
右键我们新建一个,我们就叫my table这个组件my table。我们来编写view的单文件组件三要素,先写templ,再来写script,再来写我们这个style那三个模块,那我们后来经常要编写维U组件,我们自己来这么来写太麻烦了,我们可以让Vs code给我们快捷的生成这么一个模板,怎么做呢?也非常简单啊,来到我们这个文档,我这儿呢,有一个叫5U的这一段代码片段,我们大家把这个代码片段呢来复制一下,它能帮我们快速的生成5U模板,好,我来复制一下,然后呢,来到我们Vs code里边,这有一个首选项用户的代码片段,我们来新建一个全局的代码片段,比如叫view,我们回车,然后呢。
10:37
我们将我们刚才复制的那个,我们来粘贴进来。把这个大括号呢,我们就可以注掉,因为我们复制了更大括号,我们直接来粘贴过来,Out shift f代码整理。这少了一个大括号,我们来写上,然后呢,我们只需要来写一个我们这个view u快捷键,它就会帮我们生成这么多的内容,比如我们在这儿举一个例子,我写一个view you,诶,我回车,那整个这个呢就出来了,我来out shift f代码整理一下,那以后呢,我们的所有页面的内容我们放在这script内容,哎,我这都已经写好了,模板我们是export devo一个对象,对象里边呢,我们这个view里边要引用什么组件,使用components属性,包括呢,我们后来父子组件传递数据用pros,后来我们再说,包括我们这个data的数据该怎么返回,计算属性,监听,以及我们方法定义的集合,包括我们生命周期函数,我这都写了一个模板放在这儿,要用到哪个了,给哪个里边写内容。
11:36
这样呢就非常方便,好我来保存一下,我把我们之前表格显示的内容,诶我直接复制来EL table,我复制来,我放在我的my table这个组件里边,好放到tablelt里边,这时候我们这个模板,然后呢,我们table data,我们里边的数据,我们还是一样,把我们之前的要用的这个数据,我也直接复制来,我直接复制到这。
12:01
好,我们呢,在这儿粘贴过来,我们返回我们新的这个数据,这个数据里边呢,有20个这么个数,我们来保存一下,那我们这个组件呢,就写好了,我希望呢,点击我们这一块用户列表,发送table请求来到我们这一块,那我们就在路由里边,诶我们来定义上一个,定义上一个叫pass,叫路径,路径呢你来给我发table这个请求,然后呢,我帮你来展示用户列表,那这个名字呢,展示哪个组件的名字,我们就叫my table,然后我们这个组件components,我们这个组件component要用哪个,我们需要把组件先导入进来,那还是在这import来导入my table,然后从哪导呢?From还是enter符啊,从我们src公路镜下找找我们components,我们所有的组件呢,后来都会写在我们。
13:02
S components下边,然后呢,我们来导入我们的my table这个组件,发hello请求就会展示这个组件的内容。这一块呢,告诉我们有一个报错,那来到我们这个my table里边们来看一下这个报错,报错呢主要是在这,我们把这个样式的这个注释呢,我们来删了,好我们来保存一下。而且呢,我们看到这个CSS load,哎,有说这个功能呢,不支持好,我们先把它删掉来保存一下,那这样呢就好了,同时我们以后生成呢,为了不让它报错,我们也可以在这个view库的模板里边,我们将我们这一块的注释先删掉,好,然后呢,也将这个让SCSS我们来删掉,哎,以后我们生成模板就OK了,好,那这个map table呢,就在这配置好了,我们发table请求来到这,但是我们现在要做的就是我得点击用户列表才能来到这儿,那怎么办呢?我们就来到我们的APP为U里边来找一下用户列表,好,我们要发table请求,怎么发呢?我们就来看一下这个EL menu item该怎么用,那我们可以直接来打开我的官方文档,这个官方文档呢,我们在下边来找到这有一个na menu导航菜单来打开它,它里边呢,说明了这些该怎么用,来我们往下这就是这个导航,这个导航该怎么用呢。
14:28
我们来看一下这个menu相关的这个配置,比如我们呢,Menu这有一个属性,这个属性呢有一个叫root叫路由,路由呢我们这是是否使用我们这个VI的路由模式,如果启用这个模式,我们只需要改这个index,诶也就是我们这的index,它指的路径就是我们要去哪,我们要调整这个menu的参数,那好我们就呢给menu加一个这个route,让它变为true,诶注意啊,这是menu的参数,所以我们来到这个EL menu里边来给它加一个route,我们让它变成true。
15:05
来调整它为处,那调整它为触,以后呢,接下来我们发这个index用户列表,那就给我来到。我们的table这个请求我来保存一下,来测试一下。我们在这儿呢,点击用户列表,我们发送table请求,诶,展示我们这个数据,那点击hello,我们发hello请求,展示我们hello组件,那么在这儿呢,就可以只需要改一下hello来,我来保存,我来点击hello。我们展示hello的内容,点击用户列表展示这个内容,那基本上呢,这就是我们后台管理系统呢需要用的基本功能了,那我们未来呢,只需要编写各种各样我们需要的组件,然后呢,将它们合理的组合使用起来即可。
我来说两句