你知道在前端开发里也可以搭积木吗？
人想要快速搭好积木得靠熟能生巧。只不过在软件开发的场景下，积木块不是实体的，而是一个个小组件。这时面对各式各样，功能各异的组件，开发者们又该如何快速搭建积木呢？
对于前端工程师而言，组件库就是帮助灵活搭建积木的工具，开发者将各种功能的“积木”放在组件库里，有需要时直接选取相应功能的“积木块”拼接出一个个页面，这些页面组合在一起便能开发出具有一定价值功能的应用。
今天我们给大家介绍的这个开源项目就是使用“积木理论”进行组件设计和开发的组件库，它包含 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 元的办公室好礼一份。
高阶功能 不限时免
除了项目流水线 Gitee CI/CD 所有企业免费用之外，目前代码扫描引擎 Gitee Scan 已经实现四大升级，助力企业完美实现质量左移。
近期自动化工具 Gitee Automation 也将上线并免费提供给所有企业用户使用。感兴趣的快去 Gitee 企业版试试吧。
友福同享 荐者有份
同时，Gitee 推荐官计划也将在活动期间火热升级，活动期间奖励提升至 150%，成为推荐官，最高躺赢 45% 现金！
现在前往年终狂欢主会场，和 25 万企业一起为高效研发创造无限可能吧！
活动地址：https://gitee.com/activity/2022double11
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。