前言：
ui框架：
第一种： 纯html-ui框架（layui、bootstrap、mui、jQuery-ui），就是一份写好样式的css代码
第二种： 基于框架（vue 、react等等）的ui框架，写好了样式和基于框架语法的组件的组件库
-
layui：css代码，js代码
-
element-ui：根据vue框架的语法，已实现很多组件，我们只需要引入，然后注册为组件，再使用就行了
ElementUI
1.安装：
第一种：npm安装
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>
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。
2.引入element-ui：
第一种：全局导入：
在 main.js 中写入以下内容：
import Vue from 'vue';
import App from './App.vue';
//1. 引入UI框架,可以引入多个ui框架
// 注意：css有可能会冲突，这种情况很少
import ElementUI from 'element-ui';
// 2.引入全局css整个ui框架的风格
import 'element-ui/lib/theme-chalk/index.css';
// 3.把ElementUI框架提供的所有组件全部注册为全局组件
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
注意：样式文件需要单独引入。
第二种：按需导入
在main.js文件中：
import Vue from 'vue';
//可以引入多个部分组件
import { Button, Select } from 'element-ui';
import App from './App.vue';
//第一种：
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
//第二种
/* 或写为
* Vue.use(Button)
* Vue.use(Select) */
new Vue({
el: '#app',
render: h => h(App)
});
优点：借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
具体操作：
在官网上直接复制代码，在我们自己的代码中，根据需求去黏贴使用。
