formily admin template

formily-admin-template

這是一個formily admin 管理後台。可以選擇Vue2/React 和Element UI/Antd UI結合axios & iconfont & lint，這些建造後台必要的東西。

功能範例來自vue-element-admin 項目，本倉庫只是用@formily 相關庫來取代其中的一些通用功能， 元件類別均由功能範例項目提供

• Vue2 基於[email protected]進行構建
• React 基於webpack@^4.41.5",進行構建

相關項目

• 功能範例來源vue-element-admin

Vue Build Setup

 # 克隆项目
git clone https://github.com/wangwangtou/formily-admin-template.git

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 进入mock目录

cd formily-admin-template/mock

# 安装依赖
npm install

# 进入项目目录
cd formily-admin-template/vue2

# 安装依赖
npm install

# 启动服务
npm run dev

瀏覽器造訪http://localhost:9527

React Build Setup

 # 克隆项目
git clone https://github.com/wangwangtou/formily-admin-template.git

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 进入mock目录

cd formily-admin-template/mock

# 安装依赖
npm install

# 进入项目目录
cd formily-admin-template/react

# 安装依赖
npm install --force

# 启动服务
npm run start

瀏覽器造訪http://localhost:3000

formily-designable 範例

在react 專案中包含formily-designable 範例， 可在專案中利用designable 對頁面進行修改， 修改後的schema在記憶體中儲存，返回頁面後可以查看更新過的頁面

• ./react/designable 主目錄
• ./react/designable/components 專案元件註冊到designable的元件訊息
• ./react/designable/decorator 為designable增加decorator設置，可以從多個定義的decorator中選取
• ./react/designable/schemas components和decorator的SchemaEditorWidget配置
• ./react/designable/setters SchemaEditorWidget的元件
• ./react/designable/dn 供designable控制項的元件清單與分類
• ./react/designable/formily formily元件匯總，含antd和項目元件
• ./react/designable/main designable的渲染

在vue中使用

目前方案是使用React 來完成設計器部分，然後透過systemjs 載入到Vue 中。

• 使用react來定義各類控件，並對控件屬性做映射，調整EditorSchema。 （參考上述目錄說明）
• 在./react/editor.tsx 匯出需要用到的模組
• 透過cd ./react && npm run build:editor ，建構editor 的systemjs模組文件， 會產生到./vue2/public 目錄，直接當做vue專案的模版。模版包含了editor的systemjs importmap
• 透過vue2/src/views/designable/index.vue 來載入designable

License

MIT license.

Copyright (c) 2017-present wangwangtou