前言

通过视频资源等学习终于了解除了手写代码渲染页面之外，既然还有这么好用的组件库，全程看官方文档，也能看个大概，elementUI是一个非常好入门学习组件库的库。在自己敲代码的时候，总在想能不能偷会懒，少敲一些代码，这样敲下去头都大了，于是我在学习Vue的时候，终于有人介绍了组件库这玩意，啥是组件库啊！正比如说用HTML+css写一个非常完美的按钮出来，肯定得写大半篇代码，代码不够优雅，此时搭配组件库的使用，可以大大优化代码的数量，导入elementUI库,完了就是cv工程师的事了，这样的组件库是不是非常的好呢？

一、element-ui是什么？

ElementUI简介

我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

ElementUI官网：http://element-cn.eleme.io/#/zh-CN
注1：类似前端框架还有iview

二、使用步骤

1.引入库

npm 安装

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

npm i element-ui -S

CDN方式

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.快速上手elementUI

在此，你应该熟悉vue-cli(脚手架)的创建以及清晰它的目录结构

1.引入 Element

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

完整引入：在main.js中写入这些内容

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)
});

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

首先，安装 babel-plugin-component

npm install babel-plugin-component -D

然后，将babel.config.js里的内容改成这样

module.exports = {

"presets": [

"@vue/cli-plugin-babel/preset"

],

"plugins": [

[

"component",

{

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

}

]

]

}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为* Vue.use(Button)* Vue.use(Select)*/

注意:elementUI的引入大概就这样子的，如果要按需引用的组件很多的话，可以不用全部写在main.js中，可以将其抽离出来创建一个新的文件夹

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。

总结

ElementUI组件库的引入可以使我们更好的去理解Vue项目与组件库的搭配，总而言之，学就完了！

Element-ui的理解相关推荐

element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员https://blog.csdn.net/crxk_blog.csdn.net 写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建 ...
从Element ui看开发公共组件的三种方式
在日常的开发工作中,封装自己的公共组件是很常见的需求,但想要组件更加优雅和通用也是一门学问.恰好前段时间用过Element ui,于是想学习这种库是如何封装插件的,这篇文章就是我的一点理解. 从入口文 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
element ui字段_ui备忘单下拉字段
element ui字段重点 (Top highlight) Dropdowns get a lot of flak from the UI world – and if we are honest ...
Element 官方宣布了：Element UI for Vue 3.0 来了！
Element Plus for Vue 3.0 来了,这次真的来了! Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Eleme ...
实验管理系统springboot+vue+element ui项目开发
实验管理系统某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
从 Element UI 源码的构建流程看前端 UI 库设计
引言由于业务需要,近期团队要搞一套自己的UI组件库,框架方面还是Vue.而业界已经有比较成熟的一些UI库了,比如ElementUI.AntDesign.Vant等. 结合框架Vue,我们选择在Ele ...
element ui tabs-tab页放到右边、侧边
element ui tabs-tab页放到右边.侧边右边有哪些tab页和有哪些数据是后台反的数据.并且黄色的部分可以拖动改变两边的大小现在想把右侧的tab页靠右边.官网提供的靠右是这样的现在想 ...
charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
Vue HTML：在Vue上写Html遇到的一些问题，html的首行缩进，html的行间距，element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示资源: HTML 教程- (HTML5 标准) 怎么快速上 ...

Element-ui的理解

前言