> 基于[Element-UI](https://element.eleme.cn/#/zh-CN/component/quickstart) 封装常用组件，部分组件参考[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
npm install @varonervar/components---
| 稳定版本 | 版本支持|
|-|-|
|0.4.7|按需加载组件，初版|
> 没有安装依赖库会提示错误
|依赖库|版本|
|-|-|
|Element-UI|2.15.8（最新的2.15.9有bug不知道修复没，推荐使用2.15.8）|
|dayjs|最新版本|
----
|组件名称|说明|
|-|-|
|ZTable|配置化生成table表格，自带分页|
|ZForm|配置化生成各种基础组件，支持水平多个|
|ZConditions|table的查询条件组件，配置同ZForm|
|ZObjectShow|展示数据组件|
|ZUpload| 支持限制图片宽高，以及图片压缩|
|WlmLayout| 左侧菜单栏与顶部栏位，需要特定数据，针对当前管理系统|
-----
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用，建议锁定版本号。
``shell`
npm i @varonervar/components@稳定版本号 -S
目前可以通过 unpkg.com/@varonervar/components 获取到最新版本的资源，由于依赖Element-ui和dayjs，如果使用CDN，请先之前引入eleemnt-ui和dayjs的CDN。
`html
`
:::tip
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。
:::
-------
在 main.js 中写入以下内容：
`javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import WlmComponent from '@varonervar/components'
import 'element-ui/lib/theme-chalk/index.css';
import '@varonervar/components/theme-chalk/lib/index.css';
import App from './App.vue';
Vue.use(ElementUI);
Vue.use(WlmComponent);
new Vue({
el: '#app',
render: h => h(App)
});
`
以上代码便完成了 @varonervar/components 的引入。需要注意的是，样式文件需要单独引入。
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
`bash`
npm install babel-plugin-component -D
然后，将 babel.config.js 修改为：
`json`
{
"presets": [
"@vue/cli-plugin-babel/preset"
],
"plugins": [
[
"component",
{
"libraryName": "@varonervar/components",
"styleLibraryName": "~node_modules/@varonervar/components/theme-chalk/lib"
}
]
]
}
接下来，如果你只希望引入部分组件，比如 ZTable 和 ZForm，那么需要在 main.js 中写入以下内容：
`javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import { ZTable, ZForm } from '@varonervar/components';
import App from './App.vue';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.component(ZTable.name, ZTable);
Vue.component(ZForm.name, ZForm);
/* 或写为
* Vue.use(ZTable)
* Vue.use(ZForm)
*/
new Vue({
el: '#app',
render: h => h(App)
});
`
完整组件列表和引入方式（完整组件列表以 src/index.js 为准）
`javascript
import Vue from 'vue';
import {
WlmLayout,
ZConditions,
ZForm,
ZObjectShow,
ZTable,
ZUpload
} from 'element-ui';
Vue.use(ZUpload);
Vue.use(ZTable);
Vue.use(ZObjectShow);
Vue.use(ZForm);
Vue.use(ZConditions);
Vue.use(WlmLayout);
``
---