Vue DevUI：100多位貢獻者持續530多天，寫了近60000行程式碼，這個新鮮出爐的 Vue3 元件庫你不想嘗試下嗎？

DevUI團隊發表於2022-06-30
VuedevUI行程元件

距離 Vue DevUI 元件庫第一個rc版本釋出過去3個月。

這3個月來，共有33位田主參與元件的打磨和優化，共優化和修復了61個元件的377個特性和缺陷。

Vue DevUI 已趨於成熟，歡迎大家體驗和使用！

你可以通過以下方式來體驗和使用 Vue DevUI 的元件：

  • 方式一：通過官網 Demo 體驗元件互動和視覺
  • 方式二：通過 DevUI Playground 線上使用元件
  • 方式三：通過匯入CDN資源包使用 vue-devui
  • 方式四：通過在Vue3專案中安裝 vue-devui 來使用

方式一：通過官網 Demo 體驗元件互動和視覺

Vue DevUI 官網地址：https://vue-devui.github.io/

官網首頁這張圖左邊有一個大大的"D"，代表DevUI，旁邊有一些帶各式圖案的方塊，這些圖案都是一些大家常見的工具?，意味著DevUI是專注於工具類產品的UI元件庫。

中間有兩個大大的按鈕，點選左邊的“快速開始”按鈕，即可進入元件庫的快速開始文件頁面；點選右邊的按鈕可以進入 Vue DevUI 的 Github 原始碼倉庫。

按鈕下面是貢獻者的頭像和連結。

官網首頁.png

我們點選“快速開始”按鈕。

快速開始.png

元件文件頁面的左側是一個分類好的元件導航，點選元件名稱即可進入相應的元件文件。

我們點選“Button 按鈕”。

image.png

每個元件頁面從上到下，有以下部分組成：

  • 元件標題
  • 元件描述
  • 元件使用場景
  • 分類好的元件Demo效果和程式碼
  • 元件的API文件
  • 元件的貢獻者

由於 Vue DevUI 元件庫是一個由社群開發者一起共建的 Vue3 元件庫，我們非常重視每一位貢獻者的每一次貢獻，在Github 倉庫的 README、在官網首頁、在每個元件文件底部都有展示貢獻者資訊。

貢獻者是第一位的，他們的辛勤付出成就了 Vue DevUI，我們也希望未來 Vue DevUI 在社群建立影響力的同時，我們的貢獻者也能獲益，建立起個人的品牌影響力，除了在 Vue DevUI 專案中獲取成長和榮譽感之外，也可以在開源社群獲取一定的影響力和受到人們的尊敬。

方式二：通過 DevUI Playground 線上使用元件

如果覺得在官網體驗 Vue DevUI 的元件不過癮，想親自用用看，也非常簡單，只需要點選官網文件頂欄的“Playground”連結即可。

image.png

這是 DevUI Playground 的連結：

https://devcloudfe.github.io/devui-playground

Playground有“演練場”的意思，也就是說你可以在這裡親自使用 Vue DevUI 的元件。

該頁面主要有兩個大的區域：

  • 程式碼編輯區
  • 效果展示區

DevUI Playground.png

你可以在程式碼編輯區直接使用 Vue DevUI 的元件，寫完右邊的效果展示區立馬就能看到該元件的效果。

是不是非常方便，趕緊試試吧！

DevUI Playground 是由我們的PMC成員Brenner開發的開源專案，目前已經貢獻到 DevUI 的 Github 組織裡，成為 DevUI 官方開源專案。

以下是 DevUI Playground 專案的原始碼地址：

https://github.com/DevCloudFE/devui-playground

歡迎點亮我們的小星星 Star?

方式三：通過匯入CDN資源包使用 vue-devui

如果你不滿足在演練場中使用Vue DevUI元件，想在自己的專案中使用，那也是完全沒有問題的。

我們支援通過CDN包的方式使用 Vue DevUI 元件庫，使用方式如下：

建立一個index.html檔案，寫入以下內容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 引入vue -->
  <script src="https://unpkg.com/vue@next"></script>

  <!-- 引入vue-devui -->
  <script src="https://unpkg.com/vue-devui"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-devui/style.css">

  <title>Vue DevUI Project</title>
</head>
<body>
  <div id="app"></div>
  <script>
    const app = Vue.createApp({
      template: `
        <d-button variant="solid">確定</d-button>
        <d-button>取消</d-button>
      `
    });

    // 引入vue-devui之後，會在全域性暴露一個 VueDevui 物件，這是一個Vue外掛，可以通過Vue例項的use方法進行註冊，註冊之後就可以直接使用 Vue DevUI 元件
    app.use(VueDevui.default).mount('#app');
  </script>
</body>
</html>

用瀏覽器直接開啟這個html檔案，即可看到元件效果。

image.png

方式四：通過在 Vue3 專案中安裝 vue-devui 來使用

如果要在真實的業務中使用 Vue DevUI 元件庫，則可以安裝 vue-devui 這個 npm 包。

我們先使用以下命令建立一個 Vite 專案：

npm create vite@latest vue-devui-project -- --template vue-ts

接著就是安裝 vue-devui 元件庫和配套的圖示庫：

npm i vue-devui @devui-design/icons

可以參考 Vue DevUI 官網的快速開始文件：

https://vue-devui.github.io/quick-start/

全量引入

最簡單的方式是全量引入所有元件，在main.ts檔案中寫入：

import { createApp } from 'vue'
import App from './App.vue'

import DevUI from 'vue-devui'
import 'vue-devui/style.css'
import '@devui-design/icons/icomoon/devui-icon.css'

createApp(App).use(DevUI).mount('#app')

引入之後就可以直接使用 Vue DevUI 元件啦！

在App.vue中使用下d-button元件：

<template>
  <d-button variant="solid">確定</d-button>
  <d-button>取消</d-button>
</template>

效果如下：

image.png

按需引入

為了減少產物包的體積，提升應用的效能，Vue DevUI 也是支援按需引入元件的。

在main.ts中寫入以下程式碼：

import { createApp } from 'vue'
import App from './App.vue'

import Button from 'vue-devui/button'
import 'vue-devui/button/style.css'

createApp(App).use(Button).mount('#app')

使用起來沒有任何差別，在App.vue中直接使用d-button：

<template>
  <d-button variant="solid">確定</d-button>
  <d-button>取消</d-button>
</template>

效果也和全量引入沒有任何區別：

image.png

歡迎大家體驗和使用 Vue DevUI 元件庫?

更歡迎你參與進來一起共建?

image.png

想了解 Vue DevUI 開源元件庫更多故事，請閱讀我們往期的文章：

20行程式碼，給你的專案增加 DevUI 主題切換能力

如何在1分鐘之內建立一個符合規範的DevUI元件

前端開發的積木理論——像搭積木一樣做前端開發

建設一個溫暖的開源社群

DevUI開源的故事

手把手帶你從0到1搭建一個vue3元件庫：mini-vue-devui

Vue DevUI 已經有10個元件成員啦

讓我們一起建設 Vue DevUI 專案吧

相關文章