formily admin template

formily-admin-template

This is a formily admin management background. You can choose Vue2/React and Element UI/Antd UI combined with axios & iconfont & lint, which are necessary to build the backend.

The functional examples come from the vue-element-admin project. This warehouse just uses @formily related libraries to replace some of the common functions. The component classes are all provided by the functional example project.

• Vue2 is built on [email protected]
• React is built based on webpack@^4.41.5",

Related projects

• Function example source 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

Browser access 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

Browser access http://localhost:3000

formily-designable example

The react project contains formily-designable examples. You can use designable to modify the page in the project. The modified schema is saved in memory. You can view the updated page after returning to the page.

• ./react/designable home directory
• ./react/designable/components The component information of the project component registered to designable
• ./react/designable/decorator adds decorator settings to designable. You can choose from multiple defined decorators.
• SchemaEditorWidget configuration of ./react/designable/schemas components and decorator
• ./react/designable/setters Components of SchemaEditorWidget
• ./react/designable/dn Component list and classification for designable controls
• ./react/designable/formily A summary of formily components, including antd and project components
• Rendering of ./react/designable/main designable

Use in vue

The current plan is to use React to complete the designer part, and then load it into Vue through systemjs.

• Use react to define various types of controls, map control properties, and adjust EditorSchema. (Refer to the catalog description above)
• Export the modules you need to use in ./react/editor.tsx
• By cd ./react && npm run build:editor, the systemjs module file of the editor will be generated to the ./vue2/public directory, which can be directly used as a template for the Vue project. The template contains the editor's systemjs importmap
• Load designable through vue2/src/views/designable/index.vue

License

MIT license.

Copyright (c) 2017-present wangwangtou