一飛開源，介紹創(chuàng)意、新奇、有趣、實(shí)用的開源應(yīng)用、系統(tǒng)、軟件、硬件及技術(shù)，一個(gè)探索、發(fā)現(xiàn)、分享、使用與互動(dòng)交流的開源技術(shù)社區(qū)平臺(tái)。致力于打造活力開源社區(qū)，共建開源新生態(tài)！

一、開源項(xiàng)目簡介

DL UI

一個(gè)基于 Vue 3 的低代碼組件庫

DL 釋義

• D 代表夢想（Dream）、動(dòng)態(tài)（Dynamic）
• L 代表低代碼（Low code）

二、開源協(xié)議

使用MIT開源協(xié)議

三、界面展示

四、功能概述

組件目前的規(guī)劃

亮點(diǎn)

• 以最少的代碼，實(shí)現(xiàn)表單渲染
• 零外部依賴，不依賴其他三方包
• 內(nèi)置常用表單組件，支持?jǐn)U展組件
• 繁瑣的表單校驗(yàn)通過規(guī)則配置即可，校驗(yàn)與表單業(yè)務(wù)可完美剝離
• ?? 使用 TypeScript 開發(fā)，提供完整的類型定義
• 更多功能開發(fā)中，歡迎共建…

組件開發(fā)初衷

• 自己比較懶，不太喜歡做重復(fù)的事情，能用輪子解決的事情，盡量不搞第二次，由之前 Vue 2 版的配置表單開始（封裝自 Vant），自己對這種通過 JSON 配置就能完成一個(gè)表單的渲染，深受喜愛，因?yàn)楣ぷ鞯木壒?，目前主要做低代碼平臺(tái)產(chǎn)品（表單生態(tài)），也是一個(gè)比較感興趣的方向；
• 做開源也是為了能夠認(rèn)識(shí)更多朋友，歡迎一起討論交流。

來源：DL UI 官網(wǎng)文檔

五、技術(shù)選型

安裝

通過 npm 安裝

$ npm i @xuanmo/dl-ui

通過 yarn 或者 pnpm 安裝

$ yarn add @xuanmo/dl-ui$ pnpm add @xuanmo/dl-ui

引入組件

import { createApp } from 'vue'// 1. 引入組件import DLUI, { validator } from '@xuanmo/dl-ui'// 2. 引入校驗(yàn)國際化并注冊import zhCN from '@xuanmo/validator/locale/zh-CN.json'validator.localize(zhCN)// 3. 引入組件樣式import '@xuanmo/dl-ui/dist/index.css'const app = createApp()// 4. 注冊組件app.use(DLUI)

特別鳴謝

• 感謝 JetBrains 提供的 非商業(yè)開源軟件開發(fā)授權(quán)
• 感謝 JasKang 提供的 Markdown 預(yù)覽方案
• 感謝 三咲智子 提供的在線運(yùn)行組件方案

六、源碼地址

訪問一飛開源：https://code.exmay.com/