ElementUI二次封装组件库

基于Element-UI 封装常用组件，部分组件参考vue-element-admin

一. 版本须知

为避免异常问题，安装需锁定版本

| 稳定版本 | 版本支持| |-|-| |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| 左侧菜单栏与顶部栏位，需要特定数据，针对当前管理系统|

三. 安装

支持全局安装与按需加载，按需加载使用Element UI的babel-plugin-component

全局安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用，建议锁定版本号。

npm i @varonervar/components@稳定版本号 -S

CDN

目前可以通过 unpkg.com/@varonervar/components 获取到最新版本的资源，由于依赖Element-ui和dayjs，如果使用CDN，请先之前引入eleemnt-ui和dayjs的CDN。

<!-- 引入Element-ui 和dayjs，保证顺序在之前，不然报错 -->

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/@varonervar/components/theme-chalk/lib/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/@varonervar/components/lib/index.js"></script>

:::tip 我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。 :::

四. 快速上手

完整引入

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

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：

npm install babel-plugin-component -D

然后，将 babel.config.js 修改为：

{
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "@varonervar/components",
        "styleLibraryName": "~node_modules/@varonervar/components/theme-chalk/lib"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 ZTable 和 ZForm，那么需要在 main.js 中写入以下内容：

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 为准）

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);

计划与分工

计划

• 增加changelog
• 增加单元测试
• 增加沃平台包装组件

分工

|开发人员|开发组件| |-|-| |钟振业|ProTable、ZRadioButton| |卿松|其他|