一、开源项目简介

Vue DevUI

一个基于 DevUI Design 的 Vue3 组件库。

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

特性：

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

组件

• 通用

• Button 按钮
• Fullscreen 全屏
• Icon 图标
• Overlay 遮罩层
• Panel 面板
• Ripple 水波纹
• Search 搜索框
• Status 状态
• 导航

• Dropdown 下拉菜单
• Menu 菜单
• Pagination 分页
• Tabs 选项卡
• 反馈

• Alert 警告
• Drawer 抽屉板
• Loading 加载提示
• Message 全局提示
• Modal 弹窗
• Notification 全局通知
• Popover 悬浮提示
• Result 结果
• Tooltip 提示
• 数据录入

• AutoComplete 自动补全
• Checkbox 复选框
• DatePickerPro 日期选择器
• EditableSelect 可输入下拉选择框
• Form 表单
• Input 输入框
• InputNumber 数字输入框
• Mention 提及
• Radio 单选框
• Select 下拉框
• Slider 滑块
• Switch 开关
• Textarea 多行文本框
• TimePicker 时间选择器
• TimeSelect 时间选择器
• Upload 上传
• 数据展示

• Avatar 头像
• Badge 徽标
• Card 卡片
• Collapse 折叠面板
• Countdown 倒计时
• ImagePreview 图片预览
• Progress 进度条
• Rate 评分
• Skeleton 骨架屏
• Statistic 统计数值
• Steps 步骤条
• Table 表格
• Tag 标签
• Timeline 时间轴
• Tree 树
• 布局

• Grid 栅格
• Layout 布局
• Splitter 分割器

五、技术选型

 如何使用

1. 安装

npm i vue-devui

2. 引入

在main.ts文件中引入vue-devui。

import { createApp } from 'vue';
import App from './App.vue';

// 引入 Vue DevUI 组件库及样式
import DevUI from 'vue-devui';
import 'vue-devui/style.css';

createApp(App).use(DevUI).mount('#app');

3. 使用

在App.vue文件中使用 Vue DevUI 组件。

<template>
  <d-button>确定</d-button>
</template>

️ 本地开发

访问一飞开源：https://code.exmay.com/ 下载
cd vue-devui
pnpm i
pnpm dev

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

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

pnpm scripts