第一步,安装element-ui
npm i element-ui -S
第二步按需引入安装:
npm install babel-plugin-component -D
更改.babelrc文件
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
第三步,在main.js中:
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
那么如何自定义主题呢
前提,已经在Vue项目中使用了scss,则可以直接创建一个element-variables.scss文件:
$--color-primary: #409EFF;
$--color-success: #03C78C;
$--color-warning: #FFBE2D;
$--color-danger: #FF2660;
$--color-info: #727FC5;
$--color-text-primary: #333333;
$--color-text-regular: #666666;
$--color-text-secondary: #999999;
$--color-text-placeholder: #CCCCCC;
$--font-path:"~element-ui/lib/theme-chalk/fonts";/* 改变 icon 字体路径变量,必需 */
@import" ~element-ui/packages/theme-chalk/src/index";
然后直接在main.js中引入:
注意:index.js和scss样式的前后加载顺序,一定是index.js在scss之前。
import "./element-ui-setting/index.js";
import "./element-ui-setting/element-variables.scss";