ElementUI-----UI框架

ElementUI是由饿了么团队开源的UI框架,并于Vue完美契合。项目地址:https://github.com/ElemeFE/element

项目文档:Element - The world's most popular Vue UI framework

要使用elementui现成的资源,需要在Vue中先导入elementui,将其设为全局组件,然后就可以在官方文档中复制现成的控件代码来使用了。

1.选择需要的控件,点击扩展按钮即可展示前端代码

ElementUI-----UI框架_第1张图片

1.安装elementui:

        cnpm i element-ui -S

2.导入main.js入口函数中:

ElementUI-----UI框架_第2张图片

以上导入方式适用于Vue2中,不适用Vue3,Vue3导入方式如下:

        1.先安装element-plus

                 cnpm install --save element-plus

        2.导入:

ElementUI-----UI框架_第3张图片

组件中使用elment-ui组件的示例:

        1.components中新增组件:projects.vue










        2.将组件导入根组件App.vue中使用









        3.效果:

                点击选择框选择数据后,点击Clear selection,能全部取消选择

ElementUI-----UI框架_第4张图片

示例完毕。

你可能感兴趣的:(前端-VUE,vue.js,elementui)