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

一、開(kāi)源項(xiàng)目簡(jiǎn)介

DL UI

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

DL 釋義

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

二、開(kāi)源協(xié)議

使用MIT開(kāi)源協(xié)議

三、界面展示

四、功能概述

組件目前的規(guī)劃

亮點(diǎn)

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

組件開(kāi)發(fā)初衷

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

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

五、技術(shù)選型

安裝

通過(guò) npm 安裝

$ npm i @xuanmo/dl-ui

通過(guò) 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)國(guó)際化并注冊(cè)import zhCN from '@xuanmo/validator/locale/zh-CN.json'validator.localize(zhCN)// 3. 引入組件樣式import '@xuanmo/dl-ui/dist/index.css'const app = createApp()// 4. 注冊(cè)組件app.use(DLUI)

特別鳴謝

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

六、源碼地址

訪問(wèn)一飛開(kāi)源：https://code.exmay.com/