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

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

開發前端開源

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