Введение

Esview — это генератор кода страниц на Vue, основанный на iview-UI.

С помощью Esview можно получить код файла .vue, перетаскивая компоненты на страницу. Также можно настраивать собственные перетаскиваемые компоненты.

Онлайн-демонстрация

http://47.94.2.0:9090

Документация (https://github.com/furioussoul/esview/blob/master/ui/doc/SUMMARY.md)

1. Генерация кода:

Можно собрать страницу, перетащив компоненты с левой стороны и поместив их в среднюю часть. Чтобы увидеть сгенерированный код, нажмите «code» на панели действий, а чтобы скопировать его — нажмите copy.

2. Настройка собственных перетаскиваемых компонентов:

Необходимо знать, как регистрировать компоненты в Vue. Это первый шаг. Второй шаг — перейти на страницу «Develop->ManageControl», скопировать код «Div» и изменить exports.* в соответствии с собственными компонентами. После нажатия кнопки сохранения вы увидите изменения на странице сборки.

Установка

• Фронтенд: Esview использует Vue и iview, поэтому сгенерированный код зависит от Vue и iview.
• Бэкенд: Java (springboot), поэтому сначала необходимо установить JDK.
• База данных: MySQL, файл SQL находится в каталоге «server» под названием «soul-esview.sql».

Теория

Как реализовать DND: я использую HTML API, код находится в dnd.js.

Как генерировать код: структура данных за собранной страницей представляет собой синтаксическое дерево. Я использую рекурсивный нисходящий анализ для получения окончательного кода .vue.

Лицензия MIT

Copyright (c) 2017-present, SunZhengJie(Furioussoulk).