Vuejs с Nuxt

Я использовал nuxt, начальный шаблон для изоморфных приложений Vue.js, который поставляется со встроенной маршрутизацией, рендерингом на стороне сервера, хранилищем состояний (Vuex) и многими другими полезными функциями. Это как zeit’s next или create-react-app для React. И я люблю это. Для меня он был намного более стабильным, чем next, включает в себя больше полезных функций и его легче настроить, чем create-react-app.

  • Все просто работало. Я хотел использовать SCSS вместо обычного CSS, и мне нужно было только npm install node-sass sass-loader, а их vue-loader каким-то образом заработало без необходимости менять конфигурацию веб-пакета. 🤷🏻‍
  • Как и в случае с Vue, документация nuxt великолепна и содержит информацию о том, как
  1. Вставить теги meta в голову
  2. Используйте Google Analytics на стороне клиента
  3. Добавить статические файлы scss/css от сторонних поставщиков (Bulma)
  • Мне очень нравится, что это так самоуверенно. В нем уже настроена вся структура папок, чтобы вы могли сразу приступить к работе.
  • Легко создать статическую страницу, которую можно развернуть на хостинге статических сайтов, таком как netlify.

Две вещи, которые не сразу сработали с nuxt:

  • Прокрутка до #sections на той же странице при нажатии на тег a. Вероятно, это ошибка в их маршрутизаторе. Я использовал исправление, описанное в этой проблеме.
  • Я использую Single File Components (один файл, содержащий HTML, JavaScript и CSS компонента), и VSCode не может префиксировать HTML-разметку с моей интеграцией eslint-prettier. Я должен дополнительно исследовать это. Однако это было исправлено при запуске eslint --fix в командной строке.

Я обязательно воспользуюсь nuxt снова.

Укладка с Булмой

Я использовала Булму для укладки. Я впервые использую существующий современный CSS-фреймворк. Обычно я заканчиваю тем, что пишу весь CSS с нуля, потому что макет никогда не заканчивается так, как я хочу, с этими фреймворками. Меня немного раздражает Булма. С одной стороны, это было определенно быстрее, чем самостоятельная реализация CSS для системы Hero, Modal и column. С другой стороны, сначала мне пришлось изучить его классы CSS, которые иногда могут быть немного… многословными. (Я смотрю на вас, has-text-weight-light.) Самой большой проблемой была документация. Она недоступна для поиска, так что в итоге вы щелкаете по разделам и надеетесь найти CSS. модификаторы, которые вы хотите. Это в Syntax или Helpers?

Что за хрень вообще такое категория Синтаксис?

Некоторые классы также вообще не документированы, я смог найти эти классы CSS только через сопутствующие проблемы GitHub.

Хорошо, что я не столкнулся с какими-либо причудами CSS, и CSS работал, как и ожидалось.

Пользовательские компоненты

На целевой странице есть некоторые компоненты пользовательского интерфейса, которые мне пришлось написать самому.

Самым интересным было модальное окно электронной почты с формой регистрации: его можно вызвать из четырех разных мест, но это всегда одно и то же модальное окно. Я не хотел включать модальное окно четыре раза в разные разделы и добавлять локальное состояние отображения/скрытия в каждом из этих разделов Vue.js. Вместо этого я написал глобальный плагин Vue, который внедряет функцию showModal в каждый компонент Vue.

Еще один компонент — CTA-кнопка. Я сделал его светящимся с помощью перехода CSS:

@keyframes glow-button-glow {
    from {
        background-color: $cta-color;
        box-shadow: 0 0 9px $cta-color;
    }
    50% {
        background-color: darken($cta-color, 10%);
        box-shadow: 0 0 18px darken($cta-color, 10%);
    }
    to {
        background-color: $cta-color;
        box-shadow: 0 0 9px $cta-color;
    }
}

Если это не заставляет вас нажимать эту кнопку, я не знаю, что делает.

Дизайн

Я очень горжусь дизайном. Мне не стыдно признаться, что я украл много идей с других лендингов. В конце концов, большинство продающих/лендинговых страниц имеют одинаковую структуру, и каждый творческий процесс сводится к ремиксу существующих идей.

Обложка книги

Одной из таких вещей является 3D-обложка книги от psdcovers, которую, кажется, используют все.

Дизайн логотипа появился совершенно случайно. У меня есть 3D-рендеринг логотипа EOS из одного из моих других проектов. Я поигрался с ним в Блендере, дернул несколько ползунков и вдруг у меня появилась эта обложка, которая мне понравилась. Это один из тех случаев, когда стоит пройти курс компьютерной графики. У вас есть общее представление о различных типах материалов (Diffuse, Glossy, Glass) и настройках освещения (окклюзия окружающей среды). Затем вы играете и с помощью суперважной немедленной обратной связи получаете результат, который вам нравится.

Делитель

Наличие жестких краев от раздела к разделу не выглядит привлекательным. Для нижнего колонтитула страницы я разработал SVG, состоящий из двух замкнутых закрашенных кривых, накладывающихся друг на друга. Это придает нижнему колонтитулу приятный эффект.

Развертывание

Как всегда, я развертываю netlify каждые git push. Я также позволяю им управлять моим DNS — вы получаете HTTPS бесплатно, без необходимости продлевать его самостоятельно. Вам просто нужно указать команду сборки и выходной каталог, то есть generate и dist для nuxt.

Резюме

Использование Vue.js с nuxt отлично подходит для создания статической целевой страницы. У меня не было опыта работы с Vue, и я мог довольно быстро его освоить. Я люблю однофайловые компоненты. 😍 Я не использовал библиотеки компонентов Vue, HTML с Bulma CSS и пару пользовательских компонентов было достаточно. Вот полученная целевая страница. Если вы хотите узнать о разработке блокчейна и смарт-контрактах, не стесняйтесь зарегистрироваться.

Первоначально опубликовано на cmichel.io