Vue Json Design

Vue 界面可视化设计器, основанный на vjform.

Этот дизайнер имеет функцию поддержки любых компонентов, используемых в Vue проектах, без необходимости дополнительной разработки. Можно определить поддерживаемые компоненты и их атрибуты, а также настроить отношения между атрибутами и данными, а также взаимодействие форм через дизайнер.

Особенности:

• Визуальное перетаскивание макета;
• Поддержка любых HTML-элементов и компонентов, используемых в Vue-проектах;
• Возможность редактирования данных и взаимодействия форм;
• Расширение редактора с помощью JSON-формата данных для поддержки компонентов и атрибутов;
• Представление компонентов в дизайнере с поддержкой редактирования форм.

Начало работы:

1. Клонируйте проект и выполните:

npm install

2. Затем:

npm run dev

Использование npm-пакета:

npm i vjdesign

import Vue from 'vue'
import vjdesign from 'vjdesign'
import 'vjdesign/dist/vjdesign.css'

Vue.use(vjdesign)

Для получения дополнительной информации посетите онлайн-пример (https://fyl080801.github.io/vjdesign/example), где добавлена функция экспорта. Для доступа к среде в Китае перейдите по ссылке (https://fyl080801.gitee.io/vjdesign).

Документация находится в процессе доработки (https://fyl080801.github.io/vjdesign/).

Динамическое представление форм с использованием jformer (https://gitee.com/fyl080801/jformer).

Если вы используете компонент jformer, можно напрямую использовать данные JSON из метаданных дизайнера для представления интерфейса.

Динамическое представление форм с использованием vjform (https://github.com/fyl080801/vjform).

При использовании vjform в качестве компонента представления необходимо включить в vjform следующие библиотеки:

• Выражение поддержки (https://github.com/fyl080801/jpresent-transform-expression);
• Преобразование области видимости Vue (https://github.com/fyl080801/jpresent-vue-extends);
• Редакторское преобразование дизайна (https://github.com/fyl080801/jpresent-transform-design).

import vjform from 'vjform'
import expression from 'jpresent-transform-expression'

vjform.use(expression)

Зависимости:

• vjform и связанные библиотеки:

  • vjform — визуализация на основе расширения vjform;
  • jpresent-transform-modern — простой шаблон преобразования на основе имени атрибута, например, «$:text»: «model.text1»;
  • jpresent-transform-expression — для адаптации к привычкам, подобным Excel, прямое использование в качестве преобразования при условии, что значение атрибута является выражением, например, «text»: «$:model.text»;
  • jpresent-vue-extends — позволяет компонентам поддерживать установку scopedSlot, реализуя преобразование для получения объекта области видимости родительского компонента scopedSlot.

• Lodash — использует API, такие как get, set и forEach.

• Vue — протестировано на версии 2.5.9, теоретически поддерживает версии выше 2.4.0.

• Vuedraggable — реализует перетаскиваемый макет.

• Codemirror — реализует прямое редактирование конфигурационных данных.