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 优秀组件一览

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

免责声明

游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。

同类文章