安装
npm i element-ui -S
完整引入
在mian.js中复制如下代码
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
按需引入
按需引入需要借助 babel-plugin-component
首先，安装 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"
}
]
],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
如果直接将官网的代码复制到babelrc 内很可能会报错，对比官网，只是增加了几个配置，所以我们将增加的配置添加到文件内就行了
在这里插入图片描述
接下来，引入我们需要用到的组件，我习惯将其抽出为一个组件然后在main.js中引入
在src目录下新建element/index.js文件
在这里插入图片描述
在我们新建的index文件内引入我们需要的组件
import Vue from 'vue'
import {
Button, Select, Option,MessageBox,Message
} from 'element-ui'
Vue.use(Button)
Vue.use(Select)
Vue.use(Option)
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$message = Message;
然后在mian.js中引入
import './element'
改变element的主体颜色
命令行主题工具
首先安装「主题生成工具」
npm i element-theme -g
npm i element-theme-chalk -D
安装完成后在项目目录的终端输入et -i，会在根目录下多出一个element-variables.scss文件
找到element-variables.scss文件，修改主题色变量（primary)
在这里插入图片描述
修改保存后在终端执行命令et，会执行编译主题（默认情况下编译的主题目录是放在 ./theme 下）
在这里插入图片描述
引入自定义主题，保存后，就可以看到主题颜色的变化了
在这里插入图片描述
注意：引入的编译主题文件需要在引入element-ui之后，不然不会生效
在项目中改变 SCSS 变量来改变主题颜色
首先，我们的项目要支持scss，如果你是cli生成的项目，那么我们只需要下载下面两个包，相应的配置cli已经配置过了
npm install sass-loader@7.3.1 --save-dev（高版本的可能不适配，建议安装npm install sass-loader@7.3.1 --save-dev 安装低版本的）
npm install node-sass --save
然后，我们新建一个scss文件，比如test.scss,写入以下内容
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
在这里插入图片描述
注意，要在引入element-ui的后面引入，否则无法覆盖原有的样式
