基於Vuetify的Vue動態表單編輯器及代碼生成器

預覽

1. 總覽

2. ICON 和 COLOR 設置展現

3. RULE 設置展現

簡介

在作工做流服務時，深感動態表單的重要性。因此，慢慢摸索和學習，結合本身的需求，搭建了本套動態表單系統。

• 本系統是基於 lerna 和 yarn workspaces 構建的， monorepo 方式管理代碼的項目（很喜歡這種方式，和 Maven 的模塊化工程同樣，最主要是不用每一個項目一堆 node_modules）
• 基於 Vue 2.0 和 Vuetify 2.3.XX 構建。沒有使用 Vue3，主要是 Vuetify 3 還在開發中。
• 共性組件採用 rollup 進行編譯，而且作了已有認知範圍內，可以作到的全部性能優化處理
• example 模塊，基於 vue webpack 方式，對工程打包進行了深刻優化。
• 項目中會有不少組件，本來是想把以往工做中涉及的通用性的東西，逐步構建出一個組件庫（這個動態表單系統自己也是一個組件）。研究過一下規範化的組件庫，感受以本人如今水平作不到，所以才採用了 monorepo 方式。

本項目是後端老炮擼的前端，廣度和深度確定不如純前端，不喜勿噴，也請多多包涵以及多多交流，互相促進互相成長。

• 在線體驗

[一]、開發環境配置（Windows）

參考個人文章：Vue開發環境npm和Yarn的環境變量配置

[二]、全局安裝

若是要正確運行本系統，須要提早安裝一些全局工具，以便一些命令能夠正常運行。

請首先確保上面的環境變量配置正確。

// 請提早全局安裝一下組件
npm install -g yarn
yarn global add lerna @vue/cli

[三]、工程中各個包用途說明

包名	當前版本	用途	說明
@hecate/core	1.0.0	通用工具代碼、組件包	包含 localforage、lodash、moment、shortid、sweetalert2 以及通用工具代碼
@hecate/example	1.0.0	組件示例及運行工程	能夠在該工程中，運行和使用已有組件，也能夠理解爲組件的開發環境
@hecate/form-service	1.0.0	Nuxt 環境	動態表單的 SSR 驗證環境
@hecate/h-button	1.0.0	自定義按鈕組件	本身封裝的有 Tooltip 的 button
@hecate/h-code-editor	1.0.0	代碼編輯器組件	基於 codemirror 封裝的代碼編輯器，支持多種語言，經過界面菜單等進行控制。有代碼提示以及各式化等功能。
@hecate/h-code-mirror	1.0.0	代碼編輯器基礎組件	基於 codemirror 封裝的代碼編輯器，支持多種語言，沒有參數控制界面，須要手動傳遞參數
@hecate/h-form-generator	1.0.0	動態表單編輯組件	基於 Vuetify 的動態表單設計器
@hecate/h-form-renderer	1.0.0	動態表單組件繪製組件	動態表單渲染核心組件，參考koumoul-dev/vuetify-jsonschema-form 。目前，還沒有重構完成，須要根據支持組件的不斷添加，逐步重構完善
@hecate/h-form-runtime	1.0.0	動態表單預覽組件	基於生成的 Schema 顯示錶單組件
@hecate/h-icon-list	1.0.0	Icon 選擇組件	基於 material design icons 封裝的圖標查詢和選擇組件

[四]、經常使用命令

• 指定包，在某個包下執行 yarn 命令

yarn ws:**

// 例如：
// 添加包（從npm中添加）
yarn ws:example add lodash -D

// 刪除包
yarn ws:example remove lodash

// 運行example
yarn ws:example serve

• 添加本工程中的組件做爲依賴包（還沒有上傳至 npm）

// 將工程中的h-button 添加至example中
// 注意：不支持批量添加多個，要一個一個加
lerna add @hecate/h-button --scope @hecate/example

// 刪除本工程中的組件，使用yarn命令便可
yarn ws:example remove @hecate/h-button

• 在根目錄添加依賴包

// -W 意思是指工做區，想要操做工程級的包，這個參數不能缺
// -D 指定devDependencies的意思
// 添加組件
yarn add lodash -D -W

// 刪除組件
yarn add lodash -W

• 升級依賴包

yarn upgrade-interactive --latest

// 升級全局依賴包
yarn global upgrade-interactive --latest

• 編譯全部組件

lerna run lib

• 清空組件 dist

lerna run clean

• 清除組件中的 node_modules

lerna clean

• 讓各個組件中從新關聯依賴包

lerna bootstrap 或 yarn install

• 提交代碼

yarn push

[五]、問題解決

問題一：升級依賴包時出錯

使用yarn upgrade-interactive --latest命令升級依賴包的時候，特別是@hecate/form-service 中，有依賴包能夠升級時（目測是因爲使用了 Nuxt），常常會出現下面的錯誤。

Invariant Violation: expected workspace package to exist for "autoprefixer"
    at invariant (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:2314:15)
    at _loop2 (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:94537:9)
    at PackageHoister.init (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:94596:19)
    at PackageLinker.getFlatHoistedTree (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:48744:20)
    at PackageLinker.<anonymous> (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:48755:27)
    at Generator.next (<anonymous>)
    at step (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:310:30)
    at D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:328:14
    at new Promise (<anonymous>)
    at new F (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:5301:28)

這個問題是 yarn 自己的 Bug，雖然 yarn 已經升級到了 1.22.10，可是一會好一會很差的。

（1）解決辦法一

在工程中將 yarn 的版本，降到 1.19.XX。這種方法，只對本工程有效，這樣其它工程仍舊可使用最新版的 yarn，避免了全局安裝低版本 yarn 的問題

yarn policies set-version 1.19.XX

// .yarn 目錄生成後，執行
yarn install

這個命令會在工程中生成一個.yarn 目錄以及一個.yarnrc 文件，並在其中指定 yarn 版本。

（2）解決辦法二

這種辦法土一點，可是能夠不用去理會 yarn 的無論問題。

// 一、先查詢看看那些包能夠升級
yarn upgrade-interactive --latest

// 二、到指定的包的package.json中，手工修改版本號

// 三、清除組件包的依賴
lerna clean

// 四、從新關聯依賴
lerna bootstrap

或

yarn install

問題二：運行命令是出現禁止腳本運行的錯誤

解決方法：打開 PowerShell（在小娜裏搜就行），輸入：

set-executionpolicy remotesigned

以後選擇 Y，問題就解決了。

[六]、依賴說明

如下依賴包暫時不要升級

依賴包	當前使用版本	最新版本	說明
compression-webpack-plugin	6.1.1	> 7.0.0	目前不要升級該包，會拋錯誤
remark-footnotes	2.0.0	= 3.0.0	目前不要升級該包，該包是爲了解決 Nuxt 啓動 Warning 問題
rollup-plugin-vue	5.1.9	> 6.0.0	目前不要升級該包，等工程變動爲 Vue3 在進行升級
vee-validate	3.4.5	> 4.0.0	目前不要升級該包，等工程變動爲 Vue3 在進行升級
webpack	4.44.2	> 5.9.0	目前不要升級該包，須要等到使用相關 Vue 版本升級後再考慮

源代碼

Gitee地址
Github地址