Vue3 開發(fā)新選擇！華為重磅開源！支持 Vue、React、Angular！

作者：小4子 2025-06-12 09:18:22

開發(fā) 前端開源

DevUI 作為華為開源的前端解決方案，以其先進的設(shè)計理念、豐富的組件生態(tài)和跨框架支持，為企業(yè)級應(yīng)用開發(fā)提供了強大的助力。

在前端開發(fā)領(lǐng)域，Vue 組件庫一直是開發(fā)者們熱議的話題。

目前市面上常見的 Vue 組件庫如 Element UI、Naive UI，它們在 Vue 生態(tài)中有著廣泛的使用和良好的口碑。

然而，這些組件庫大多僅支持 Vue 技術(shù)棧，對于需要多技術(shù)棧支持的項目，除了 Ant Design，其它選擇相對較少。

今天，我要介紹的是華為開源的 DevUI，一個為開發(fā)者帶來全新選擇的組件庫家族，它不僅支持 Vue，還能同時適配 React 和 Angular，滿足多技術(shù)棧的開發(fā)需求。

一、什么是 DevUI？

DevUI 是華為開源的一套前端解決方案，旨在為企業(yè)中后臺產(chǎn)品提供簡單、沉浸式和靈活的設(shè)計體驗。

它不僅僅是一個組件庫，更是一個完整的生態(tài)系統(tǒng)，包含 Vue、React 和 Angular 等多個技術(shù)棧的支持。

DevUI 的設(shè)計價值觀基于“簡單”“沉浸式”和“靈活”，致力于為設(shè)計師和前端開發(fā)者提供標(biāo)準(zhǔn)化的設(shè)計系統(tǒng)，同時滿足各種復(fù)雜的應(yīng)用場景。

二、DevUI 的優(yōu)勢

設(shè)計理念先進：DevUI 強調(diào)簡單、沉浸式和靈活的設(shè)計理念，簡化了設(shè)計和開發(fā)流程，提高了開發(fā)效率。
高質(zhì)量組件：DevUI 提供了一系列高質(zhì)量的 UI 組件，涵蓋了各種常見的交互元素和布局結(jié)構(gòu)。
跨框架支持：DevUI 的最大亮點之一是其跨框架支持。無論您是 Vue、React 還是 Angular 的開發(fā)者，都能在 DevUI 生態(tài)系統(tǒng)中找到適合自己的解決方案。
強大的生態(tài)系統(tǒng)：DevUI 擁有強大的生態(tài)系統(tǒng)，包括 Vue DevUI、Ng DevUI、Ng DevUI Admin、React DevUI、DevUI Helper、DevUI Playground 以及圖標(biāo)庫等。

三、DevUI 優(yōu)秀組件一覽

1. Dashboard 儀表盤

支持拖拽排序，縮放大小，添加，刪除，禁止調(diào)整單個大小，禁止移動單個，鎖定位置等等

2. Gantt 甘特圖

支持單個甘特圖和與 datatable 組件結(jié)合的甘特圖：

3. RelativeTime 人性化時間轉(zhuǎn)換

相對時間快速轉(zhuǎn)換：

4. Quadrant Diagram 象限圖

四、DevUI 的跨框架支持

DevUI 的跨框架支持是其一大特色，以下是各個框架的組件庫及其地址：

(1) Vue DevUI：基于 Vue3 和 DevUI Design 的 UI 組件庫，提供高質(zhì)量、簡潔易用且靈活的組件。

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

(2) Ng DevUI：針對 Angular 開發(fā)者的 ``DevUI` 組件庫，提供標(biāo)準(zhǔn)化的設(shè)計系統(tǒng)和豐富的組件。

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

(3) Ng DevUI Admin：為 Angular 開發(fā)者提供的企業(yè)級管理后臺解決方案，集成 DevUI 組件和設(shè)計理念。

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

(4) React DevUI：面向 React 開發(fā)者的 DevUI 組件庫，提供簡單、沉浸式和靈活的開發(fā)體驗。

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

(5) DevUI Helper：DevUI 的輔助工具，幫助開發(fā)者快速上手和使用 DevUI。

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

(6) DevUI Playground：一個交互式的 DevUI 組件演示和測試平臺，方便開發(fā)者了解和使用組件。

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

(7) 圖標(biāo)庫：DevUI 提供的圖標(biāo)庫，包含豐富的圖標(biāo)資源，滿足不同應(yīng)用場景的需求。

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.ts
import 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']
}