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 = 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. 特点

  1. 用法简单：Element UI 提供的组件具有统一的风格和用法，使得开发者能够快速上手并构建页面。

  2. 配置灵活：多数组件都有多重配置选项，允许定制化以满足不同场景的需求。

  3. 国际化支持：支持多语言，方便构建国际化应用。

  4. 响应式：虽然是为桌面端优化的，但是许多组件在响应式布局上表现良好。

  5. 良好的文档和社区支持：Element UI 有着详尽的文档和活跃的社区，可以方便地解答开发中的问题。

3. 组件分类

Element UI 的组件可以分为几个主要类别：

  1. 基础组件：比如布局（Layout）、容器（Container）、颜色（Color）、字体（Typography）、图标（Icon）等。

  2. 表单组件：输入框（Input）、选择器（Select）、开关（Switch）、滑块（Slider）、时间选择器（Time Picker）、日期选择器（Date Picker）、上传（Upload）等。

  3. 数据展示组件：表格（Table）、标签（Tag）、进度条（Progress）、树形控件（Tree）、分页（Pagination）等。

  4. 导航组件：菜单（NavMenu）、面包屑（Breadcrumb）、页签（Tabs）、下拉菜单（Dropdown）等。

  5. 反馈组件：对话框（Dialog）、消息提示（Message）、消息弹窗（MessageBox）、通知（Notification）等。

  6. 其他组件：如工具提示（Tooltip）、Popover、弹出框（Popover）、轮播（Carousel）、Collapse 折叠面板等。

4. 开始使用

为了在 Vue 项目中使用 Element UI，需要安装它并在项目中引入。以下是一个快速开始的例子：

  1. 使用 npm或 yarn进行安装：

    npm install element-ui --save

    或

    yarn add element-ui

  2. 在 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)
});

  3. 在组件中使用 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 因其简单易用和功能丰富而受到许多开发者的欢迎，尤其适合快速构建中大型项目的后台管理界面。

# ui # vue.js # java # 前端
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区