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
великолепна и содержит информацию о том, как
- Вставить теги
meta
в голову - Используйте Google Analytics на стороне клиента
- Добавить статические файлы
scss
/css
от сторонних поставщиков (Bulma
)
- Мне очень нравится, что это так самоуверенно. В нем уже настроена вся структура папок, чтобы вы могли сразу приступить к работе.
- Легко создать статическую страницу, которую можно развернуть на хостинге статических сайтов, таком как netlify.
Две вещи, которые не сразу сработали с nuxt
:
- Прокрутка до
#section
s на той же странице при нажатии на тег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