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

DevUI團隊 發表於 2022-06-30
Vue

距離 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/[email protected]"></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 [email protected] 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 專案吧