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

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

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

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

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

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

Vue-DevUI?

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

项目作者:DevUI

开源许可证:MIT

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

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

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

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

功能与特性

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

体验方式

方式一:

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

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

方式二:

通过 DevUI Playground 在线使用组件

方式三:

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

方式四:

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

操作指南

创建一个项目

# npm 6.xnpm 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.gitcd vue-devuipnpm ipnpm dev

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

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

pnpm scripts

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

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

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

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

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

今年双十一,福利没停过

自 11 月 8 日以来,Gitee 企业版已经开启了 「年终狂欢季」 活动,三重惊喜福利新老用户均可享受!

活动地址:https://gitee.com/activity/2022double11

新老同享 好礼畅领

现在购买 Gitee 企业版任意版本,即可获得使用时长赠送,最多可享六个月使用时长,且购买任意版本两年及以上即可获赠价值 488 元的办公室好礼一份。

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

高阶功能 不限时免

除了项目流水线 Gitee CI/CD 所有企业免费用之外,目前代码扫描引擎 Gitee Scan 已经实现四大升级,助力企业完美实现质量左移。

近期自动化工具 Gitee Automation 也将上线并免费提供给所有企业用户使用。感兴趣的快去 Gitee 企业版试试吧。

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

友福同享 荐者有份

同时,Gitee 推荐官计划也将在活动期间火热升级,活动期间奖励提升至 150%,成为推荐官,最高躺赢 45% 现金!

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

现在前往年终狂欢主会场,和 25 万企业一起为高效研发创造无限可能吧!

活动地址:https://gitee.com/activity/2022double11

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年4月25日 上午10:30
下一篇 2023年4月25日 上午10:46

相关推荐

  • 柳州全面推动基层党建高质量发展(柳州 党建)

    作者:陈景武、李龙居 党的十九大以来,广西壮族自治区柳州市坚持以习近平新时代中国特色社会主义思想为指导,深入学习贯彻党的十九大和十九届历次全会精神,认真贯彻落实习近平总书记视察广西…

    科研百科 2024年6月9日
    164
  • 中石化项目管理系统

    中石化项目管理系统:优化项目管理流程 随着中石化公司规模的不断扩大,项目管理的需求也变得越来越复杂。传统的手工管理方式已经无法满足现代商业环境的需求,因此中石化项目管理系统应运而生…

    科研百科 2024年12月23日
    0
  • 社区离退休党员管理存在的问题

    社区离退休党员管理存在的问题 社区离退休党员是中国共产党的重要力量,他们作为老年人和退休干部的代表,在社区建设和发展中发挥了重要作用。然而,随着社区建设的不断完善和老龄化程度的不断…

    科研百科 2024年10月11日
    38
  • 高校科研项目申报(大学生科研项目申报有什么用)

    大学生科研项目申报有什么用 随着科技的不断发展,大学生科研项目申报已经成为大学生提高自身科研能力,展示自己才华的重要途径之一。在这篇文章中,我们将探讨大学生科研项目申报的有什么用处…

    科研百科 2024年4月5日
    117
  • 中期协发布《中国期货业协会会员管理办法》 《中国期货业协会会费收取办法》

    10月26日,中国期货业协会官网,为贯彻落实《中华人民共和国期货和衍生品法》,规范中国期货业协会(以下简称协会)依法依规履行自律管理职责,协会修订了《中国期货业协会会员管理办法》《…

    科研百科 2023年11月18日
    148
  • Photoshop(PS)2020软件下载及安装教程(ps软件下载安装步骤)

    准备工作: 1、提前准备好ps2020软件安装包(*没有的看文末*) 2、系统必须是Windows 10 64bit 3、保证电脑中有任意一款解压软件 安装步骤 1.找到下载好的安…

    科研百科 2024年5月20日
    112
  • 运用项目管理软件

    运用项目管理软件 项目管理软件是一种工具,可以帮助项目经理和团队成员有效地管理项目进度、成本和质量。在现代商业环境中,项目管理软件已经成为了一种必备的工具,可以帮助项目经理更好地掌…

    科研百科 2024年7月23日
    58
  • 甘肃党建在电脑上怎么登陆

    甘肃党建在电脑上怎么登陆 甘肃党建是中国共产党在甘肃省的官方党建网站,为党员和干部提供学习,交流和宣传党的政策和工作的平台。如果你想在电脑上登录甘肃党建网站,可以按照以下步骤进行操…

    科研百科 2024年11月10日
    12
  • 科研项目创新点怎么写

    科研项目创新点怎么写 随着科技的不断发展,科研项目的创新点也越来越容易被挖掘。一个具有创新性的科研项目,不仅能够为科学家们带来新的突破,也能够为未来的科学研究提供新的思路和方法。因…

    科研百科 2024年10月2日
    25
  • 产业链党建不足

    产业链党建不足 近年来,随着中国经济的快速发展,越来越多的企业开始重视党建,并积极参与产业链党建。然而,在一些企业特别是制造业企业中,产业链党建仍然存在不足,主要表现在以下几个方面…

    科研百科 2024年10月16日
    0