официальный сайт алифайбингalibaba.github.io/ice
Каждый раз, когда вы начинаете новый проект, независимо от того, большой он или маленький, делайте следующее:
- Выбор кадра
- Инициализируйте леса (например, используяcreate-react-appилиvue-cli)
- Возможно, вы выбрали скаффолдинг с открытым исходным кодом, клонируйте репозиторий
- Посмотрите вокруг для колес
- Установить различные зависимости
- Создайте новую страницу и напишите логику
- дизайн меню
- Проектная маршрутизация
- При создании новой страницы копируйте старые модификации страницы
- Зарегистрируйте новую страницу с маршрутом, зарегистрируйте меню
- Закончив эту страницу, сделайте следующую, создайте новый файл, скопируйте код, зарегистрируйте маршрут...
Вы обеспокоены? Быть стильным!
Сегодня мы представим продукты Alibaba с открытым исходным кодом:летающий лед
что такое летающий лед
«Много материалов многократного использования, чрезвычайно быстрое создание промежуточных и фоновых приложений с помощью инструментов с графическим интерфейсом».
Этот лозунг по-прежнему очень точен:
Feibing — это комплексное решение для создания промежуточных и фоновых приложений (на самом деле его можно использовать и для не промежуточных и фоновых приложений).
Экстремальная скорость достигается за счет «массивных многоразовых материалов» и «инструментов разработки графического интерфейса».
Рабочий процесс разработки с использованием FeiBing выглядит следующим образом:
下载 GUI 工具并安装 => 可视化的选择我们提供的初始模板创建项目 => 可视化的创建页面并选择我们提供的 100+ 高质量可复用区块 => 生成代码进行二次开发 => 开发完成之后点击打包编译出 HTML、JS、CSS 文件 => 部署使用
В течение всего процесса вы можете щелкать и работать полностью с помощью инструментов с графическим интерфейсом, не нужно устанавливать и настраивать интерфейсные инструменты разработки, такие как среда Node, и не нужно настраивать сценарии сборки, такие как веб-пакет, Мы создали их все в соответствии с Передовой опыт Taobao в области внешнего интерфейса. Кроме того, для большинства бизнес-требований мы разработали соответствующие материалы, которые можно визуально собрать через GUI, максимально избегая написания дополнительной бизнес-логики.
источник материала
Далее очень длинная картинка, которая размыта для объёма, но количество блоков в ICE чувствуется:
оригинальная веб-ссылкаalibaba.github.io/ice/block
До сих пор ICE поддерживал материальными ресурсами три основных фреймворка React Vue Angular.
Например, моему текущему проекту нужен редактор форматированного текста, вы можете видеть, что в блоке есть три редактора на выбор.
Все это можно добавить в проект с помощью графического интерфейса.Ниже показано, как установить клиент iceworks для создания новой страницы в проекте.
как использовать
Установить
Для реальной демонстрации ранее установленное приложение было намеренно удалено.
Демонстрационная система — macOS, а iceworks поддерживает версию для Windows.
адрес загрузки айсворксAlibaba.GitHub.IO/ice/icework…
После небольшого ожидания загрузка завершена. После установки у меня получилось вот такое приложение:
начать
После установки открываем его и видим очень простой интерфейс:
Перейдите на вкладку «Шаблоны», чтобы увидеть список строительных лесов, которые в настоящее время предоставляет FeiBing:
Метка блока может видеть список блоков
плагин
настраивать
Это все функции на поверхности, давайте создадим проект, чтобы испытать
Создайте новый vue-проект
FeiBing начинался с react, а сейчас исходников материалов vue и Angular относительно мало, переключаемся на вкладку vue...
Туда попало что-то странное?
Правильно, D2Admin вышел на ICE!
(В этот момент вы можете подумать: я пошел, это оказалась софтовая статья после ее долгого прочтения! На самом деле нет, когда я работал над D2, но это был не открытый исходный код, друг порекомендовал мне ICE инструмент, и в то время я чувствовал себя очень хорошо. Неожиданно меня пригласила команда разработчиков ICE, и я был очень рад разработать версию ICE. Это действительно хороший инструмент. См. введение ниже.)
Разработчики у меня и АлимесяцПосле стыковки родился D2Admin ICE, как первый на платформе FeibingНеофициальные леса vue, D2Admin ICE возлагает большие надежды! Вот демонстрация использования этих строительных лесов, чтобы показать, какнет кодастраница сборки,нет кодаГрафик!
Выбор D2Admin ICE в качестве начального шаблона позволит нам заполнить адрес сохранения проекта:
После заполнения шаблона начните загрузку шаблона.После загрузки он подскажет, хочу ли я установить зависимости немедленно:
Чтобы динамическая картинка не была слишком большой, я не стал записывать процесс установки:
Когда я написал это выше, мне было предложено завершить установку зависимостей (это очень удобно):
энн... нет проблем.
Стартовый проект
нажмите启动调试服务Служба отладки будет открыта локально, а выполнение проекта vue по умолчаниюnpm start:
Откройте отображаемую ссылку, и вы увидите, что проект стабильно работает:
D2Admin ICE по сутиd2-admin-start-kitСпециальная версия, модифицированная часть кода, чтобы адаптироваться к логике ICE, вы можете видеть, что шаблон очень чистый, нет примера демонстрации какой-либо полной версии:
После закрытия терминала, интегрированного в ICE, вы можете увидеть панель проекта, которая может отображать, какие страницы появляются, какие зависимости установлены и т. д.:
новая страница
нажмите新建页面Откроется новый интерфейс страницы:
Выберите блок случайным образом, чтобы создать новую страницу (время ожидания между ними — это загрузка кода блока из npm).
Выберите блок:
Эффект:
Попробуем выделить несколько блоков:
Меню генерируется автоматически:
Эффект страницы:
Проверьте автоматически сгенерированный каталог кода:
Автоматически генерируемые компоненты страницы:
Автоматически сгенерированные файлы стилей:
Есть некоторые вещи, которые должны быть там, и некоторые вещи, которых там быть не должно, и даже хуки жизненного цикла были написаны для вас!
Эпилог
После того, как это продемонстрирует, я сгенерировал две страницы. Я не написал ни строчки кода. Остальное - изменить модификацию, и компоненты, которые вам нужны, будут изменены на странице, сделайте модификацию.
Команда D2Admin также сделает все возможное, чтобы сотрудничать с командой ICE для разработки общедоступного блока Vue в будущем, чтобы ускорить экологическое строительство ICE Vue.Мы также надеемся, что многие вьюеры смогут принять в нем участие.Благодаря платформе процветание сообщество полезно для всех.
D2Admin ICE будет обновляться в соответствии с D2Admin Start Kit, если вам действительно нравится полная версия D2Admin, можно вычесть ее из полной версии :)
D2 Projects
| адрес | описывать |
|---|---|
| Домашняя страница команды | Домашняя страница команды, которой принадлежит D2Admin |
| китайский документ | китайский документ |
| Адрес предварительного просмотра полной версии D2Admin | Адрес предварительного просмотра полной версии |
| Полная версия D2Admin на гитхабе | Репозиторий полной версии Github |
| Облако кодов полной версии D2Admin | Код полной версии Cloud Mirror Warehouse |
| URL предварительного просмотра D2Admin Lite | Адрес предварительного просмотра начальной версии |
| D2Admin Lite гитхаб | Упрощенный репозиторий Github |
| Облако кода D2Admin Lite | Упрощенная версия Code Cloud Mirror Warehouse |
Официальный публичный аккаунт команды проекта с открытым исходным кодом
Место, где эта статья включена в проектную документацию
В конце концов, если ты закончишь и считаешь, что это неплохо, надеюсь, ты сможешь прийти.Домашняя страница проектанажмите на одинstarВ качестве вашего признания и поддержки этого проекта, спасибо.