安裝

npm i element-ui -S

完整引入

在mian.js中復(fù)制如下代碼

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"]
    }
  }
}

如果直接將官網(wǎng)的代碼復(fù)制到babelrc 內(nèi)很可能會(huì)報(bào)錯(cuò)，對(duì)比官網(wǎng)，只是增加了幾個(gè)配置，所以我們將增加的配置添加到文件內(nèi)就行了

在這里插入圖片描述

接下來(lái)，引入我們需要用到的組件，我習(xí)慣將其抽出為一個(gè)組件然后在main.js中引入

在src目錄下新建element/index.js文件

在這里插入圖片描述

在我們新建的index文件內(nèi)引入我們需要的組件

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

安裝完成后在項(xiàng)目目錄的終端輸入et -i，會(huì)在根目錄下多出一個(gè)element-variables.scss文件
找到element-variables.scss文件，修改主題色變量（primary)

在這里插入圖片描述

修改保存后在終端執(zhí)行命令et，會(huì)執(zhí)行編譯主題（默認(rèn)情況下編譯的主題目錄是放在 ./theme 下）

在這里插入圖片描述

引入自定義主題，保存后，就可以看到主題顏色的變化了

在這里插入圖片描述

注意：引入的編譯主題文件需要在引入element-ui之后，不然不會(huì)生效

在項(xiàng)目中改變 SCSS 變量來(lái)改變主題顏色

首先，我們的項(xiàng)目要支持scss，如果你是cli生成的項(xiàng)目，那么我們只需要下載下面兩個(gè)包，相應(yīng)的配置cli已經(jīng)配置過(guò)了

npm install sass-loader@7.3.1 --save-dev（高版本的可能不適配，建議安裝npm install sass-loader@7.3.1 --save-dev 安裝低版本的）

npm install node-sass --save

然后，我們新建一個(gè)scss文件，比如test.scss,寫入以下內(nèi)容

/* 改變主題色變量 */
$--color-primary: teal;

/* 改變 icon 字體路徑變量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

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

之后，在項(xiàng)目的入口文件中，直接引入以上樣式文件即可（無(wú)需引入 Element 編譯好的 CSS 文件）：

在這里插入圖片描述

注意，要在引入element-ui的后面引入，否則無(wú)法覆蓋原有的樣式