@ziii/xk-utils

一个面向 Vue 2 项目的公共工具库，提供三类能力：

• 通用工具方法：import { formatMoney, formatDate } from '@ziii/xk-utils'
• Vant 2 封装组件：import { XkButton } from '@ziii/xk-utils/vant'
• Element UI 封装组件：import { XkButton } from '@ziii/xk-utils/element'

设计原则

• 通用工具与业务代码解耦
• Vant / Element UI 作为宿主依赖，由业务项目自己安装
• vue、vant、element-ui、moment、lodash 不会被打进产物
• 组件库只注入自己新增的增强样式，不重复打包第三方 UI 框架样式

安装

npm install @ziii/xk-utils

业务项目还需要自己安装对应 peerDependencies：

npm install vue moment lodash
npm install vant
npm install element-ui

如果只使用其中一部分能力，可以按需安装对应依赖。

使用方式

1. 通用工具

import { formatDate, formatMoney, omitEmpty } from '@ziii/xk-utils';

const money = formatMoney(12345.6, { prefix: '¥' });
const date = formatDate(new Date(), 'YYYY-MM-DD');
const payload = omitEmpty({ keyword: 'vue2', status: '', page: 1 });

2. Vant 组件

确保业务项目已经安装并引入过 Vant 官方样式：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

import { XkButton } from '@ziii/xk-utils/vant';

Vue.use(Vant);

export default {
  components: {
    XkButton
  }
};

或者整包注册：

import Vue from 'vue';
import XkVant from '@ziii/xk-utils/vant';

Vue.use(XkVant);

3. Element 组件

确保业务项目已经安装并引入过 Element UI 官方样式：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import { XkButton } from '@ziii/xk-utils/element';

Vue.use(ElementUI);

export default {
  components: {
    XkButton
  }
};

或者整包注册：

import Vue from 'vue';
import XkElement from '@ziii/xk-utils/element';

Vue.use(XkElement);

当前内置能力

通用方法

• formatDate
• formatDateRange
• fromNow
• startOfDay
• endOfDay
• formatMoney
• formatPercent
• deepClone
• omitEmpty
• debounce
• throttle
• uniqueArray

组件

• @ziii/xk-utils/vant: XkButton
• @ziii/xk-utils/element: XkButton

两个按钮组件都带以下增强能力：

• 点击节流
• 支持 beforeClick
• 支持异步请求期间自动进入 loading
• 自动注入当前组件自己的增强样式

本地开发

npm install

启动 Vant 预览页：

npm run dev:vant

启动 Element 预览页：

npm run dev:element

打包

npm run build

打包后会输出：

• dist/index.*
• dist/vant/index.*
• dist/element/index.*

发布到 npm

首次发布前请先登录 npm：

npm login

发布前自检：

npm run release:check

正式发布：

npm publish --access public

推荐目录结构

src/
  utils/
  vant/
  element/
play/
build/
types/