element-ui的使用

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

官网：http://v1.iviewui.com/