Element UI 目前在中背景項目中應用廣泛，是十分流行的 Vue 元件架構。而表單元素，作為最常用的使用者輸入元件，在設計開發過程中幾乎都要涉及，且往往大同小異。能不能減少重複的代碼編寫工作呢？能不能甚至不寫代碼，點幾下滑鼠就能生成想要的表單呢？Form-Generator，這個基于 Element UI 架構 Form 元素的表單設計與代碼生成器，就能解放你的雙手。
ElementUI架構
簡介
Form-Generator，是 JakHuang 在 Github 和碼雲上開源的表單設計與代碼生成器，項目代碼位于 https://github.com/JakHuang/form-generator，國内鏡像位于 https://gitee.com/mrhj/form-generator。
Form-Generator 基于 Element UI 元件庫的 Form 表單元件，開發了一個表單設計器，可以在設計器中，點選不同的輸入元件建構表單，設計器則會自動生成對應的 Vue 代碼，可以項目中使用。也可以把設計好的表單以 JSON 的格式導出，友善存儲傳輸，使用時利用配套的解析器把 JSON 解析為設計好的表單即可使用。
form-generator使用
安裝
Form-Generator 需要 Node.js 10+，可以使用 NPM 進行安裝：
npm i fms-form-generator
也可以自行下載下傳項目代碼進行建構：
git clone https://github.com/JakHuang/form-generator.git
然後安裝依賴，使用 YARN
yarn
或 NPM 安裝依賴
npm install
在本地運作表單設計器，運作
npm run dev
也可以建構之後進行部署
npm run build
Form-Generator 項目配套有 JSON 解析器，可以把 JSON 轉化為真實的表單代碼，可以使用 NPM 安裝：
npm i form-gen-parser
另外，form-generator 還有配套的 VSCode 插件 Form Generator Plugin，使用 VSCode 的開發者們可以進行安裝，幫助完成基本的表單代碼搭建任務。
fms-form-generator庫
示例
Form-Generator 的主要界面是一個表單設計器：
表單設計器
可以看到，界面的左側擺放了不同的輸入元件，包括單行文本、計數器、下拉選擇、日期範圍和按鈕等，基本滿足了一般項目對于表單的所有需求。
表單設計器的元件選擇
界面中間是設計得到的表單，點選左側的元件，便可在表單中添加。同時，表單中還提供了元件的複制和删除功能，可以自由進行編輯。
界面的右側是元件屬性和表單屬性，可以對目前選中的元件的各項屬性進行修改，如字段名、标題、标簽寬度、預設值、尺寸等，進行所需元件的定制；也可以對表單屬性進行修改，包括表單模型、校驗模型、标簽對齊等，實作表單層級的配置。
元件屬性編輯
在完成了表單的設計之後，就可以點選界面上部的運作按鈕，在這裡我們可以選擇生成類型，包括頁面和彈窗兩種，其中彈窗類型會把表單嵌入到對話框元件中。
生成類型
完成類型選擇後，我們就能得到生成的 Vue 代碼，包括 Vue 模闆、JS 和 CSS 代碼：
Vue模闆代碼
JS代碼
可以看到，生成的代碼可讀性高，品質較好，可以直接引入到項目中進行使用。代碼生成器也提供了一個美觀的編輯器界面，可以直接對生成的代碼進行編輯，并在右側重新渲染修改的表單。
除了直接生成代碼外，form-generator 還提供了把表單導出為 JSON 格式的功能，便于進行存儲和傳輸。Form-generator 設計了一種具有特定格式的 JSON 格式用于 Element UI 表單的表示，可以在代碼生成器中直接導出 JSON 檔案，使用時再利用配套的 form-gen-parser 進行解析，重新生成表單代碼。
form-generator的JSON表示
表單的JSON表示以fields清單存儲各表單項，各表單項一般包括：
- __config__：包括如标簽、寬度等配置屬性
- __slot__：表單項的插槽
- __vModel__：綁定的資料模型
- style、disabled等原生屬性
以此 JSON 檔案，便可還原表單，得到生成的 Vue 代碼。我們還可以以此為模闆，添加變量，隻需修改 JSON 資料就進行相似表單的自動化批量生成。
表單的JSON表示
總結
Form-Generator 作為 Element UI 的表單設計和代碼生成器，簡化了表單的設計和代碼編寫工作，使得表單的設計工作也能夠“所見即所得”，在一些前端設計定制化要求不高的場景下，使用起來十分友善，既使得設計人員能夠獲得期望的表單設計，也減輕了代碼開發人員的在前端設計方面的額外工作，一舉兩得。
Form-Generator 的實作需要對于 Vue 和 ElementUI 十分熟悉，尤其在表單的 JSON 表示的生成和解析方面的工作，頗具技巧；同時，該項目本身也是一個優秀的前端應用，感興趣的開發者可以進行代碼的閱讀學習，參與開源貢獻。