Element,是一套基于Vue2.0的UI组件库,利用它,我们可以可以快速开发我们的Vue项目。

    官网网址:http://element-cn.eleme.io/#/zh-CN

    闲话不多说,我们将基于刚创建好的vue-demo项目介绍如何使用Element:

    

    1.使用IDE打开vue-demo项目,下面使用WebStom作为IDE演示   

 

    2.使用命令行安装Element-UI

 

    3. 在项目目录输入npm run dev 运行项目

 

    4.进入项目目录的main.js文件,引入ElementUI组件

    

    5.接下来我们简单来熟悉vue文件的结构:

      Vue是贯彻组件化的概念,页面里每个标签元素,都可以抽象为一个组件,通过多个组件的堆叠布局,最后形成一个页面

其中App是默认的根组件,我们会发现,这个App页面只有一个<img/>图片标签,但是我们的默认首页不仅有图片还有文字,那么文字是从哪里来的呢?

我们如果看看HelloWorld.vue文件的话,会发现首页少了的文字标签都在这里面

其实,HelloWorld.vue文件是作为一个子组件,路由放到了App.vue这个根组件里面,最后形成了我们看到的首页:logo+文字链接

知道了它们的关系以后,我们试着用ElementUI写一个组件,并放到App里面试试效果吧

 

6.首先删掉一些App默认图片代码,删除后得到什么都没有的根App组件,其中<router-view/>是一个路由标签,保留下来:

 

7. 我们新建一个Home组件,结合ElementUI,然后把这个组件挂载到App.vue这个根组件里面去:

 

    8.编写Home组件的路由

 

    9.接着,我们去ElementUI官网里面找个合适的组件,复制代码,简单使用一下:

 

 

    10.大功告成,我们打开网页看看效果:

    以上就是对ElementUI的简单使用,ElementUI这个PC端Web组件库十分的强大,里面组件十分全面也十分美观,而且用法十分简单,只需要知道vue的语法,使用起来非常方便,基于它,我们能快速开发出我们所需要的页面。

 

    ElmentUI是一个PC端页面的组件库,后面给大家介绍一个Mint-UI的移动端组件库,也是一个十分好用的组件库。

    项目源码github网址:https://github.com/aa792978017/vue-demo

    分享一个自己的公众号:JavaUp

Logo

前往低代码交流专区

更多推荐