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

上来就干货！

按需引入

安装 babel-plugin-component

npm install babel-plugin-component -D

修改.babelrc文件

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime", 
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

将要引入的组件放到'@/element/index.js'中

import { Table, Message } from "element-ui";

Message.install = function (Vue, options) {
    Vue.prototype.$message = Message
}

const element = {
    install: function (Vue) {
        Vue.use(Table);
        Vue.use(Message);
    }
}

export default element

main.js文件中引入

import element from '@/element/index'
Vue.use(element)

自定义主题

使用在线主题编辑器，可以修改定制 Element 所有全局和组件的 Design Tokens

在线主题编辑.jpg

如图调好色之后点击下载，得到style.zip文件，解压复制里面的theme文件放到项目里

main.js文件中引入

import '@/element/theme.scss'

注意事项

• 按需引入，自定义主题不生效。main.js文件中引入时要注意先后顺序。
  先引入组件再引入自定义主题

import element from '@/element/index'
import '@/element/theme.scss'

• 字体图标显示不出来。字体文件不要配置url-loader或者filter-loader
• 自定义主题覆盖样式本地可以但打包后不起作用。要把覆盖样式写在theme.scss文件的最后面

// 主题颜色
$--color-primary: #39f;
$--color-warning: #E7AC4E;
$--color-success: #3AC2B4;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

// 覆盖样式（一定写在这个@import后面，不然打包后不起作用）
.el-loading-mask{
    background-color: rgba(0, 0, 0, 0.6);
}

.el-menu {
    background-color: #657180;

    &.el-menu--popup,
    .el-menu {
        background-color: #464c5b;
    }
}