《开源精选》是我们分享 Github、Gitee 等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个基于 DevUI Design 设计体系的 Vue3 组件库——vue-devui。
vue-devui 来源于另一个优秀的开源项目—— ng-DevUI，该项目可以让开发人员专门专注于应用逻辑的思考，无需考虑交互和流程。经过不断的实践与沉淀，DevUI 提炼出一套典型业务场景的组件库，由于其沉浸、灵活、至简的特性受到众多开发者的好评，所以 vue-devui 组件库正式从 DevUI 中剥离出来成为一个单独的开源项目，目前该项目还处于孵化和演进阶段。
安装使用
1.安装
yarn add vue-devui
# 可选，字体图标库, 部分Demo依赖此字体库
# yarn add @devui-design/icons
# main.ts 文件引入
# import '@devui-design/icons/icomoon/devui-icon.css'2.引入模块和样式
// 全局引入
import DevUI from 'vue-devui'
import 'vue-devui/style.css'
createApp(App).use(DevUI).mount('#app')// 按需引入
// main.ts文件
import { createApp } from 'vue'
import App from './App.vue'
// Step 1: 引入单个组件
import { Button } from 'vue-devui'
// or import Button from 'vue-devui/button'
// Step 2: 引入组件样式
// 方式一：手动引入组件样式
import 'vue-devui/button/style.css'
// 方式二：自动按需引入组件
// vite.config.ts文件
// import styleImport from 'vite-plugin-style-import'
// plugins: [
// vue(),
// styleImport({
// libs: [
// {
// libraryName: 'vue-devui',
// esModule: true,
// resolveStyle: (name) => `vue-devui/${name}/style`,
// },
// ],
// })
// ]3.使用
<template>
<d-button>确定</d-button>
</template>组件样式
Button 按钮
Search 搜索框
Status 状态
Pagination 分页
Alert 警告
Result 结果
Input 输入框
InputIcon 输入框
CheckBox 复选框
Transfer 穿梭框
Badge 徽标
-END-
开源地址：https://gitee.com/devui/vue-devui
原文始发于微信公众号（开源技术专栏）：基于 DevUI Design 设计体系的 Vue3 组件库
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/53595.html
