element-ui按需引入、自定义主题

1、按需引入

安装 babel-plugin-component-scss：

"babel-plugin-component-scss": "1.1.2"

npm install babel-plugin-component-scss -D

module.exports = {
  'plugins': [
    [
      'component-scss',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk/src',
        'ext': '.scss'
      }
    ]
  ]
}

src/vendor/element-ui.js

// @see https://element.eleme.cn/#/zh-CN/component/quickstart
// import '@/styles/element-variables.scss' // 引入自定义主题文件
// import 'element-ui/lib/theme-chalk/display.css' // 基于断点的隐藏类

import {
  Pagination,
  Dialog,
  // Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  // MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  // CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  // OptionGroup,
  Button,
  // ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  // TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  // Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner, // v-loading
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  // Carousel,
  Scrollbar,
  // CarouselItem,
  // Collapse,
  // CollapseItem,
  Cascader,
  // ColorPicker,
  // Transfer,
  // Container,
  // Header,
  // Aside,
  // Main,
  // Footer,
  // Timeline,
  // TimelineItem,
  // Link,
  Divider,
  Image,
  Calendar,
  // Backtop,
  // PageHeader,
  CascaderPanel,
  Loading,
  MessageBox,
  Message,
  Notification,
  // Avatar,
  Drawer
  // InfiniteScroll
} from 'element-ui'
import locale from 'element-ui/lib/locale'

const components = [
  Pagination,
  Dialog,
  // Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  // MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  // CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  // OptionGroup,
  Button,
  // ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  // TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  // Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  // Carousel,
  Scrollbar,
  // CarouselItem,
  // Collapse,
  // CollapseItem,
  Cascader,
  // ColorPicker,
  // Transfer,
  // Container,
  // Header,
  // Aside,
  // Main,
  // Footer,
  // Timeline,
  // TimelineItem,
  // Link,
  Divider,
  Image,
  Calendar,
  // Backtop,
  // PageHeader,
  CascaderPanel,
  // Avatar,
  Drawer
]

export default {
  /**
   * Vue use注册
   * @param {Object} Vue
   * @param {Object} opts element配置 { size, zIndex, locale, i18n }
   */
  install: function(Vue, opts = {}) {
    locale.use(opts.locale)
    locale.i18n(opts.i18n)

    components.forEach(component => {
      Vue.component(component.name, component)
    })
    // 处理 Babel@7 同时使用Loading、MessageBox多个属性 报_Loading,_MessageBox not defined
    // @see https://github.com/ElementUI/babel-plugin-component/issues/31
    const { directive: loadingDirective, service: loadingService } = Loading
    const msgbox = MessageBox
    const { alert, confirm, prompt } = msgbox
    Vue.use(loadingDirective)

    Vue.prototype.$ELEMENT = {
      size: opts.size || '',
      zIndex: opts.zIndex || 2000
    }

    Vue.prototype.$loading = loadingService
    Vue.prototype.$msgbox = msgbox
    Vue.prototype.$alert = alert
    Vue.prototype.$confirm = confirm
    Vue.prototype.$prompt = prompt
    Vue.prototype.$notify = Notification
    Vue.prototype.$message = Message

    // Vue.use(InfiniteScroll)
  }
}

2、自定义主题

src/styles/element-variables.scss

// colors
$--color-primary: #13c2c2 !default; // #0596e6
$--color-success: #2cd08c !default;
$--color-warning: #ffa940 !default;
$--color-danger: #ff4d4f !default;

npm install sass-resources-loader -D

vue.config.js

module.exports = {
    chainWebpack(config) {
        // sass-resources 不用重复引入element-variables.scss
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
          item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
              // Provide path to the file with resources
              resources: './src/styles/element-variables.scss'
            })
            .end()
        })
    }
}