# wsm-vue-ui


## 一、插件描述
+ 组件是基于element-ui进行的二次封装。

## 二、本插件的包依赖
```
    "vue": "^2.6.11",
    "element-ui": "^2.13.2",
    "core-js": "^3.6.5",
    "axios": "^0.19.2",
    "qs": "^6.9.4",
    "dayjs": "^1.8.27",
    "loadsh": "^0.0.4",
```


## 五、安装使用该组件
```
npm install wsm-vue-ui -S
```
###  1.快速上手

本节将介绍如何在项目中使用 wsm-el-ui

你可以引入整个 wsm-el-ui，或是根据需要仅引入部分组件。我们先介绍如何引入完整的jdf-el-ui。

### 2.完整引入

在 main.js 中写入以下内容：

```javascript
import Vue from 'vue';
import Element from 'wsm-el-ui';
import 'wsm-el-ui/lib/theme/index.min.css';
import App from './App.vue';

Vue.use(Element);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

以上代码便完成了 wsm-el-ui 的引入。需要注意的是，样式文件需要单独引入。

### 3.按需引入

借助 [babel-plugin-component]，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

```bash
npm install babel-plugin-component -D
```

然后，将 .babelrc 修改为：

```json
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "wsm-el-ui",
        "styleLibraryName": "theme"
      }
    ]
  ]
}
```

new Vue({
  el: '#app',
  render: h => h(App)
});
```

完整组件列表和引入方式

```javascript
import Vue from 'vue';
import {
 Table
} from 'wsm-el-ui';

Vue.use(Table);
```

