EL-UI 记录学习

附官网链接：Element - The world's most popular Vue UI framework

前言

Element-UI是一个非常好的由饿了吗开发的组件库。我自己敲代码想要实现某一个功能页面的时候，总在想有没有一种更简洁方便的东西来帮助我进行快速开发，所以一般我会在网上查阅有没有类似的实现，于是我在学习Vue的时候，也学习了EL-UI组件库，当然市面上还有很多好的组件库 今天主要记录el-ui

组件库：

那么这个时候就有人会问了 为什么要使用el-ui？举个例子把，我们用HTML+css写一个非常完美的按钮出来，需要大量的代码来支持，代码不够优雅是一方面 可读性也很差，此时搭配组件库的使用，可以极大的优化代码的简洁性，可读性，

只需要导入element-ui库,之后就是拿来即用了，也是就业界俗称的CV大法，而我们也不需要重复造轮子

一 使用步骤：

1.引入库

npm安装

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

npm i element-ui -S

cdn安装

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

二 实际使用

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

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

完整引入：在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，我们只引入需要的组件，以达到减小项目体积的目的

这里就不做具体记录了

用ElementUI做的demo

引入完成后，你就可以打开官网找到你需要的cv就可以了，这里以按钮为例 

默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮

效果如图：

ElementUI 提供了非常多的组件，足以满足日常工作中的大部分的需求了 诸如：布局，颜色， 边框，图标，按钮，单选多选框，输入框，开关，表格，标签，分页，弹出框，等等 。学习成本也很低，绝大部分问题看官网都能找到解决方案   

 !持续更新ing........

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！