介绍
Vue DevUI 是 Vue3 版本的 DevUI 组件库，基于 https://github.com/devcloudfe/ng-devui，倡导沉浸、灵活、至简的设计价值观。
DevUI Design可以让开发人员专门专注于应用逻辑的思考，而设计人员专注于用户体验，交互和流程。
宗旨与法则
规范的组件化目的不是为了限制创造，而是为了创造者更确定、科学、高效。所有行为决策的价值归依为产品业务。产品业务永远比组件化本身更重要，业务第一。
规范不是绝对、教条、冷漠、强制的，实际工作中总会有新增需求、存量优化空间、情感化设计需求超出一般通用规范。保持克制的同时，允许基于强烈业务需求的规范突破；之后如果有足够的理由迭代出组件，那么就进行组件化。
设计语言
DevUI的价值观奠定了DevCloud品牌的基础。它是DevCloud的设计师们思考、工作的产物，反映了DevCloud的产品文化、设计理念和对客户的承诺。DevUI的这些价值观贯穿于所有产品和面向客户的沟通和内容中。同时，它是DevUI设计原则的源头，为具体的设计方法提供启发和指引。
DevUI倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人进行设计，拒绝哗众取宠、取悦眼球的设计。
沉浸
DevUI的沉浸式体验包括人的感官体验和认知体验，当用户的个人技能与面对的挑战互相匹配，并且长时间处在稳定状态时，用户达到心流状态并且不易被外界因素所干扰。
在产品设计中，DevUI专注于降低用户完成目标任务时认知阻力。为此，DevUI同时提供多种不同切换页面的途径，包括面包屑、快捷键、按钮与链接等，方便用户随时快速、连续地切换页面，到达自己目的页面，使用户处于流畅的体验中，减轻寻找信息的焦虑感。DevUI设计体验提倡将个人技能与项目难度进行分层，并在使用时分别进行匹配，极力规避个人技能与难度不匹配时产生的焦虑或者无聊感。同时，DevUI兼容多样化APP插件，用户可以个性化自己的工作环境，把工作环境调整到最符合个人使用习惯的模式。
灵活
DevUI自带各类完整的模板和典型场景，与此同时，DevUI提供超过50个独立原子级组件，用户可以自由组合，用小组件拼接出符合自身产品需要的分子级控件；可以根据自身的产品需求灵活选择，既可以直接使用现有的典型页面模板，也可以从小控件做起，利用现有资源拼接自己的页面。
至简
DevUI坚持以用户为中心去进行设计，注重直观可达性，把服务示例化以帮助用户快速融入到使用中去。同时，DevUI提供大量的快捷键，并且图形化信息反馈和引导，简化使用的流程、降低使用的门槛。让用户能够所见即所得，做到快速上手，便捷实用。
设计资源
DevUI Design为开发和设计提供完善的设计原则、最佳实践和设计资源文件来帮助业务快速设计出高质量的产品原型。
DevUI 官方网站：https://devui.design
当前状态: Beta
该项目还处于孵化和演进阶段，欢迎大家参与到 Vue DevUI 项目的建设中来！
通过参与 Vue DevUI 项目，你可以：
- 学习最新的 Vite+Vue3+TypeScript+JSX 技术
- 学习如何设计和开发组件
- ? 参与到开源社区中来
- 结识一群热爱学习、热爱开源的朋友
贡献指南
快速开始
1 安装依赖
yarn(推荐)
or
npm i2 启动
yarn dev(推荐)
or
npm run dev3 访问
http://localhost:3000/
4 生产打包
yarn build(推荐)
or
npm run build使用 Vue DevUI
1. 安装
yarn add vue-devui2. 全量引入
在main.ts文件中编写以下代码：
import { createApp } from 'vue'
import App from './App.vue'
// Step 1: 引入 Vue DevUI 组件库
import DevUI from 'vue-devui'
// Step 2: 引入组件库样式
import 'vue-devui/style.css'
createApp(App)
.use(DevUI) // Step 3: 使用 Vue DevUI
.mount('#app')3. 按需引入
除了全量引入，我们也支持单个组件按需引入。
在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'
createApp(App)
.use(Button) // Step 3: 使用组件
.mount('#app')4. 配置自动按需引入unplugin-vue-components（推荐）
配置unplugin-vue-components插件可以无需引入Vue DevUI就可以直接按需使用其中的组件，具体使用方式如下：
在vite.config.ts文件中添加以下代码：
import Components from 'unplugin-vue-components/vite'
import { DevUiResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
// 新增
Components({
resolvers: [
DevUiResolver()
]
})
]
})配置了以上插件，就可以直接在代码中使用Vue DevUI的组件，而无需在main.ts文件中引入Vue DevUI。
5. 使用
<template>
<d-button>确定</d-button>
</template>图标库
图标库推荐使用DevUI图标库，也可以使用第三方图标库，比如：iconfont。
使用DevUI图标库
安装
yarn add @devui-design/icons(推荐)
or
npm i @devui-design/icons引入
在main.ts文件中，编写以下代码：
import '@devui-design/icons/icomoon/devui-icon.css'使用
<d-icon name="love" color="red"></d-icon>License
MIT
最新版本 12.2.0
新增特性：
- 新增dashboard仪表盘组件 closes #139
- categorySearch新增showSearchCategory API
- tree支持树节点单个设置是否显示checkbox
- autoComplete/multiAutoComplete/editableSelect 新增API appendToBodyDirections 使下拉菜单能自适应弹出方向。
- tagsInput新增虚拟滚动API virtualScroll
Bug修复：
- dataTable优化虚拟滚动不传tableheight的逻辑,可以结合maxheight自适应判断高度；修复单元格二次编辑需要点两次取消；修复单元格编辑，在数量过多时会卡顿
- Tree修复传入SelectDisableKey不生效；修复使用addNode新建节点没有checkbox的问题
- tooltip修复flex导致的传入html会布局错乱的问题 ；修复失焦导致的重复添加或错误添加问题
- tagsInput修复关键字包含在选项中失焦时未添加为tag