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

前言

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

一、是什么？

ElementUI简介

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

ElementUI官网：
注1：类似前端框架还有iview

二、使用步骤

1.引入库

npm 安装

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

npm i element-ui -S

CDN方式

目前可以通过获取到最新版本的资源，在页面上引入 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

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的理解