Element UI详细介绍
1. Element UI
Element UI 是一个基于 Vue 2.0 的桌面端组件库，主要用于构建快速、简洁的用户界面，Element UI 提供一套丰富的组件和工具，能够帮助开发者快速构建高质量的 Vue 应用，它由饿了么前端团队开发，并且开放源代码。
官网链接: 官网
另外一个与ElmentUI类似提供基于Vue2.0的组件库是
iview
1.1 Vue+ElementUI安装
<!-- 1. 导入css -->
<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
<!-- 2. 引入vue和vue-router-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!-- 未使用vue路由功能可不导入 -->
<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
<!-- 3. 引入ElementUI组件 -->
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
1.2 开发示例
开发一个基于
vue
的弹出框。elementui
1）在
中建立一个基本HBuilder
项目，在项目中创建一个html
页面文件，导入必要的html
及css
文件（即安装）js
<head><meta charset="utf-8"><title></title><!--1. 导入css --><link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet"><!--2. 引入vue和vue-router--><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><!-- 未使用vue路由功能可不导入 --><script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script><!--3. 引入ElementUI组件 --><script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script></head>
2）在页面中加入一个按钮，点击按钮以便于打开弹出框
<div id="app"><button v-on:click="clickme">点我试试</button></div>
3）创建vue实例
var vm =newVue({el:'#app',methods:{clickme:function(){
console.log("此处需要加入弹出框");}}});
3）在
elementui
官方网站上的组件中找到
MessageBox
组件，可以将弹出框的示例代码拷入
clickme
函数中观察运行情况。
var vm =newVue({el:'#app',methods:{clickme:function(){
console.log("此处需要加入弹出框");this.$confirm('此操作将永久删除该文件, 是否继续?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(()=>{this.$message({type:'success',message:'删除成功!'});}).catch(()=>{this.$message({type:'info',message:'已取消删除'});});}}});
注：在示例中使用了箭头函数，及
this
关键字，需要同学们在课后重点了解。
以下是
Element UI
提供的一些主要特点以及组件分类：
2. 特点
- 用法简单：
Element UI提供的组件具有统一的风格和用法，使得开发者能够快速上手并构建页面。 - 配置灵活：多数组件都有多重配置选项，允许定制化以满足不同场景的需求。
- 国际化支持：支持多语言，方便构建国际化应用。
- 响应式：虽然是为桌面端优化的，但是许多组件在响应式布局上表现良好。
- 良好的文档和社区支持：
Element UI有着详尽的文档和活跃的社区，可以方便地解答开发中的问题。
3. 组件分类
Element UI
的组件可以分为几个主要类别：
- 基础组件：比如布局（
Layout）、容器（Container）、颜色（Color）、字体（Typography）、图标（Icon）等。 - 表单组件：输入框（
Input）、选择器（Select）、开关（Switch）、滑块（Slider）、时间选择器（Time Picker）、日期选择器（Date Picker）、上传（Upload）等。 - 数据展示组件：表格（
Table）、标签（Tag）、进度条（Progress）、树形控件（Tree）、分页（Pagination）等。 - 导航组件：菜单（
NavMenu）、面包屑（Breadcrumb）、页签（Tabs）、下拉菜单（Dropdown）等。 - 反馈组件：对话框（
Dialog）、消息提示（Message）、消息弹窗（MessageBox）、通知（Notification）等。 - 其他组件：如工具提示（
Tooltip）、Popover、弹出框（Popover）、轮播（Carousel）、Collapse折叠面板等。
4. 开始使用
为了在
Vue
项目中使用
Element UI
，需要安装它并在项目中引入。以下是一个快速开始的例子：
- 使用
npm或yarn进行安装：npm install element-ui --save或yarn add element-ui - 在
main.js中全局引入Element UI：import Vue from'vue';import ElementUI from'element-ui';import'element-ui/lib/theme-chalk/index.css';import App from'./App.vue';Vue.use(ElementUI);newVue({el:'#app',render:h=>h(App)}); - 在组件中使用
Element UI提供的组件：<template> <el-button>点击我</el-button></template>
5. 注意事项
- Vue 版本兼容性：
Element UI主要与 Vue 2.x 版本兼容，如果你在使用 Vue 3.x，可能需要考虑其他UI框架，或者使用Element Plus，它是Element UI的官方 Vue 3 兼容版本。 - 主题定制：
Element UI支持SCSS变量覆盖和在线主题生成器，可以方便地进行主题定制。 - 维护性：由于
Element UI是一个由社区维护的开源项目，在使用中可能会出现一些问题或bug，在生产环境中使用时，务必要测试所有的用例，并关注官方的更新和通知。
Element UI
因其简单易用和功能丰富而受到许多开发者的欢迎，尤其适合快速构建中大型项目的后台管理界面。
本文转载自: https://blog.csdn.net/cz88888888666/article/details/135705836
版权归原作者 程序员不想YY啊 所有， 如有侵权，请联系我们删除。
版权归原作者 程序员不想YY啊 所有， 如有侵权，请联系我们删除。