Представляем Protovue — инструмент прототипирования компонентов для Vue.js

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

От автора: при прототипировании новых интерактивных элементов для приложения часто полезно разметить структуру макета, чтобы показать, как эти фрагменты складываются вместе. С этим подходом связано несколько проблем.

 

От разработчиков может потребоваться много усилий, чтобы существенно перестроить макет приложения, чтобы изучить небольшое, но значимое взаимодействие.

Получить нужный уровень абстракции довольно непросто. Если вы создадите прототип в точности как прямое приложение, вы приглашаете команду рассматривать проблемы дизайна, а не основные проблемы.

Имея это в виду, v1Labs недавно запустил новый фреймворк компонентов с открытым исходным кодом под названием Protovue. Он предназначен для того, чтобы предоставить дизайнерам и разработчикам инструмент для сборки абстрактного макета, позволяющего создавать прототипы всего за 5 минут.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Функциональная альфа-версия доступна уже сегодня. Я покажу вам, как прототипировать во Vue js компоненты и создать следующий макет. Полный код размещен на Codesandbox.io.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Установка Protovue

Если вы используете CodeSandbox, просто добавьте v1labs-protovue в качестве зависимости. Чтобы добавить к локальному приложению Vue.js выполните:

Затем добавьте Protovue в качестве плагина при инициализации Vue.

Настройка сетки

По умолчанию сетки рассчитаны на 100% ширины, 100% высоты. Это хорошая идея добавить сетку в качестве первого элемента v-app.

Вышеуказанная сетка состоит из 12 столбцов и 10 строк с зазором в 10 пикселей между ячейками. Также обратите внимание на атрибут guides. Он отображает сетку из синих линий, чтобы помочь вам в размещении ячеек. Вы можете удалить его, когда разместите все ячейки.

Сетка с направляющими должна выглядеть так.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Добавление ячеек

Сначала добавим ячейку для навигации.

В этом случае мы просто хотим, чтобы ячейка охватывала 12 столбцов и 1 строку. Это должно выглядеть так.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Теперь для левой боковой панели.

Эта ячейка 3×9 имеет атрибут y=»1″, который смещает ячейку на 1 строку сверху.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Правая боковая панель очень похожа на левую.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Мы разместили ее в 1 столбец и сместили на 10 столбцов слева.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Пока все понятно? Теперь добавим ячейку основного контента и ячейку футера.

Теперь мы разместили все ячейки, и можно удалить атрибут guides из <v1-grid>. На текущий момент вы должны получить следующее.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Добавление условной навигации

В первой ячейке добавьте элемент <v1-nav />.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Содержимое левой боковой панели

Для элемента изображения задано centered, round и 70×70.

Для текста задано centered и 3 строки.

Элемент аватара повторяется 6 раз.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Содержимое правой боковой панели

Подобно содержимого элементам левой боковой панели. Обратите внимание, что добавление middle для ячейки вертикально центрирует контент.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Футер

Достаточно легко. Просто добавьте элемент <v1-footer />.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Мы готовы начать прототипирование

Для того, чтобы поднять ваше приложение, требуется всего несколько строк кода.

Представляем Protovue - инструмент прототипирования компонентов для Vue.js

Автор: Dane Lyons

Источник: https://hackernoon.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Фреймворк VUE JS

VUE JS - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree