Vue3 开发新选择！华为重磅开源！支持 Vue、React、Angular！

DevUI 作为华为开源的前端解决方案，以其先进的设计理念、丰富的组件生态和跨框架支持，为企业级应用开发提供了强大的助力。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

在前端开发领域，Vue组件库一直是开发者们热议的话题。

目前市面上常见的Vue组件库如Element UI、Naive UI，它们在Vue生态中有着广泛的使用和良好的口碑。

然而，这些组件库大多仅支持Vue技术栈，对于需要多技术栈支持的项目，除了Ant Design，其它选择相对较少。

今天，我要介绍的是华为开源的DevUI，一个为开发者带来全新选择的组件库家族，它不仅支持Vue，还能同时适配React和Angular，满足多技术栈的开发需求。

一、什么是 DevUI？

DevUI是华为开源的一套前端解决方案，旨在为企业中后台产品提供简单、沉浸式和灵活的设计体验。

它不仅仅是一个组件库，更是一个完整的生态系统，包含Vue、React和Angular等多个技术栈的支持。

DevUI的设计价值观基于“简单”“沉浸式”和“灵活”，致力于为设计师和前端开发者提供标准化的设计系统，同时满足各种复杂的应用场景。

二、DevUI 的优势

设计理念先进：DevUI强调简单、沉浸式和灵活的设计理念，简化了设计和开发流程，提高了开发效率。高质量组件：DevUI提供了一系列高质量的UI组件，涵盖了各种常见的交互元素和布局结构。跨框架支持：DevUI的最大亮点之一是其跨框架支持。无论您是Vue、React还是Angular的开发者，都能在 DevUI 生态系统中找到适合自己的解决方案。强大的生态系统：DevUI 拥有强大的生态系统，包括Vue DevUI、Ng DevUI、Ng DevUI Admin、React DevUI、DevUI Helper、DevUI Playground以及图标库等。

三、DevUI 优秀组件一览

1. Dashboard 仪表盘

支持拖拽排序，缩放大小，添加，删除，禁止调整单个大小，禁止移动单个，锁定位置等等

2. Gantt 甘特图

支持单个甘特图和与 datatable 组件结合的甘特图：

3. RelativeTime 人性化时间转换

相对时间快速转换：

4. Quadrant Diagram 象限图

四、DevUI 的跨框架支持

DevUI的跨框架支持是其一大特色，以下是各个框架的组件库及其地址：

(1) Vue DevUI：基于Vue3和DevUI Design的 UI 组件库，提供高质量、简洁易用且灵活的组件。

GitHub 地址：https://github.com/DevCloudFE/vue-devui

(2) Ng DevUI：针对Angular开发者的 ``DevUI` 组件库，提供标准化的设计系统和丰富的组件。

GitHub 地址：https://github.com/DevCloudFE/ng-devui

(3) Ng DevUI Admin：为Angular开发者提供的企业级管理后台解决方案，集成DevUI组件和设计理念。

GitHub 地址：https://github.com/DevCloudFE/ng-devui-admin

(4) React DevUI：面向React开发者的DevUI组件库，提供简单、沉浸式和灵活的开发体验。

GitHub 地址：https://github.com/DevCloudFE/react-devui

(5) DevUI Helper：DevUI的辅助工具，帮助开发者快速上手和使用 DevUI。

GitHub 地址：https://github.com/DevCloudFE/devui-helper

(6) DevUI Playground：一个交互式的DevUI组件演示和测试平台，方便开发者了解和使用组件。

GitHub 地址：https://github.com/DevCloudFE/devui-playground

(7) 图标库：DevUI 提供的图标库，包含丰富的图标资源，满足不同应用场景的需求。

GitHub 地址：https://github.com/DevCloudFE/devui-icon

五、Vue3 快速使用

在Vue3项目中使用DevUI非常简单，以下是快速集成和使用Vue DevUI的步骤：

1. 安装 Vue DevUI

通过npm安装Vue DevUI及其依赖：

npm i vue-devui @devui-design/icons devui-theme

2. 全局引入

在 Vue3 项目的主文件中全局引入Vue DevUI：

import { createApp } from 'vue';import VueDevUI from 'vue-devui';import 'vue-devui/style.css';const app = createApp(App);app.use(VueDevUI);app.mount('#app');

3. 按需引入（推荐）

为了减少打包体积，推荐使用按需引入的方式。首先安装unplugin-vue-components插件：

npm i -D unplugin-vue-components

然后在Vite配置文件中进行配置：

import { defineConfig } from'vite';import vue from'@vitejs/plugin-vue';import Components from'unplugin-vue-components/vite';import { DevUiResolver } from'unplugin-vue-components/resolvers';exportdefault defineConfig({plugins: [ vue(), Components({ resolvers: [DevUiResolver()] }) ]});

4. 在 Nuxt3 项目中使用

在Nuxt3项目中，可以通过定义插件来使用Vue DevUI：

// plugins/vue-devui.tsimport VueDevUI from 'vue-devui';import 'vue-devui/style.css';export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(VueDevUI);});

然后在nuxt.config.ts中引入插件：

export default { // ... plugins: ['~/plugins/vue-devui.ts']}

DevUI作为华为开源的前端解决方案，以其先进的设计理念、丰富的组件生态和跨框架支持，为企业级应用开发提供了强大的助力。

无论是Vue、React还是Angular开发者，都能在DevUI生态系统中找到适合自己的工具和组件。开源的 DevUI 不仅降低了开发门槛，还推动了前端技术的创新和发展，为开发者带来了更多的选择和可能。

DevUI 游戏：https://devui.design/home