1. 简介
Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率
ElementUI PC
MintUI 移动端
官网地址：
点击
2. 快速上手
2.1 安装elment ui
cnpm install element-ui -S
2.2 在main.js中引入并使用组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';//该样式文件需要单独引入
Vue.use(ElementUI);
这种方式引入了ElementUI中所有的组件
2.3 常用组件
- 布局
- 表格
- 表单元素
- 上传文件
- 。。。
3. 按需引入组件
3.1 安装babel-plugin-component
cnpm install babel-plugin-component -D
3.2 配置
vuecli2在.babelrc文件文件中添加以下配置：
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
vuecli3在babel.config.js中添加以下配置：
module.exports = {
presets: [
'@vue/app'
],
plugins: [ // element官方教程
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
}
3.3 引入需要的插件
在 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)
*/
4. 自定义主题
4.1 在项目中改变 SCSS 变量
Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。
如果你的项目还没有安装sass-loader、node-sass，请先在项目里安装
cnpm i sass-loader -D
//sass-loader依赖于node-sass
cnpm i node-sass -D
接下来新建一个样式文件，例如 element-variables.scss，写入以下内容：
/* 改变主题色变量 */
$--color-primary: #f00;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts'
@import "~element-ui/packages/theme-chalk/src/index"
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
import Vue from 'vue'
import Element from 'element-ui'
//import 'element-ui/lib/theme-chalk/index.css';//这里无需引入element-ui的css
import '@/assets/scss/element-variables.scss'
Vue.use(Element)
主题色默认为蓝色：
image.png
这个时候主题色变成了我们设置的红色：
image.png
image.png
5.vue-element-admin（扩展）
https://panjiachen.github.io/vue-element-admin-site/zh/
6.其他
另一个基于 Vue.js的UI 组件库
iview（个人） pc
