Vfox-Vue3组件库定制推荐

hcysunyang 曾进哥曾经说过，构建一个开源项目最简单的方法就是编写组件库。今天就到这里了。

本开源项目地址：Github。

现在的文档是这样的：Docs。

演示效果看这个：与一些组件库不同，该演示在PC端也完全兼容。

这是一个基于Vue 3.x的移动组件库。当然，它也有2.x版本，但我不想维护它，忽略它。

相比其他知名厂商，组件较多，包括100+基础组件。

以及一些常规功能：

单元测试覆盖率
完善中文文档
支持按需部署
支持主题定制
Composition API + Typescript + 模板撰写

我们来谈谈一些设计比较：

渐进式输入组件

例如，我们以三种方式列出最常见的选民：PickerView / PickerPopup / Picker：

1。 PickerView

选择直接暴露，适合嵌套在其他组件中

2。 PickerPopup

嵌套在弹出窗口中并由 v-model:visible 控制。

3。拾取器

有一个输入字段，可以直接在表单中使用。

这种形式的渐进式组件涵盖了多种使用场景。同样，DatePicker和Calendar也是渐进成分。

多种API覆盖

许多表单和反馈组件都提供开箱即用的表单 API。

目前提供 API 的组件有：

Notify.showNotify
Notify.hideNotify
Toast.showToast
Toast.hideToast
Toast.showLoading
Toast.hideLoading
ImagePreview.previewImage
Dialog.showDialog
Picker.showPicker
Cascader.showCascader
ActionSheet.showActionSheet
DatePicker.showDatePicker
Calendar.showCalendar
Popover.showPopover
PopDialog.showPopDialog
PopMenu.showPopMenu

…

使用方法

由于组件数量较多，建议采用按需加载的方式。

1。安装

npm i -S vfox@beta

2。按需安装组件

npm i babel-plugin-import -D

配置为 babel.config.js：

module.exports = {
  ...
  plugins: [
    [
      "import",
      {
        libraryName: "vfox",
        libraryDirectory: "es",
        style: true,
        camel2DashComponentName: false
      },
      "vfox"
    ]
  ]
}

3。按需加载组件

import { Button } from 'vfox'

app.use(Button)

4。 API调用

import { Toast } from 'vfox'

export default {
  mounted() {
    Toast.showToast({
      title: '成功',
      type: 'success',
      duration: 2000
    })
  }
}

以前我这样做是为了自己的乐趣，现在任何人都可以体验一下并顺便提一下问题，谢谢。