梅州市网站制作,建站 备案,环球影城预约上传照片失败,租空间开网站Element UI详细介绍 1. Element UI1.1 VueElementUI安装1.2 开发示例 2. 特点3. 组件分类4. 开始使用5. 注意事项 1. Element UI
Element UI 是一个基于 Vue 2.0 的桌面端组件库#xff0c;主要用于构建快速、简洁的用户界面#xff0c;Element UI 提供一套丰富的组件和工具… Element UI详细介绍 1. Element UI1.1 VueElementUI安装1.2 开发示例 2. 特点3. 组件分类4. 开始使用5. 注意事项 1. Element UI
Element UI 是一个基于 Vue 2.0 的桌面端组件库主要用于构建快速、简洁的用户界面Element UI 提供一套丰富的组件和工具能够帮助开发者快速构建高质量的 Vue 应用它由饿了么前端团队开发并且开放源代码。
官网链接: 官网 另外一个与ElmentUI类似提供基于Vue2.0的组件库是iview
1.1 VueElementUI安装
!-- 1. 导入css --
link hrefhttps://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css relstylesheet
!-- 2. 引入vue和vue-router--
script srchttps://cdn.bootcss.com/vue/2.6.10/vue.js/script
!-- 未使用vue路由功能可不导入 --
script srchttps://cdn.bootcss.com/vue-router/3.0.6/vue-router.js/script
!-- 3. 引入ElementUI组件 --
script srchttps://cdn.bootcss.com/element-ui/2.8.2/index.js/script1.2 开发示例
开发一个基于vueelementui的弹出框。 1在HBuilder中建立一个基本html项目在项目中创建一个html页面文件导入必要的css及js文件即安装
headmeta charsetutf-8title/title!-- 1. 导入css --link hrefhttps://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css relstylesheet!-- 2. 引入vue和vue-router--script srchttps://cdn.bootcss.com/vue/2.6.10/vue.js/script!-- 未使用vue路由功能可不导入 --script srchttps://cdn.bootcss.com/vue-router/3.0.6/vue-router.js/script!-- 3. 引入ElementUI组件 --script srchttps://cdn.bootcss.com/element-ui/2.8.2/index.js/script
/head2在页面中加入一个按钮点击按钮以便于打开弹出框
div idappbutton v-on:clickclickme点我试试/button
/div3创建vue实例
var vm new Vue({el: #app,methods: {clickme: function() {console.log(此处需要加入弹出框);}}
});3在elementui官方网站上的组件中找到MessageBox组件可以将弹出框的示例代码拷入clickme函数中观察运行情况。
var vm new Vue({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);new Vue({el: #app,render: h h(App)
});在组件中使用 Element UI 提供的组件 templateel-button点击我/el-button
/template5. 注意事项 Vue 版本兼容性Element UI 主要与 Vue 2.x 版本兼容如果你在使用 Vue 3.x可能需要考虑其他UI框架或者使用 Element Plus它是Element UI的官方 Vue 3 兼容版本。 主题定制Element UI 支持 SCSS 变量覆盖和在线主题生成器可以方便地进行主题定制。 维护性由于 Element UI 是一个由社区维护的开源项目在使用中可能会出现一些问题或bug在生产环境中使用时务必要测试所有的用例并关注官方的更新和通知。
Element UI 因其简单易用和功能丰富而受到许多开发者的欢迎尤其适合快速构建中大型项目的后台管理界面。
