Element-ui的理解

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

通过视频资源等学习终于了解除了手写代码渲染页面之外，既然还有这么好用的组件库，全程看官方文档，也能看个大概，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项目与组件库的搭配，总而言之，学就完了！