叮~你收到一份 Vexip UI 2.0 开发中期报告

从 Vexip UI 2.0 的第一个 beta 版本发布到现在已经两个月了，当前已经是第 19 个 Beta 版本 2.0.0-beta.18，我觉得有必要写一份中期报告，总结一下到目前为止做的一些功能的开发。

由配置 Sass 变量重构为 CSS 变量

2.0 的第一个改动就是重构样式，将以前通过 Sass 变量配置来修改组件库样式的方式，改为了原生 CSS 变量，这样在样式定制化的时候就脱离了样式预处理器。

官网首页就可以快速切换主题色查看效果。

Gif 被压缩得有点厉害，糊掉了。。。

同时做了内置的暗色主题，结合 CSS 变量可以实现动态切换主题。

支持通过配置修改组件属性的默认值

在所有的组件中，除了 value 和 options 或是这样性质的属性外，其余所有属性的默认值均是可以配置的。

举个例子，按钮组件的 type 默认情况下是 'default'，但在使用中可能大部分按钮的 type 都需要是 'primary'，那在初始化组件库时则可以传入配置进行修改：

import { createApp } from 'vue'
import { install } from 'vexip-ui'
import App from './App.vue'

createApp(App).use(install, {
  props: {
    button: {
      type: 'primary'
    }
  }
})

这样就能减少大量重复性的属性传入。

曾经有一次，在一个几十个控件的表单里要把大小改成大号，写样式都觉得有点多，于是便有了这个功能。

如果需要局部修改，还可以借助 ConfigProvider 实现：

<template>
  <ConfigProvider :props="providedProps">
    <Button></Button>
  </ConfigProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const providedProps = ref({
  button: {
    type: 'primary'
  }
})
</script>

全面支持虚拟滚动

为了支持海量数据渲染的场景，所有含有列表特性的组件均内置了虚拟滚动，包括：Select、Table、Cascader、Transfer 等等。

同时将虚拟滚动（列表）抽离为单独的组件 VirtualList 提供复用，示例见文档。

国际化多语言的支持

目前 Vexip UI 内置了中英两种语言。

同时为了适应多语言，可以在初始化的时候传入自定义的国际化配置：

import { createApp } from 'vue'
import { install } from 'vexip-ui'
import App from './App.vue'

createApp(App).use(install, {
  locale: {
    locale: 'zh-CN', // 可以指定一个内置的语言作为基础
    input: {
      placeholder: '随便输入点什么...'
    }
  }
})

如果需要局部修改，依然可以借助 ConfigProvider 实现：

<template>
  <ConfigProvider :locale="locale">
    <Input></Input>
  </ConfigProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const locale = ref({
  input: {
    placeholder: '随便输入点什么...'
  }
})
</script>

如果有进一步的需求，可能会继续开发 rtl 的特性来支持某些语言的国际化。

可配置的命名空间

对于命名空间，做了两种场景的支持。

第一种是针对类名的命名空间，需要同时配合修改 sass 来修改样式中的命名空间：

createApp(App).use(install, { namespace: 'vxp' })

@use 'vexip-ui/style' with (
  $namespace: 'vxp'
);

第二种是针对组件名的命名空间，因为默认情况下组件名是无前缀的，有时候可能会有冲突：

createApp(App).use(install, { prefix: 'V' })

<template>
  <VButton></VButton>
  <VInput></VInput>
</template>

属性的设计

在组件属性的设计上，Vexip UI 遵循尽可能简洁的原则。

基于这点，对于超过 97.812% 的 Boolean 类型的属性，其设计都遵循默认值为 false，在需要设置为 true 时可以直接以添加属性的方式完成，而不需要再做赋值。

比如模态框 Modal 默认情况下是有 Footer 的，那控制是否出现 Footer 的属性在设计时会使用 no-footer，而不会是 :footer="false"：

<Modal no-footer></Modal>

还有一种属性，它只有两种状态，比如控制一个组件是横向的还是纵向的，对于这些属性的设计上，并不会使用以往的 type="horizontal/vertical"，而会将其中一种状态作为默认状态（比如在这个示例中更多的是横向为组件的默认状态），另一种状态通过一个 Boolean 属性进行打开（这个示例中属性会是 vertical）：

<template>
  <CheckboxGroup vertical :options="options"></CheckboxGroup>
</template>

这样在对于这些两面性的属性，一是能保持尽量整洁，二是在开发的过程会更有装配的感觉。

支持直接的按需引入

所有组件支持直接的按需引入，仅会打包用到的组件：

<template>
  <Button>Button</Button>
</template>

<script setup lang="ts">
import 'vexip-ui/css/preset.css'
import 'vexip-ui/css/button.css'

import { Button } from 'vexip-ui'
</script>

不过这样需要手动引入样式，可以借助像是 vite-plugin-style-import 或者 unplugin-vue-components 的插件实现自动引入样式，具体可以查看文档。

后续计划会直接在组件库里内置几个主流插件的 Resolver。

组件的可访问性

所有的组件都做了相对完整的可访问性支持。

在 Vexip UI 中，每个交互性的组件，能用鼠标完成的交互，几乎都可以单独使用键盘完成。

不过关于 aria 系列属性，我也是现学现卖的，不敢说做的怎么样~

全新组件

到目前为止，新增了下列组件：

• Grid 栅格布局（display: grid 实现）
• Layout 布局
• Space 间距
• Cascader 联级选择器
• Transfer 穿梭框
• Avatar 头像
• Viewer 查看器
• Skeleton 骨架屏
• ConfigProvider 配置注入
• Overflow 溢出
• ResizeObserver 缩放观测
• VirtualList 虚拟列表

除此之外对大量的组件做了优化、升级，以及 Bug 的修复~

可以在文档查看详情。

表单相关组件易用性改进

针对使用频率最高的表单系列组件，在最近的更新里做了一些特定的优化。

以往我们使用表单组件的时候，在 FormItem 的 prop 绑定了一次属性后，在其下的控件组件还要再使用 v-model 绑定一次。

在 Vexip UI 中，我们约定一个 FormItem 下只有一个表单控件系列的组件（Input、Select 这些），这样 FormItem 会自动将值传递到该组件中，无需再一次的 v-model 绑定。

<template>
  <Form :model="model">
    <FormItem required label="Input" prop="input">
      <Input></Input>
    </FormItem>
    <FormItem required label="Select" prop="select">
      <Select :options="options"></Select>
    </FormItem>
  </Form>
</template>

能够在常规情况下减少一些重复性的代码。

不过也有缺点，比如你希望将 fullName 这个字段拆分成两部分 firstName 和 lastName 然后分别用两个 Input 来输入，那你需要在表单的 model 里使用 firstName 和 lastName 字段分别关联到两个 FormItem 中，提交的时候再自行合并成 fullName 字段。

后续计划，除了持续优化易用性，应该会支持表单内置栅格布局功能，以及 JSON Schema 表单。

全新升级的文档

上一个版本的文档是一个单独的项目，在 2.0 中整合至了组件库的 docs 目录下，并做了全方位的升级：

• 完善了所有组件的文档，每个组件基本覆盖了常规功能使用的用例
• 全面的英文文档翻译，虽然采用大规模机翻加小规模修正（一个人翻的尽力了，虽然知道你们不看英文的）
• 移动端阅读体验优化（除了个别示例不支持移动端场景的）
• 基于 @vue/repl 实现了 Playground，文档中的所有示例均可以在 Playground 中打开游玩

后续的工作计划

目前 Vexip UI 比较重要的还未完成的工作是单元测试，后续的开发工作重心将迁移到单元测试撰写上，在每个组件的基本功能的测试用例都差不多的时候应该会正式发版 2.0.0。

然后另一个方面，是当前缺少了一个示例（模版）项目（或者说是 admin 项目？），计划是在 2.0.0 正式发版后开发，或者如果有小伙伴有兴趣来试一试的话，我非常愿意提供帮助~

组件功能方面，应该会继续把表单的易用性的优化和功能增强作为主要的方向。

最后，还是安利一下下 Vexip-UI - GitHub，希望小伙伴们能支持一下，顺便赏一个🌟~