Как создавать красивые сайты с минимальными знаниями в программировании и дизайне.
В эпоху красивых и простых веб-сайтов просто функционального веб-сайта явно недостаточно. Хотя внутренняя функциональность веб-сайта может оставаться неизменной, важно помнить о визуальном дизайне и обеспечивать оптимальное взаимодействие с пользователем. Это может быть сложно, особенно если вы на самом деле не дизайнер. К счастью, у нас есть системы дизайна, которые представляют собой основные рекомендации, обеспечивающие единообразие и удобство для пользователей. Некоторые популярные системы дизайна, о которых вы, возможно, слышали, - это Bootstrap, Bulma и Material Design.
Материальный дизайн - это популяризированная Google система, которая включает в себя рекомендации и принципы Google по дизайну. С помощью Material Design очень просто создавать приятные и простые в использовании веб-сайты. Хотя может показаться, что создание файла CSS и включение его в ваше приложение выполнит свою работу, при этом не используются все преимущества доступных функций дизайна. Вот почему был создан Vuetify, который представляет собой сборку библиотеки компонентов Vue с учетом дизайна материалов.
Для создания веб-сайтов на Javascript Vue - лучший выбор для новичков, поскольку он чрезвычайно прост и позволяет создавать профессионально выглядящие веб-сайты в тот же день. Vuetify делает это еще проще и добавляет компоненты и элементы дизайна, способные произвести впечатление на любого пользователя.
В этой статье я покажу, как легко создать модуль входа в систему, подобный тому, который используется в Google. Не пугайтесь, когда увидите код, он предельно прост, и вы его очень быстро выучите.
Начиная
Перед началом, если вы никогда раньше не использовали Vue, нам нужно будет установить несколько вещей, которые не должны быть такими сложными. Сначала загрузите NodeJS, который нам понадобится для установки пакетов. Просто зайдите на официальный сайт и следуйте инструкциям по загрузке.
Во-вторых, откройте терминал или командную строку и введите:
npm install -g @vue/cli
Вот и все, теперь у нас есть Vue, и мы можем приступить к созданию нашего первого веб-сайта.
Подготовка проекта
Вот что вы сможете создать к концу этой статьи.
Для начала давайте сначала создадим наш проект. В консоли введите:
vue create login_project
Теперь нажмите Enter, чтобы выбрать настройку по умолчанию. После завершения настройки мы перейдем в нужную папку и добавим Vuetify с предустановкой по умолчанию. Третья команда запустит наш веб-сайт, и мы сможем увидеть, что мы меняем.
cd login_project vue add vuetify npm run serve
Чтобы увидеть свой веб-сайт, введите «localhost: 8080» в любом браузере. Откройте свой проект в Visual Studio Code или любой IDE по выбору. Откройте App.vue, который является отправной точкой для нашей программы. Затем удалите все в шаблоне. Отсюда у нас есть чистая страница, и мы можем сделать наш экран входа в систему.
То, что мы помещаем в скобки шаблона, будет скомпилировано. Скобки скрипта содержат компоненты для нашего проекта.
Кодирование
Теперь мы можем добавить элементы, которые нам нужны для проекта. Чтобы статья была как можно проще, следите за репозиторием GitHub, из которого вам понадобится только файл App.vue. Во-первых, в v-app добавьте v-карту. Это контейнер для всех элементов, которые у нас есть, поэтому мы легко сможем всем управлять.
Теперь добавьте v-card-title, который сделает наш заголовок красивым и чистым. Затем поместите внутри него элемент заголовка, используя h1.
Затем мы хотим добавить тело, а также поля имени пользователя и пароля. V-card-text и v-form сделают его красивым и четким. V-текстовое поле - это просто наш текст. Вы можете заметить, что этикетка становится немного меньше и поднимается вверх в соответствии со стандартами материального дизайна.
<v-card-text>
<v-form>
<v-text-field label="Username" />
<v-text-field label="Password" />
</v-form>
</v-card-text>
Если добавить type = ”password” в поле пароля прямо перед меткой, наши входные данные будут скрыты, и это станет правильным полем для пароля.
Теперь мы можем добавить в наш код некоторые функции. v-card-actions будут хранить все наши функциональные компоненты. Мы просто добавляем v-кнопку и придаем ей цвет. V-образная проставка аккуратно разделит наши кнопки.
<v-card-actions> <v-btn color="success">Register</v-btn> <v-spacer></v-spacer> <v-btn color="info">Login</v-btn> </v-card-actions>
К настоящему времени у нас должен быть красивый экран входа в систему, и мы почти закончили. Мы можем добавить изображения в наши поля и добавить кнопку «Показать пароль». Эта кнопка позволяет пользователям скрывать и открывать пароль в любое время. Мы делаем это, добавляя прослушиватель кликов и основанное на нем условие.
Добавить значки просто, и мы можем сделать это с помощью следующих модификаций текстовых полей.
<v-text-field label="Username" prepend-icon="mdi-account-circle" /> <v-text-field type="password" label="Password" prepend-icon="mdi-lock" />
Все становится немного сложнее с добавлением значка видимости глаза и его функциональности. Как и на любом экране входа в службу Google, вы можете увидеть глазок справа, чтобы ваш пароль был виден. Мы можем реализовать это с некоторыми изменениями. Во-первых, нам нужно немного изменить часть кода скрипта.
После экспорта по умолчанию нам нужно поставить запятую и добавить данные. Здесь мы можем хранить все наши переменные. Для целей этого проекта нам нужен только один. Это позволит системе узнать, отображается ли пароль или нет. Изначально мы установим для него значение false, чтобы оно было скрыто по умолчанию.
data: () => ({
showPassword: false
})
Во-вторых, нам нужно снова изменить текст пароля, чтобы добавить значок и настроить его на основе переменной showPassword. Эта часть немного сложна. Ранее мы установили тип «пароль», чтобы он никогда не был виден. Теперь мы хотим иметь возможность изменить это, поэтому мы добавляем двоеточие, что означает, что оно будет изменяться каждый раз, когда что-то происходит. Значок добавления добавит значок глаза, и в зависимости от переменной showPassword он будет установлен на обычный глаз или скрещенный. Наконец, если мы щелкнем по значку, он изменится на противоположный. Попробуй посмотреть, как это работает.
<v-text-field :type="showPassword ? 'text' : 'password'" label="Password" prepend-icon="mdi-lock" :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showPassword = !showPassword" />
Заключение
Vuetify и материальный дизайн могут быстро превратить любого в профессионального UI-дизайнера. Начните с простых вещей, таких как экран входа в систему, который я продемонстрировал в этой статье, и вскоре вы сможете создавать практически все, что захотите. Разработчики приложений делают все возможное, чтобы упростить процесс создания и дизайна веб-сайтов, поэтому сейчас лучшее время для начала. Приятного вам процесса и удачи в пути!
Полный код для руководства
Получите доступ к экспертному обзору - Подпишитесь на DDI Intel
