> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/elementui/01-qi-bu.md).

# Element UI:rocket:

> * 2019年9月6日

## 1. 安装与使用 :small\_red\_triangle\_down:

`npm i element-ui -s`

### 1.1 完整引入

* 引入包
* 引入样式文件
* 注册全局组件

```javascript
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```

### 1.2 部分引入

需要一个插件的支持**babel-plugin-component**,安装完成之后配置**node\_modules/vue-lazyloader/.babelrc**文件

**:see\_no\_evil:之前安装Mint-UI时也是同样的操作**

```javascript
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
```

`npm i babel-plugin-component -D`

```javascript
import { Button, Select, Row } from 'element-ui'
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.component(Row.name, Row);
```

## 2. 全局配置:confetti\_ball:

* `size`改变组件的默认尺寸
* `zindex`改变弹框的z-index

```javascript
Vue.ues(ElementUI,{

size:'small',

zIndex:3000

})
```

部分组件进行全局配置

`Vue.prototype.$ELEMTNT={size:'small',zIndex:3000}`

## 3. webpack打包

参考 <https://www.cnblogs.com/both-eyes/p/10047352.html>

由于ElementUI使用的是sass进行样式的书写，我也就照着学一学

### 3.1 安装sass，模块

```javascript
//在项目下，运行下列命令行
    npm install  sass-loader -D
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass -D
```

### 3.2 配置webpack配置文件

增加匹配规则后重启 webpack-dev-server

```javascript
{test:/\.scss$/,use:[
                {loader:'style-loader'},
                {loader:'css-loader'},
                {loader:'sass-loader'}
                ]},
```

## 3.3 组件中样式

```javascript
<style scoped lang="scss">
</style>
```