Создание 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

vox-populiпрограммированиекакэтосделаноnuxtразработка
111
149.144 GOLOS
0
В избранное
Web Development
Тех, кто презирает программистов, программисты презирают сильнее, чем те, кто презирает тех программистов, которые презирают тех, кто их презирает.
111
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (3)
Сортировать по:
Сначала старые