基于Element，快速开发Vue项目

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