上来就干货！
按需引入
安装 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;
}
}
