乐趣区

关于前端:叮你收到一份-Vexip-UI-20-开发中期报告

jiezi

从 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 虚构列表

能够在文档查看详情。

表单相干组件易用性改良

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

以往咱们应用表单组件的时候，在 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，心愿小伙伴们能反对一下，顺便赏一个🌟~

退出移动版