elementui作用,elementui的作用
Element ui的简单使用
Element ui官网
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
在 main.js 中配置
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com 。
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组件使用，如何全局引入库文件太大，开发时浪费资源，希望大神们多指教
emtui经常用到的属性
1.：外层容器2.：顶栏容器3.：侧边栏容器
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
官网地址：
elementui有必要去学习吗
有必要。
1、elementui框架有必要去学习，使用方便，一次引入后就能够直接使用所有样式。
2、组件操作几乎都有动画效果，组件较为丰富。
3、简化了常用组件的封装，提高了可复用性的原则。
Vue项目 UI框架介绍（第六天上）
1.什么是elementUI?
ElementUI是饿了么前端团队推出的一款基于Vue的桌面端UI框架
大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 进行了美化, 让我们能够专注于业务逻辑而不是UI界面
2.elementUI使用
3.elementUI优化
默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将elementUI中所有的组件打包到我们的项目中
这样就导致了我们的项目体积比较大, 用户访问比较慢
4.如何优化
为了解决这个问题, elementUI推出了按需导入, 按需打包. 也就是只会将我们用到的组件打包了我们的项目中
没有用到的组件不会被打包
1.什么是MintUI?
MintUI是饿了么前端团队推出的一款基于Vue的移动端U框架
大白话:和Bootstrap一样对原生的HTML标签进行了封装，让我们能够专注于业务逻辑而不是UI界面
2.mintUI使用
3.注意点: MintUI和ElementUI的第一个不同, 就是在MintUI中需要通过Vue.component来告诉Vue我们需要使用
1.什么是Vant?
在使用MintUI的过程中发现有很多的坑，所以个人不推荐在移动端中选择MintUIXant是有赞前端开发团队又推出的一款 基于Vue的移动端UI框架
大白话:和Bootstrap一样对原生的HTML标签进行了封装，进行了美化，让我们能够专注于业务逻辑而不是UI界面
Vue.use只能use插件，不能use组件
那么如何将一个组件封装成一个插件呢？
1.Vue.use()做了什么事情?
Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用
2.什么时候需要定义插件?
当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件
例如: 网络加载指示器
3.如果自定义一个插件?
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 上带来不一样的体验。