Создание web-сервиса. Всё, но не сразу. Продолжаем работать с Nuxt
В сегодняшней статье опишу как будем работать с Nuxt.
Но начну статью с проблемы, с которой столкнулся. Я планировал разбить своё фронтенд приложение на компоненты. Но проблема в том, что у компонентов нет метода asycData. Но об этом узнал в последний момент, когда не смог решить проблему и прочёл документацию =).
Начнём.
Переходим в папку с проектом и установим axios и bootstrap.
Axios это отличная клиентская библиотека, которая использует промисы по умолчанию, а так же работает как на сервере(что делает его подходящим для получения данных при рендеринге на сервере), так и на клиенте.
npm i -s axios
npm i -s bootstrap-vue bootstrap@4.0.0-beta.2
Открываем Ide и пропишем бутстрап в config.nuxt.js:
modules: [
'bootstrap-vue/nuxt'
]
запускаем nuxt
npm run dev
Файл /layouts/default.vue будет служить как общий шаблон.
Все запросы к API будем прописывать в файлах папки pages.
В default.vue в <template> прописал общую вёрстку. В div для контента прописываем компонент <nuxt/>. Компонент nuxt используется только в макетах для отображения компонентов страницы.
Ссылки прописываем так - <nuxt-link to="/url">text</nuxt-link>. Nuxt их преобразует в обычный тег a, добавляя классы у активных ссылок.
В Nuxt уже имеется модуль vue-meta, который поможет добавить мета-теги в head, которые так важны для seo.
Для добавления тегов необходимо после закрывающего тега template, добавить следующий блок script.
Далее прописываем export default {} - указываем, что данные внутри могу быть использованы «из вне», то есть в другом компоненте или странице.
Далее объявляем массив head, который указывает, что все данные внутри будут размещены в теге <head>
внутри прописываем, например, title.
<script>
export default {
head: {
title: 'Запчасти для спецтехники: объявления и аукцион'
}
}
</script>
Для запросов к API мы будем использовать axios. Его синтаксис разберём в следующих статьях.
Хранить данные о пользователе token, login и id будем хранить с помощью vuex. Его установка не требуется, он ставится автоматом.
Листинг default.vue и about.vue
Стоит обратить внимание. Следите за отступами. Любой пробел или лишний отступ, может "поломать" приложение.
В следующей статье мы уже полностью займёмся фронтенд разработкой.
Данный пост подготовлен автором @zheev. В рамках данного цикла статей он расскажет о том, что и как он программировал, какие языки и технологии использовал. С какими трудностями пришлось столкнуться и их решение на реальных примерах.
Первая часть - Вступление
Вторая часть - Проектирование БД
Третья часть - Установка окружения
Четвёртая часть - Установка и настройка Django
Пятая часть - Установка и сборка Vue
Шестая часть - Создание таблиц средствами Django
Седьмая часть - Создание REST приложений на Django
Восьмая часть - Использование фреймворка Nuxt в приложении на Vue
Девятая часть - Делаем авторизацию в Django
Заглавное фото с сайта pvsm.ru