《开源精选》是我们分享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 徽标
更多内容大家可自行前往阅读。
开源地址：https://gitee.com/devui/vue-devui