Как создать веб-сайт JAMstack с использованием Vue.js, Nuxt.js и Cosmic JS
В этом руководстве мы создаем веб-сайт JAMstack с помощью Cosmic JS. Давайте сначала определим наш JAMstack: «J» означает JavaScript, наше приложение использует Vue.js. «А» означает API, и мы используем мощные API Космический JS. «M» означает разметку, в данном примере это Nuxt.js. Для этого урока мы создадим простой веб-сайт фитнес-студии. В конце концов, мы развернем его на Netlify, который предоставляет бессерверные серверные услуги и хостинг. Давайте начнем.
TL;DR
Введение
Мы создаем веб-сайт JAMstack с мощными API Cosmic JS. Этот сайт посвящен фитнесу и телу. Первая страница является динамической с некоторыми навигациями, предоставляемыми Vue.js. В левой части навигации вы найдете ссылку на блог, данные которого также поступают из Cosmic JS через API-интерфейсы Cosmic JS. Начнем теперь с требований.
Требования
Одно и единственное требование Node.js. Установите его в своей системе, чтобы запускать команды npm.
Начиная
Здесь мы используем npm, но вы также можете использовать пряжу для установки пакетов. Поэтому, если вы установили вышеуказанное программное обеспечение, выполните следующую команду для быстрого запуска:
npx create-nuxt-app jamstack_app
Здесь jamstack_app — желаемое имя приложения. Теперь перейдите в корень созданной папки и выполните следующую команду, чтобы запустить ее в разработке:
npm run dev
Теперь посетите: для просмотра проекта в режиме разработки.
Узнайте больше о наборе быстрого старта Nuxt.js здесь: Стартовый набор Nuxt.js
Структура папок
После создания приложения вы получите ту же структуру папок, что и на картинке:
Поясним основные папки и файлы этой структуры. Файл package.json содержит запись обо всех модулях, установленных в вашем проекте. Папка Static содержит статические файлы, используемые в проекте, такие как логотип и изображения. Папка Pages содержит такие страницы, как домашняя страница, блог и т. д. В node_modules установлены все модули, а макет содержит стили проекта. Папка config создается нами для сохранения файла config.js, который будет использоваться во время динамических запросов к серверу Cosmic JS.
Конфигурация
Мы создали приложение Nuxt.js с помощью генератора приложений, но ожидается основная настройка, чтобы сделать наше приложение полным приложением JAMstack. С созданием приложения JavaScript и часть разметки приложения завершены. Теперь мы настраиваем часть API приложения, что означает часть Cosmic JS.
Для этого вам понадобится учетная запись Cosmic JS. Зарегистрируйтесь в Космическом JS официальный сайт, это абсолютно бесплатно. Затем создайте свободное ведро и создайте свой первый тип объекта: «блоги». Или вы можете импортировать встроенное ведро, способ его импорта указан в заголовке ниже.
Теперь щелкните параметр основных настроек на панели инструментов, откроется страница основных настроек, как показано выше. Запишите свой слаг ведра, Bucket_id. Теперь сгенерируйте ключи чтения и записи и сохраните их на своем компьютере. Теперь сохраните их и в своем проекте. Для этого создайте папку конфигурации и создайте в ней файл config.js и сохраните его, как показано ниже:
Встроенный ковш
Если вы не хотите создавать новое ведро, у вас есть возможность импортировать готовое ведро. Для этого загрузите файл Bucket.json из нашей кодовой базы Git и импортируйте его из своей панели инструментов с помощью параметра «Импорт/экспорт». Посмотрите на изображение ниже для наглядной справки:
Домашняя страница
Давайте начнем с первой страницы, которая является домашней страницей. В этом мы будем отображать динамические данные с сервера Cosmic JS с API, он покажет вам часть веб-сайта Vue.js. Здесь мы собираемся написать детали нашего веб-сайта и реализовать навигацию в заголовке веб-сайта, а в нижней части дадим кнопку для перехода к блогу. Проверьте код домашней страницы по адресу: pages/index.vue
Эта страница представляет собой шаблон плюс код vue.js и чистый динамический характер. Здесь мы применили ссылку внизу, которая ведет на страницу блога, и эта страница блога также является чисто динамической по своей природе.
Макет веб-сайта
Полный макет приложения закодирован в одном файле для хорошей структуры. Здесь мы настраиваем верхний и нижний колонтитулы и другие цветовые схемы приложения. Проверьте код для макета layouts/default.vue
Здесь мы определили основной цвет веб-сайта вместе с заголовком, нижним колонтитулом и навигационными эффектами. В навигации мы указали маршрут на страницу блога и маршрут на домашнюю страницу. В заголовке приложения мы дали навигацию домой к названию веб-сайта.
Страница блога
Это вторая страница нашего веб-сайта, она обрабатывает динамическую выборку данных с сервера Cosmic JS с помощью API-интерфейсов Cosmic JS. Прежде всего, проверьте код, а затем мы объясним его. Код находится по адресу: pages/blog.vue
На странице есть две части: первая — это шаблон, а вторая — часть JavaScript. В шаблоне мы указали путь к домашней странице с кнопкой «Назад», а также отобразили заголовок и основную часть блога.
В части JavaScript мы сделали запрос GET на сервер Cosmic JS с помощью Cosmic JS API. Этот API представляет собой комбинацию статического URL-адреса, слага корзины и типа объекта. В запросе GET ключ чтения необходим для получения данных с сервера. После успешного запроса мы манипулировали данными и передавали их в переменные, как показано в коде.
Статическая папка
В кодовой базе проверьте статическую папку. Как следует из названия, он содержит статические данные, а в нашем случае — статические изображения нашего проекта. Как вы знаете, идентификатор нашей главной страницы полностью статичен, изображение, показанное на первой странице, находится в этой папке. Точно так же здесь должно быть размещено любое статичное изображение или логотип, которые будут использоваться в проекте.
Что мы построили?
Мы создали веб-сайт JAMstack с мощными API Cosmic JS. В JAMstack:
«J» означает JavaScript, и здесь Vue.js используется как часть JavaScript JAM,
‘A’ означает API, здесь Cosmic JS используется как часть API JAM,
Значение «M» — разметка, здесь в качестве разметки используется Nuxt.js.
Здесь основная часть это часть API, мы сделали GET запрос с помощью которого и получили быстрый ответ. Этот запрос сделан с помощью модуля axios, а затем данные JSON легко манипулируются. Формат ответа Cosmic JS API очень прост в обращении.
Развертывание в Netlify
Мы создали приложение с Vue.js, Nuxt.js и Cosmic JS, но оно не является чистым приложением JAMstack, пока мы не сможем развернуть статические ресурсы в CDN. В этом примере мы развернем его на бессерверном бэкэнд-провайдере. Нетлайф.
Установите Интерфейс командной строки Netlify а также Интерфейс командной строки Nuxt:
npm i -g netlify-clinpm i -g nuxt
Создайте статические файлы
npm run build
Затем разверните в Netlify. Вам будет предложено выбрать папку. Введите dist, чтобы развернуть папку dist.
netlify deploy
Вывод
С помощью Cosmic JS вы можете создавать мощные приложения. В этом примере мы смогли создать приложение JAMstack с мощью API Cosmic JS. Если у вас есть какие-либо комментарии или вопросы о создании приложений с помощью Cosmic JS, свяжитесь с нами по адресу Твиттер и присоединяйтесь к беседе на Слабый.
