基于 DevUI,像搭积木一样做前端开发的 Vue3 组件库

·  阅读 32
基于 DevUI,像搭积木一样做前端开发的 Vue3 组件库

你知道在前端开发里也可以搭积木吗?

人想要快速搭好积木得靠熟能生巧。只不过在软件开发的场景下,积木块不是实体的,而是一个个小组件。这时面对各式各样,功能各异的组件,开发者们又该如何快速搭建积木呢?

对于前端工程师而言,组件库就是帮助灵活搭建积木的工具,开发者将各种功能的“积木”放在组件库里,有需要时直接选取相应功能的“积木块”拼接出一个个页面,这些页面组合在一起便能开发出具有一定价值功能的应用。

今天我们给大家介绍的这个开源项目就是使用“积木理论”进行组件设计和开发的组件库,它包含 60 多个特色组件,比如 DatePickerPro、Splitter、Ripple 等,让我们一起了解一下是否精美好用?

Vue-DevUI?

这是一个基于 DevUI 设计体系的 Vue3 组件库,使用 Vite + Vue3 + TSX 技术搭建。目前,Vue DevUI 1.0 已经发布,该项目也已获得 Gitee 官方推荐。

项目作者:DevUI 开源许可证:MIT 项目地址:gitee.com/devui/vue-d…

值得一提的是,DevUI 是华为云开源的企业级 UI 组件库,它从华为云 DevCloud 研发工具体系孵化而来。Vue DevUI 是 DevUI 前端团队孵化的开源组件库,2021 年 1 月 9 日正式亮相。

据项目作者表示,他们采用积木理论进行组件的设计和开发,是想要尽可能平衡灵活性和易用性。

同时对于 Table、Tree 等复杂组件,使用 Composition API 能够进行交互逻辑的拆分,确保组件的可扩展性和可维护性。

功能与特性

  • 包含 60 多个简洁、易用、灵活的高质量组件
  • 支持 TypeScript
  • 支持 Nuxt3
  • 支持按需引入
  • 支持国际化
  • 支持主题定制,并内置 追光 / 蜜糖 / 紫罗兰 等 7 种漂亮的主题

体验方式

方式一:

前往项目仓库,进入官网 Demo 体验组件交互和视觉

项目地址: gitee.com/devui/vue-d…

方式二:

通过 DevUI Playground 在线使用组件

方式三:

通过导入 CDN 资源包使用 Vue-DevUI

方式四:

在 Vue3 项目中安装 Vue-DevUI 来使用

操作指南

创建一个项目

# npm 6.x
npm create vite my-vue-app --template vue-ts

# npm 7+
npm create vite my-vue-app -- --template vue-ts
复制代码

安装相关组件

进入你的项目文件夹,使用 NPM 安装 Vue DevUI 和配套的图标库

npm i vue-devui @devui-design/icons devui-theme
复制代码

引入插件和样式

src/main.ts 文件中引入vue-devui

import DevUI from 'vue-devui';
import 'vue-devui/style.css';
import '@devui-design/icons/icomoon/devui-icon.css';
import { ThemeServiceInit, infinityTheme } from 'devui-theme';

ThemeServiceInit({ infinityTheme }, 'infinityTheme');

createApp(App).use(DevUI).mount('#app');
复制代码

如何使用?

src/App.vue 文件中使用 Vue DevUI 组件,在<template> 中增加以下内容:

<template>
  <!-- 使用 Button 组件 -->
  <d-button>确定</d-button>
</template>
复制代码

启动开发进行调试

npm run dev
复制代码

如果你想要本地开发

也可以尝试:

git clone git@gitee.com:DevCloudFE/vue-devui.git
cd vue-devui
pnpm i
pnpm dev
复制代码

打开浏览器访问:http://localhost:3000/

或者你也可以运行以下命令

pnpm scripts
复制代码

你也可以按需引入和主题定制

项目作者方也曾公开说过,基于 1.0 版本的稳定和坚实基础,未来打算关注以下几个方向:

  • 添加更多实用的组件,如 DragDrop、Sticky、Cascader、Transfer、ColorPicker 等
  • 公开组件的更多内部功能,如子组件、组件方法等
  • 所有列表类型的组件都使用虚拟滚动来提高性能,比如 Select 和 Table
  • 更好的国际化支持
  • 更好的易访问性支持
  • 更丰富的 Design Tokens

目前,Vue-DevUI 仍在不断维护与开发当中,有不少使用过的小伙伴表示下拉框不太顺,样式有点土,不够精美等问题。

如果你想要尝试这个组件,或者想要给项目提些小建议,前往 Gitee 与项目作者们聊聊吧,有机会成为项目的贡献者噢~

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改