element-ui（elementuiplus）

本篇文章给大家谈谈element-ui，以及elementuiplus对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、element-ui展示
• 2、Element-UI 的基本使用（基于 Vue 的 组件库）
• 3、Element UI 基本使用

element-ui展示

展示了 element-ui 的相应组件的功能及UI，以便快速浏览查询。

transition 。内置了几种过渡动画。

el-row el-col 。通过基础的 24 分栏，迅速简便地创建布局。

el-container 。用于布局的容器组件，方便快速搭建页面的基本结构。

i 。碰敏提供了一套常用的图标集合。

el-button 。常用的操作按钮。

el-link 。文字超链接。

el-radio 。在一组备选项中进行单选。

el-checkbox 。一组备选项中进行多选。

el-input 。通过鼠标或键盘输入字符。

el-input-number 。仅允许输入标准的数字值，可定义范围。

el-select 。当选项过多时，使用下拉菜单展示并选择内容。

el-cascader 。当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

el-switch 。表示两种相互对立的状态间的切换，多用于触发「开/关」。

el-slider 。通过拖动滑块在一个固定区间内进行选择。

el-time-picker 。用于选择或输入日期。

el-date-picker 。用于选择或输入日期。

el-upload 。通过点击或者拖拽上传文件。

el-rate 。评分组件。

el-color-picker 。用于颜色选择，支持多种格式。

el-transfer 。用于多次选择，统一确定的组件。

el-form .由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据.

el-table 。用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

el-tag 。用于标记和选择。

el-progress 。用于展示操作进度，告知用户当前状态和预期。

el-tree 。用清晰的层级结构展示信息，可展开或折叠。

el-pagination 。当数据量过多时，使用分页分解数据。

el-badge 。出现在按钮、图标旁的数字或状态标记。

el-avatar 。用图标、图片或者字符的形式展示用户或事物信息。

el-alert 。用于页面中展示重要的提示信息。

$loading 。加载数据时显示动效。

$notify 。悬浮出现在页面角落，显示全局的通知提醒消息。

$message 。常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

$msgbox 。模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

el-menu 。为网站提供导航功能的菜单。

el-tabs 。分隔内容上有关联但属于不同类别的数据集合。

el-breadcrumb 。显示当前页面的路径，快速返回之前的任意页面。

el-page-header 。如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。

el-dropdown 。将动作或菜单折叠到下拉菜单中。

el-steps 。引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

el-dialog 。在保留当前页面状态的情况下，告知用户并承载相关操作。

el-tooltip 。常用于展示鼠标 hover 时的提示信息。

el-popover 。Popover与Tooltip很类似，相当于能自定义的Tooltip。

el-popconfirm 。点击元素，弹出气泡确认框。相当于一个已自定义的Popover。

el-card 。将信息聚春吵闷合在卡片容器中展示。

el-carousel 。在有限空间内，循环播放同一类型的图片、文字等内容。

el-collapse 。通过折叠面板收纳内容区域。

el-timeline 。可视化地呈现时间流信息。

el-divider 。区隔内容的分割线。

el-calendar 。显示日期。

el-image 。图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等。

el-backtop 。返回页面顶部的操作按钮。

ul 。滚动至底部时，加载更多数据。

el-drawer 。有些时扒弯候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。

Element-UI 的基本使用（基于 Vue 的 组件库）

✍ 目录总览：

① 安装依赖包 npm i element-ui –S

② 导入 Element-UI 相关资源

① 运行 vue ui 命令，打开图形化界面

② 通过 Vue 项目管理器 ，进入具体的项目配置面板

③ 点击 插件 - 添禅冲返加判正插件 ，进入插件查询面板

④ 搜索 vue-cli-plugin-element 并安装

⑤ 配置插件，实现按需导入，从而减少打包后项目的体贺饥积

最终效果：

[img]

Element UI 基本使用

1：npm 安装

推荐使用 npm 的方式安装，它能更好地和  webpack  打包工具配合使用。

npm i element-ui -S，

2：引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

2.1完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'

import App from './App.vue'

import ElementUI from 'element-ui';//全局引入

import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

//Vue.use(ElementUI)

Vue.use(Button)

Vue.use(Aside)

Vue.use(Main)

Vue.use(Container)

new Vue({

  render: h = h(App),

}).$mount('#app')

2.2按需引入

借助  babel-plugin-component ，我们可以只引入需要的组件，以达到减小项目体茄厅积的目的。

首先，安装 babel-plugin-component：

在命令行输入

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：//等同于 babel.config.js文件

module.exports = {

  presets: [

 镇简   '@vue/cli-plugin-babel/preset',

    ["@babel/preset-env", { "modules": false }]

  ],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

2.2.1在main.js配置

import Vue from 'vue'

import App from './App.vue'

 import {Button,Aside,Main,Container} from 'element-ui';//按需引入 注：Container首字母大写

import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

//Vue.use(ElementUI)

Vue.use(Button)

Vue.use(Aside)

Vue.use(Main)

Vue.use(Container)

new Vue({

  render: h = h(App),

}).$mount('#app')

小菜刚学会element_ui组件使用，如何全局引入库文件太大，开发时浪费资源，御纳裤希望大神们多指教

关于element-ui和elementuiplus的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。