# 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zpliu.gitbook.io/booknote/elementui/01-qi-bu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.