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

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

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

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

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

Vue-DevUI？

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

开源许可证：MIT

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

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

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

功能与特性

体验方式

方式一：

前往项目仓库，进入官 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

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

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

今年双十一，福利没停过

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

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

新老同享 好礼畅领

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

高阶功能 不限时免

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

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

友福同享 荐者有份

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

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

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