Слияние кода завершено, страница обновится автоматически
ВВЕДЕНИЕ
vdesjs-drag
Демонстрационное изображение: showHow.gif
Введение
vdesjs-drag — это проект, основанный на Vue.Draggable, который представляет собой компонент перетаскивания, созданный на основе Sortable.js. Проект также использует другие инструменты и библиотеки для реализации своих функций.
Выбор технологий
| Технология | Описание |
|---|---|
| Vue.Draggable | Основанный на Sortable.js компонент перетаскивания для Vue |
| Vuex | Инструмент управления состоянием для Vue, используется для хранения общих переменных |
| Clipboard.js | Плагин для копирования текста в буфер обмена |
| Element-UI | UI-фреймворк для настольных приложений на основе Vue 2.0 |
| Vant | Библиотека компонентов для мобильных приложений от команды ZEN |
| Handlebars | Шаблонизатор JavaScript |
| Vue-codemirror | Редактор кода на основе CodeMirror для Vue |
| FileSaver.js | Библиотека для сохранения файлов на диск |
| Js-beautify | Библиотека для форматирования кода |
Структура проекта
vdesjs
├── build
├── config
├── docs (vuepress)
│ ├── cooperation
│ └── guide
├── src
│ ├── assets (ресурсы)
│ | ├── h5 (режим h5)
│ | | ├── basics (базовые компоненты)
│ | | ├── business (бизнес-компоненты)
│ | | ├── feedback (компоненты обратной связи)
│ | | ├── form (формы)
│ | | ├── nav (навигация)
│ | | └── show (демонстрация)
│ | ├── icon
│ | └── pc (режим pc)
│ | └── basics
│ ├── common
│ | ├── css (общие стили)
│ | └── js (общие скрипты)
│ | ├── h5
│ | └── pc
│ ├── components (компоненты)
│ | ├── componentLib (json-данные левой панели)
│ | ├── h5 (h5-компоненты)
│ | | ├── basics (левые компоненты базовой функциональности)
│ | | ├── business (левые бизнес-компоненты)
│ | | ├── feeback (компоненты обратной связи)
│ | | ├── form (формы)
│ | | ├── nav (навигационные компоненты)
│ | | └── show (компоненты демонстрации)
│ | ├── pc (pc-компоненты)
│ | | ├── basics
│ | | └── media
│ | ├── pcomp (правые компоненты панели свойств)
│ | └── sub (дочерние компоненты vdesjs)
│ ├── handlebars (шаблоны)
│ | ├── helpers (пользовательские помощники)
│ | └── template
│ | ├── h5 (шаблоны h5-режима)
│ | └── pc (шаблоны pc-режима)
│ ├── mixins (миксины)
│ ├── page (маршрутизация)
│ ├── preview (компоненты предварительного просмотра)
│ ├── router (конфигурация маршрутизации)
│ └── store (vuex-конфигурация)
└── static
Расширение компонентов
Для получения более подробной информации посетите официальный сайт проекта.
Документация Официальная документация: http://china-bin.gitee.io/vdesjs/ Демоверсия: http://china-bin.gitee.io/vdesjs/demo/#/
Проект будет постоянно обновляться и улучшаться. Если у вас есть какие-либо вопросы или предложения по проекту, вы можете связаться с автором.
Техническая поддержка и общение Группа технической поддержки: 1125390832 ## Сборка
npm run build --report
## Завершенные функции
1. Очистить холст.
2. Сгенерировать код Vue.
3. Компоненты Vant на H5 можно перетаскивать.
4. Сгенерировать JSON-код.
5. Предварительный просмотр в режиме H5.
6. Завершить расширение компонентов адаптивного макета для ПК.
7. Загрузить HTML-файл на локальный компьютер.
8. Создать сайт vdesjs и демонстрационный демо-сайт.
9. Добавить режим свободного холста (в режиме свободного холста компоненты можно свободно перетаскивать, чтобы изменять их размер, макет, а также доступны функции выравнивания по сетке, истории и комбинирования компонентов).
## Функции, которые планируется добавить (приветствуются дополнительные предложения)
## Описание сценария использования
1. Предположим, я хочу разработать мобильную страницу H5 на основе компонентов Vant, но не хочу писать код один за другим. В этом случае я могу использовать vdesjs, чтобы перетащить компонент с левой стороны и отредактировать атрибут. После нажатия кнопки «Сгенерировать код Vue» этот код можно скопировать в наш проект. (Этот сгенерированный код должен быть очень удобным для разработки и теоретически мало чем отличается от кода, который мы пишем вручную. Если у этого сгенерированного кода есть проблемы, все они могут быть решены путем ручной модификации соответствующего шаблона кода компонента в соответствии с синтаксисом шаблона handlebars).
## Адрес открытого исходного кода
* [Gitee](https://gitee.com/china-bin/vdesjs)
* [github](https://github.com/china-bin/vdesjs)
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )