Посмотрите наши видеокурсы:
Ознакомьтесь с нашим новым полным руководством Nuxt 2.4+:
Https://medium.com/@onlykiosk/the-new-complete-nuxt-2-4-course-e30a561e6800
Что такое Nuxt
Vue - это фреймворк, основанный на JavaScript. Мы используем его для создания клиентских приложений.
Nuxt - это фреймворк, основанный на Vue. Вы можете думать об этом как об улучшенной версии Vue.
Это комбинация vue, vue router, vuex, vue server renderer и vue meta.
В руководстве сказано, что Nuxt предназначен для создания универсальных приложений. Универсальный - это просто причудливое слово для клиентской и серверной стороны. Работа на стороне сервера не означает, что Nuxt.js - это бэкэнд-фреймворк, подобный Express. Серверный Nuxt на самом деле является предварительно настроенным сервером рендеринга vue. Он делает SSR за нас. SSR означает рендеринг на стороне сервера.
SSR
SSR означает рендеринг на стороне сервера.
Приложение Vue обычно представляет собой одностраничное SPA-приложение. Мы используем его для общения с пользователями.
Данные хранятся в базе данных. В самом SPA нет данных. Он также не управляет базой данных. Бэкэнд-программа стоит между SPA и базой данных. Он принимает команды от SPA и действует соответственно.
Наше приложение Vue взаимодействует с серверной программой через ajax. Другими словами, приложение vue использует асинхронные данные.
Преимущество такого дизайна в том, что мы можем полностью отделить клиентские коды от серверных. Разработка и сопровождение программ намного проще.
Но обратная сторона - поисковая система еще не распознает асинхронные данные. Поисковые системы не будут ждать, пока ваш SPA загрузит асинхронные данные. Это означает, что для поисковых систем ваш сайт - не что иное, как пустая страница. Естественно, пользователи не смогут найти ваш сайт через поисковую систему.
Другой недостаток заключается в том, что поскольку данные полностью извлекаются программой ajax, страница приложения будет пустой до тех пор, пока вся программа не будет загружена и запущена. Иногда это может занять некоторое время. Это просто плохой пользовательский опыт.
SSR может решить эти две проблемы за нас.
Vue.js обрабатывает SSR с помощью Vue.js Server-Sider Renderer. Его официальный сайт указан ниже:
Зайдите на сайт и прочтите инструкцию. Тогда вы, вероятно, захотите навсегда отказаться от SRR.
Правильная настройка всех обсуждаемых аспектов готового к работе серверного приложения может оказаться непростой задачей. К счастью, есть отличный проект сообщества, который призван упростить все это: Nuxt.js.
Компромиссы SSR
Ограничения развития. Код, специфичный для браузера, можно использовать только внутри определенных хуков жизненного цикла; некоторым внешним библиотекам может потребоваться особая обработка, чтобы их можно было запускать в приложении, отображаемом на сервере.
Более сложные требования к настройке и развертыванию сборки. В отличие от полностью статического SPA, который можно развернуть на любом статическом файловом сервере, для отрисованного на сервере приложения требуется среда, в которой может работать сервер Node.js.
Больше нагрузки на сервер. Рендеринг полного приложения в Node.js, очевидно, будет более интенсивным для ЦП, чем просто обслуживание статических файлов, поэтому, если вы ожидаете высокий трафик, будьте готовы к соответствующей нагрузке на сервер и разумно используйте стратегии кэширования.
Прежде чем использовать SSR для своего приложения, первый вопрос, который вы должны задать, - действительно ли он вам нужен. В основном это зависит от того, насколько важно для вашего приложения время выхода контента. Например, если вы создаете внутреннюю панель управления, где дополнительные несколько сотен миллисекунд при начальной загрузке не имеют большого значения, SSR будет излишним. Однако в случаях, когда время вывода содержимого является абсолютно критическим, SSR может помочь вам достичь наилучшей производительности при начальной загрузке.
Если ваша бэкэнд-программа написана на языках, отличных от NodeJS, и SEO особенно важен для вас, вам не нужно изучать Nuxt, потому что вам негде его применить.
Щелкните ссылку ниже, чтобы увидеть мое доказательство:
Схема / жизненный цикл Nuxt
У Vue есть жизненный цикл.
Эта диаграмма показывает нам, что происходит, когда мы запускаем программу Vue.
Как расширенный фреймворк Vue, Nuxt также имеет жизненный цикл.
На этой диаграмме показано, что происходит, когда мы запускаем программу Nuxt, но до запуска программы vue.
Сложив эти две диаграммы вместе, вы получите полную картину того, что происходит, когда вы запускаете программу Nuxt.
На данный момент эта таблица может содержать концепции, о которых вы еще не слышали. Не волнуйтесь, вы узнаете о них на более поздних уроках.
Настройка нового приложения Nuxt.js
Для установки Nuxt мы по-прежнему используем vue cli. Нам просто нужно переключиться на новый шаблон: начальный шаблон с косой чертой nuxt dash.
После завершения установки мы включаем сервер разработки с помощью npm run dev.
В корневой папке проекта вы увидите десять дочерних папок. Десятый - .nuxt. Он появится только после того, как мы включим сервер разработки. По умолчанию эта папка скрыта. Если вы не можете его найти, проверьте настройки вашего компьютера. Убедитесь, что скрытые файлы и папки видны.
По умолчанию Nuxt размещается на порту 3000.
Но мы можем сбросить порт inn package.json.
Корневой каталог Nuxt
Всего вы увидите десять каталогов.
И статические, и активы предназначены для хранения статических файлов. В этих двух каталогах хранятся изображения, видео, аудио и т. Д. Что касается разницы, мы покажем вам позже.
Каталог компонентов предназначен для хранения файлов dot vue. Здесь хранятся ваши однофайловые компоненты.
В будущем вы будете в основном создавать файлы двух типов и работать с ними: файлы .vue и .js.
Плагины, хранилище и промежуточное ПО предназначены для хранения файлов .js.
Макеты, страницы и компоненты предназначены для хранения файлов .vue.
Nuxt.config.js хранит информацию о конфигурации. Мы будем часто редактировать этот файл позже.
Как создается домашняя страница Nuxt.js:
Это программа Nuxt.js по умолчанию. Создается по стартовому шаблону. Мы еще не внесли в него никаких изменений.
В каталоге страниц есть только один файл: index.vue.
В каталоге компонентов также есть только один файл: AppLogo.vue.
Pages / index.vue создает домашнюю страницу, которую мы видим в браузере. Изображение логотипа создается компонентами / AppLogo.vue.
Pages / index.vue импортирует, объявляет и устанавливает компоненты / AppLogo.vue. (Как показано ниже)
В каталоге страниц индекс - это особое имя. Nuxt считает это выбором по умолчанию. Если вы не укажете имя файла, Nuxt найдет и отобразит индексный файл. Вот почему мы можем посещать страницы / index vue через localhost: 8080. В URL указывать индекс не нужно.
Вы могли заметить символ ~ при импорте компонента AppLogo. ~ и @ представляют корневой каталог проекта.
Плагины
Каталог страниц предназначен для хранения файлов подкачки. Каталог компонентов предназначен для хранения повторно используемых компонентов.
Так для чего нужен каталог плагинов?
Хранение файлов конфигурации плагина.
Мы покажем вам, как его использовать, на примере iView.
iView - это библиотека пользовательского интерфейса Vue. Для этого требуется файл JS в качестве файла конфигурации. Мы должны поместить его файл конфигурации в каталог плагинов.
Создание файла конфигурации и его размещение в каталоге плагинов - это только первый шаг.
Далее нам нужно перейти к файлу nuxt.config.js.
Создаем свойство плагинов.
Его значение - массив. Каждый элемент массива - это URL-адрес файла конфигурации.
Теперь iView настроен как глобальный компонент. Глобальный здесь означает всю программу Nuxt. Вы можете использовать его где угодно. Но есть проблема. Как мы уже говорили ранее, каждый файл dot vue в каталоге страниц является независимым SPA. В этом случае у нас есть два файла в каталоге страниц. Это означает, что наша программа Nuxt состоит из двух Vue SPA. В результате, когда мы выводим нашу программу, iView будет объединен дважды. Если мы определили много страниц, проблема дублирования пакетов может быть очень серьезной. Чтобы решить эту проблему, мы находим свойство сборки и добавляем в него новое свойство: vendor. Значение vendor по-прежнему является массивом. Каждый элемент массива - это имя плагина. Здесь мы устанавливаем его на iview
Nuxt Route
В этом уроке мы рассмотрим, как работает маршрутизатор nuxt. В отличие от маршрутизатора vue, вам не нужно создавать файл конфигурации для маршрутизатора nuxt. Nuxt просканирует каталог страниц и автоматически сгенерирует правила маршрутизации.
Каталог страниц будет считаться корневой папкой. Файлы внутри него можно напрямую посещать через имя файла с косой чертой localhost. Когда nuxt сканирует каталог, он автоматически ищет индексный файл. В результате мы можем напрямую обращаться к файлу vue с индексной точкой через localhost. Нам не нужно добавлять индекс косой черты в конец localhost.
Но если мы создадим другой файл: another.vue. Нам нужно вставить другой в URL-адрес.
В каталоге страниц мы создаем дочерний каталог: user. Внутри пользовательского каталога мы создаем два файла: index.vue и ID.vue.
Чтобы посетить страницы / user / index.vue, нам нужен URL-адрес: localhost: 8080 / user.
Но для посещения страниц / user / id.vue нам нужен URL-адрес: localhost: 8080 / user / id.
URL-адрес может использоваться для передачи значений. Если мы сохраним свойство ID в URL-адресе, как нам получить к нему доступ?
Маршрутизатор Nuxt очень похож на маршрутизатор vue. Чтобы получить доступ к значению запроса, мы используем запрос $ route dot.
URL также может передавать значение через params.
Получить значение параметра просто, переключаем запрос на параметры.
Но проблема в том, как передать параметры в URL-адресе?
Нам нужно переименовать файл id dot vue в точку подчеркивания vue. Подчеркивание - это сигнал, говорящий Nuxt, что этот файл предназначен для обработки параметров.
Если вы не укажете значение параметра, Nuxt отобразит индексный файл. Обычно мы используем индексный файл для обработки ситуаций, когда значение параметра не указано.
Подтвердить
Все данные, отправленные пользователем, должны быть проверены. Nuxt предлагает нам для этого метод проверки. Метод проверки должен быть установлен в экспортируемом объекте файлов dot vue. Вы думаете об этом как о крючке, как о созданном в vue. В жизненном цикле Nuxt проверка будет вызываться после промежуточного программного обеспечения и перед asyncData.
Метод проверки должен быть установлен в _id.vue. Значение аргумента метода проверки - это объект с тремя свойствами: params, query и store. Store дает нам доступ к vuex.
Метод проверки предназначен для проверки значений, а не для их сброса. В конце он должен вернуть либо истину, либо ложь. Если он вернет -true, файл идентификатора подчеркивания будет загружен нормально. Если он вернет false, Nuxt будет напрямую отображать заранее заданную страницу ошибки. Но URL в адресном поле не изменится.
Вложенный маршрут:
В каталоге страниц у нас есть дочерний каталог: user. Что, если мы создадим файл user.vue в каталоге страниц?
Что сейчас произойдет? Кто будет выбран? User.vue или user / index.vue?
Вот результат:
user.vue переопределит user / index.vue. НО это НЕ означает, что вам следует избегать одинаковых имен файла и каталога. Напротив, имя файла и каталога даст нам нечто очень полезное: вложенные маршруты.
В user.vue добавляем компонент ‹nuxt-child /›.
Вот что мы получим:
user / interface.vue будет отображаться в ‹nuxt-child /›.
Промежуточное ПО:
В этом уроке мы покажем вам, как использовать промежуточное программное обеспечение.
По сути, промежуточное ПО - это предопределенная функция. Мы можем применить его к определенной странице или ко всем страницам. В жизненном цикле Nuxt промежуточное ПО вызывается перед методом проверки. Поскольку промежуточное программное обеспечение вызывается на очень ранней стадии, мы можем использовать его для многих вещей, таких как проверка статуса входа в систему, проверка данных, отправленных пользователем, и т. Д.
Одно промежуточное ПО должно быть определено в одном файле JS. Каталог промежуточного программного обеспечения предназначен для хранения файлов промежуточного программного обеспечения.
Как создать файл MW?
Сначала мы создаем JS-файл в каталоге промежуточного программного обеспечения.
В файле JS мы экспортируем по умолчанию анонимную функцию.
Анонимная функция будет функцией промежуточного программного обеспечения.
Nuxt назначит контекст анонимной функции в качестве значения аргумента.
Контекст очень полезен. Это дает промежуточному программному обеспечению почти полный доступ ко всей программе.
Context.params и context.query могут получить значения, переданные в URL.
Context.store получает VueX.
Context.error () может помочь нам вызвать страницу с ошибкой и отправить значение на страницу с ошибкой.
Как использовать промежуточное ПО?
Промежуточное ПО может быть привязано к определенной странице или ко всем страницам.
Если вы хотите привязать MW к определенной странице, вы добавляете на эту страницу свойство промежуточного программного обеспечения. Значение свойства промежуточного программного обеспечения - это массив. Каждый элемент массива - это одно имя MW.
Если вы хотите привязать MW ко всем страницам, перейдите к nuxt.config.js.
Сначала вы добавляете новое свойство: маршрутизатор.
Значение маршрутизатора - это литерал объекта. Внутри вы добавляете промежуточное ПО.
На изображении ниже показано, как установить свойства маршрутизатора и промежуточного программного обеспечения.
Теперь MW1 и MW2 - это глобальное промежуточное программное обеспечение, связанное со всеми страницами.
Макет: настройка просмотра
В этом уроке мы покажем вам, как настроить макеты страниц. Естественно, мы будем работать над каталогом макетов. На данный момент в каталоге макетов есть только один файл: точка по умолчанию vue. Он контролирует текущий макет страницы каждого файла страницы. Давай откроем.
На первый взгляд, в этом файле нет ничего особенного. Он выглядит так же, как и любой другой файл .vue.
В шаблоне есть ‹nuxt /›.
Здесь будут отображаться файлы .vue из каталога страниц.
Если мы добавим тег P в начало ‹nuxt /›, то каждая страница автоматически унаследует этот тег P.
Мы также можем определить наш собственный шаблон макета. Просто убедитесь, что вы добавили ‹nuxt /› в шаблон.
Создание собственного файла макета по умолчанию - это только первый шаг. Нам нужно применить его к файлам подкачки. Вот как мы это делаем.
Настройка страницы ошибки
В каталоге макетов создаем новый файл: error.vue. Этот файл заменит страницу ошибки по умолчанию. Вот как мы определяем нашу собственную страницу ошибок в Nuxt.
Мы можем вызвать страницу с ошибкой, используя context.error ().
Context.error () может передавать информацию на страницу с ошибкой.
Но вопрос в том, как страница с ошибкой получает информацию, передаваемую context.error ()?
Пользовательская страница ошибок по-прежнему является компонентом Vue. Компоненты Vue получают внешнюю информацию через реквизиты. Итак, вот что мы должны сделать: мы объявляем ошибку как prop в error.vue.
Значение аргумента context.error () будет передано в опору ошибки.
Обработка статических файлов
В этом уроке мы рассмотрим каталог static и assets. Оба этих каталога предназначены для хранения статических файлов, таких как изображения, видео, аудио, файлы CSS, файлы шрифтов и т. Д.
Но между этими двумя каталогами есть несколько тонких различий.
Файлы ресурсов будут обрабатываться загрузчиком URL. В вашей программе nuxt вы должны получать доступ к файлам ресурсов через их полный абсолютный адрес. Начиная с Nuxt 2.0, если вы связываете файл ресурсов в CSS, например, в фоновом URL-адресе, вам необходимо удалить косую черту между тильдой и ресурсами. Загрузчик URL-адресов предоставит связанному файлу хэш-код, чтобы его имя было уникальным. Файлы размером менее 1 КБ будут встроены как URL-адреса данных base-64.
Статические файлы будут помещены непосредственно в корневой каталог проекта. Вы можете получить к ним доступ, используя имя файла с косой чертой. Статические файлы будут помещены в корневой каталог проекта.
Но если вы связываете статический файл через его ПОЛНЫЙ URL-адрес, тогда этот статический файл будет обрабатываться так же, как файл ресурсов, то есть этот статический файл будет обрабатываться загрузчиком URL-адресов.
Поэтому всегда связывайте статический файл через имя файла с косой чертой. Никогда не связывайте статические файлы через их полный URL.
AsyncData
Если вы не хотите использовать VueX в своем проекте Nuxt, тогда метод asyncData - это то, что вы используете для связи с серверной программой и базой данных. В схеме Nuxt asyncData будет вызываться после validate (), но до рендеринга Vue. Как и validate (), asyncData также получит контекст в качестве значения аргумента. Контекст может открыть множество дверей.
Еще одна важная особенность asyncData заключается в том, что она будет вызываться АВТОМАТИЧЕСКИ. Это делает его идеальным кандидатом для извлечения исходных данных из серверной программы и базы данных.
AsyncData НЕ имеет ЭТОГО, потому что он вызывается после метода проверки, но до рендеринга Vue.
Это означает, что к моменту вызова метода asyncData компонент vue еще не создан. В результате this в asyncData не предоставит вам экземпляр компонента. В руководстве Nuxt также подчеркивается это.
Самым важным в методе asyncData является то, что результат, который он возвращает, будет автоматически объединен с данными vue.
Это решило проблему того, что this не указывает на экземпляр компонента. Свойства, возвращаемые методом asyncData, могут напрямую отображаться в шаблоне.
Резюме об asyncData:
- asyncData будет вызываться автоматически.
- asyncData вызывается перед рендерингом Vue, поэтому НЕ имеет этого.
- asyncData получает в качестве аргумента КОНТЕКСТ. Контекст предоставляет asyncData доступ к context.params, context.query, context.store и context.error ()
- Результат, возвращаемый asyncData, будет АВТОМАТИЧЕСКИ ОБЪЕДИНЕН с данными Vue. Это означает, что свойство, определенное в asyncData, может отображаться непосредственно в шаблоне. Это отличная возможность!
На изображении ниже показано реальное применение метода asyncData.
Мы установили метод axios.post в asyncData и используем его для извлечения данных из серверной программы и базы данных. Внимание, мы должны вернуть метод axios.
Затем мы возвращаем полученный результат - car_list.
Car_list будет автоматически объединен с данными Vue. В результате мы можем напрямую отображать car_list в шаблоне.
Если что-то пойдет не так, мы можем вызвать страницу с ошибкой с помощью context.error (), как показано ниже:
Nuxt VueX
Файл конфигурации VueX должен храниться в каталоге магазина. Имя файла должно быть индексной точкой js.
Обычный файл конфигурации VueX состоит из четырех частей: импорт пакета vuex, подготовка объекта конфигурации, создание экземпляра метода хранилища и экспорт метода хранилища.
Конфигурационный файл, используемый в Nuxt, в основном такой же, за исключением одного отличия: мы не экспортируем напрямую метод хранилища. Мы возвращаем его в анонимной функции и экспортируем эту функцию. Vue.use () не является обязательным в конфигурационном файле Nuxt VueX.
fetch ()
Вы можете задаться вопросом, хотим ли мы полностью перенести обработку данных на VueX, как нам получить исходные данные? Во Vue мы получаем исходные данные с помощью хука created. В Nuxt у нас есть два варианта: метод выборки и метод nuxtServerInit. Оба этих метода будут вызваны автоматически. Но их вызовут в другое время.
Сначала мы займемся методом выборки.
Метод выборки устанавливается в файлах подкачки. Так же, как промежуточное ПО и asyncData, метод выборки также получает контекст в качестве значения аргумента.
Context.params и context.query предоставляют методу выборки доступ к данным, переданным в URL. Они позволяют выборке действовать на основе данных, передаваемых по URL-адресу. Например, мы можем передать идентификатор в URL-адресе, метод выборки может отправить этот идентификатор в бэкэнд-программу и соответствующим образом запросить базу данных.
Context.error () позволяет методу выборки запускать страницу с ошибкой, если что-то пойдет не так.
После того, как метод выборки получил данные из серверной программы и базы данных, как он отправляет эти данные в VueX?
Context.store.commit () позволяет методу выборки запускать метод мутации VueX, который может устанавливать свойства состояния VueX.
И снова мы увидели силу контекста. Он предлагает буквально полный доступ ко всем частям программы Nuxt. Лично я считаю, что это работает лучше, чем ЭТО.
На изображении ниже показано, как выглядит метод выборки в реальной программе.
Он связывается с серверной программой через метод axios. Но не забудьте вернуть метод axios.
Он отправляет полученные данные в состояние VueX через метод фиксации. Он может получить доступ к методу фиксации через context.store.
Если что-то пойдет не так, он вызовет метод context.error () для отображения страницы ошибки.
nuxtServerInit ()
fetch () - не единственный способ получить исходные данные. Мы также можем использовать nuxtServerInit.
NuxtServerInit - это метод действия VueX. В отличие от обычного метода действия, nuxtServerInit будет вызываться автоматически. В жизненном цикле Nuxt метод nuxtServerInit будет вызываться в самом начале.
Метод обычного действия вызывается методом отправки и имеет два аргумента. Первый - это контекст VueX, а второй - значение, переданное методом диспетчеризации.
Поскольку nuxtServerInit вызывается Nuxt, какое значение Nuxt передает ему? Или каков будет его второй аргумент?
Так же, как fetch и asyncData, nuxtServerInit также получит контекст.
Итак, nuxtServerInit имеет два контекста. Первый - это контекст VueX, а второй - контекст Nuxt.
На изображении ниже показано, как выглядит метод nuxtServerInit в реальной программе.
У него два аргумента: vuex_context и nuxt_context.
Тем не менее, мы получаем данные из серверной программы, используя метод axios, и метод axios необходимо вернуть.
Мы можем получить доступ к методу мутации VueX через первый аргумент: vuex_context.commit ().
Если что-то пойдет не так, мы можем вызвать страницу ошибки с помощью метода ошибки. Доступ к методу ошибки можно получить через второй аргумент: nuxt_context.
Практика
Начиная с этого момента, мы собираемся применить все, что узнали о Nuxt, и создать приложение.
Приложение, которое мы собираемся создать, специально разработано для того, чтобы помочь вам изучить все изученные вами методы Nuxt. Вы также узнаете что-то новое.
Приложение, которое мы собираемся создать:
Во-первых, давайте посмотрим на приложение, которое мы собираемся создать. Наше приложение состоит из двух страниц: одной домашней страницы и одной страницы с подробностями. На странице сведений есть три подстраницы: введение, спецификация и история.
Помимо домашней страницы и страницы с подробностями, приложение также имеет две страницы ошибок: одну для ошибки 404, а другую - для других типов ошибок.
Сначала мы создали новый проект Nuxt с помощью Vue CLI.
Итак, какая команда нам нужна?
После того, как мы настроили проект Nuxt, мы включаем его. По умолчанию Nuxt будет размещен на порту 3000. Мы хотим перейти на порт 8080?
Как поменять порт?
Далее нам нужно установить два плагина: axios и iView. Сначала мы устанавливаем их через NPM.
Установка NPM - это только первый шаг. Также нам нужно настроить плагины.
Как настроить плагины?
Что делает продавец?
Предотвращение повторного объединения одного и того же пакета.
Что делать с файлом конфигурации iView?
Два шага:
1. Создайте файл JS в каталоге плагинов. В этом JS-файле будут храниться коды конфигурации iView.
2. Свяжите этот файл конфигурации с файлом nuxt.config.js, используя свойство plugins.
Теперь наша программа Nuxt настроена правильно. Начнем с главной страницы.
Домашняя страница состоит из трех основных частей: верхнего колонтитула, нижнего колонтитула и основного текста посередине.
Сначала займемся заголовком.
Мы размещаем заголовок вверху страницы, используя фиксированное положение. Мы также присваиваем заголовку высокое значение z-index, чтобы он всегда оставался поверх других элементов страницы.
Теперь займемся нижним колонтитулом. Нижний колонтитул относительно прост. Мы располагаем его внизу страницы, используя фиксированное положение.
И верхний, и нижний колонтитулы имеют фиксированное положение. Это принесет нам небольшую проблему: элементы в потоке будут ими заблокированы.
Эту проблему очень легко решить: мы даем основному корпусу верхнюю и нижнюю прокладку.
Теперь все счастливы. Все элементы страницы должны быть размещены внутри основного DIV.
Сводка настроек HTML и CSS домашней страницы
- Домашняя страница состоит из трех частей: верхнего колонтитула, нижнего колонтитула и основного текста.
- Верхний и нижний колонтитулы имеют фиксированное положение, которое выводит их из потока. В результате элементы в потоке будут отображаться под заголовком и нижним колонтитулом.
- Чтобы решить эту проблему, мы даем основному DIV отступы сверху и снизу. Все элементы страницы должны быть размещены в основном DIV.
Допустим, мы хотим создать новую страницу. Копирование верхнего, нижнего и основного текста в новый файл страницы - не лучшее решение.
Как лучше всего повторно использовать верхний и нижний колонтитулы?
Превращая их в составные части. Файлы компонентов должны храниться в каталоге компонентов.
Чтобы использовать компонент, мы по-прежнему следуем трехэтапной процедуре:
- импортировать компонент
- объявить компонент
- установить компонент
Теперь давайте разберем на компоненты основной DIV. Car_list по-прежнему будет храниться в index.vue. Мы отправляем его в основной компонент через props.
Каждый раз, когда мы создаем новую страницу, нам нужно импортировать, объявить и установить верхний и нижний колонтитулы. Затем нам нужно создать основной DIV с верхним и нижним отступом.
Это все еще недостаточно удобно. Есть ли лучшее решение?
Используйте макет !!!
Мы импортируем верхний и нижний колонтитулы в layout / default.vue.
Затем мы «сэндвичем» ‹nuxt /› с верхним и нижним колонтитулами.
Мы оборачиваем ‹nuxt /› основным DIV. Этот основной DIV генерирует верхнее и нижнее отступы.
Теперь все новые страницы будут АВТОМАТИЧЕСКИ наследовать верхний колонтитул, нижний колонтитул и #main DIV. В результате создать новую страницу очень просто и удобно. Нам больше не нужно беспокоиться о верхнем, нижнем колонтитуле и отступах!
Попробуйте VueX в Nuxt
Nuxt поставляется с установленным VueX. Но нам нужно создать файл конфигурации VueX.
Три вещи, которые вы должны помнить о файле конфигурации Nuxt VueX
- Сохраните файл конфигурации VueX в каталоге магазина.
- В файле конфигурации Nuxt VueX vue.use () не является обязательным.
- В файле конфигурации Nuxt VueX вы помещаете новый vuex.Store (config) в анонимную функцию и возвращаете его. Затем вы экспортируете анонимную функцию по умолчанию.
Доступ к VueX в компонентах:
Чтобы ввести исходные данные в состояние VueX, у вас есть два варианта.
Какие есть два варианта?
Метод выборки, установленный в компонентах, и метод nuxtServerInit, установленный в действии VueX. У них обоих есть контекст как значение аргумента. Context.store дает им доступ к VueX.
Краткое изложение контекста
Все функции промежуточного ПО, fetch () и nuxtServerInit, получат контекст в качестве значения аргумента. Контекст может дать нам полный доступ ко всей программе Nuxt. Решает проблемы, вызванные отсутствием ЭТОГО.
Context.params и context.query предоставляют вам доступ к значению, переданному через URL.
Context.error () позволяет запускать страницу ошибок Nuxt и передавать ей значение.
Context.store дает вам доступ к VueX.
Работа на странице деталей
Каждый раз, когда мы нажимаем на автомобиль, мы хотим перейти на страницу с подробными сведениями, где будут отображаться сведения о выбранном автомобиле.
Нам нужно передать идентификатор автомобиля, по которому кликнули, на страницу с подробными сведениями. Лучший способ сделать это - передать идентификатор через URL-адрес.
Здесь у нас есть два варианта: запрос или параметры.
Нам нужен короткий и чистый URL, поэтому мы воспользуемся params.
Страница сведений состоит из двух частей: верхней и нижней. Верхняя часть создается родительским компонентом, а нижняя часть - дочерним компонентом.
Дочерний компонент будет отображаться через ‹nuxt-child /›.
Мы можем получить доступ к состоянию VueX через $ store.state. Мы можем получить доступ к ID через $ route.params.id.
Это верхняя половина страницы с подробностями.
Затем займемся нижней половиной или дочерним компонентом.
Здесь нам нужно использовать вложенные маршруты.
Вам рекомендуется сначала прочитать это:
В каталоге страниц мы создаем новый каталог: _id.
Каталог _id и _id.vue сгенерируют вложенный маршрут. _id.vue будет родительским компонентом, а файлы внутри каталога _id будут дочерним компонентом и будут отображаться через ‹nuxt-child /›.
Localhost / ID может получить файл _id.vue. По умолчанию ‹nuxt-child /› будет искать index.vue в каталоге _id. Мы хотим, чтобы вводная страница была страницей по умолчанию, поэтому мы называем ее index.vue.
Страница введения:
Страница спецификации:
Страница истории:
Как создать универсальный CSS?
Когда вы используете универсальный CSS, помните, что универсальный CSS будет первым в HTML-файле. Это означает, что универсальный CSS имеет самый низкий приоритет. Компонент CSS переопределит его.
Эффекты перехода:
Универсальный CSS заложил основу для создания эффектов перехода.
Мы храним коды CSS перехода в универсальном CSS, а затем применяем эффект перехода ко всем или выбранным страницам.
В каталоге ресурсов мы создаем файл CSS: transition.css.
Конечно, нам нужно записать transition.css в файл nuxt.config.js.
Установка классов перехода в Nuxt такая же, как и во Vue. Поэтому настоятельно рекомендуется ознакомиться с тем, как устанавливать классы перехода во Vue.
Каждое имя класса имеет префикс page. Префикс страницы применит переход ко всем страницам.
Если вы не хотите применять один и тот же эффект перехода ко всем страницам, выберите другой префикс. Например, мы выбираем затухание.
Затем мы переходим к файлу подкачки, к которому хотим добавить эффект плавного перехода. Например, мы хотим добавить эффект перехода на страницу спецификации. На изображении ниже показано, что вам следует делать на странице спецификаций.
В экспортируемом объекте вы добавляете свойство перехода. Его значение - это имя префикса, которое вы используете в transition.css. Теперь у нас будет только плавный переход при входе на страницу спецификации.
Если вам нужен более интересный эффект перехода, вы можете добавить файл animate.css.
Официальный сайт: https://daneden.github.io/animate.css/.
В каталоге ресурсов создайте файл CSS для хранения исходного кода animate.css.
Затем добавьте этот новый файл CSS в nuxt.config.css.
Затем мы переходим к файлу страницы, к которому хотим добавить переход.
В экспортированном объекте мы по-прежнему устанавливаем свойство перехода. Но на этот раз значением свойства является объект.
Продолжительность определяет, как долго длится эффект перехода. Измеряется в миллисекундах.
LeaveActiveClass контролирует, как текущая страница покидает браузер, а enterActiveClass контролирует, как целевая страница входит в браузер.
Метод head ()
Метод head () позволяет нам устанавливать содержимое внутри тега head. Это API Nuxt для vue meta.
Правильная установка META жизненно важна для SEO.
В отличие от промежуточного программного обеспечения, fetch () или nuxtServerInit, head () имеет ЭТО. Структура метода head () очень похожа на структуру данных vue и asyncData.
Вы возвращаете объект внутри него. Все настройки сохраняются в возвращаемом объекте.
Чтобы установить заголовок страницы, вы добавляете свойство title.
Используя ЭТО, вы также можете установить динамический заголовок.
Еще одно важное применение метода head () - установка всевозможных тегов META, особенно тега description.
Это описание по умолчанию МЕТА:
Он устанавливается методом head (), хранящимся в nuxt.config.js.
Вы могли заметить скрытое свойство. Так для чего это нужно?
Каждая страница должна иметь собственное мета-описание. Но что, если мы имеем дело со страницей, состоящей из родительского и дочернего компонентов? Например, страница с подробностями, которую мы только что создали.
Естественно, мы хотим сохранить только мета описания дочернего компонента. Мета описания родительского компонента будет использоваться в качестве альтернативного варианта. Если у дочернего компонента нет мета-описания, появится мета-описание родительского компонента и спасет положение.
H ID может помочь нам удалить метаданные родительского компонента. Без него мета описания родительского и дочернего компонентов будет сохранена. Очевидно, это не то, что мы хотим.
Например, если мы удалим h id из родительского и дочернего компонентов, угадайте, что произойдет?
Вот результат, который мы получили:
Так что никогда не забывайте h id.
проверить ()
Значение аргумента проверки - {params, query, store}. Он дает проверочный доступ к данным, хранящимся в URL и VueX. Его значение аргумента очень похоже на контекст, но это НЕ контекст. Validate () НЕ имеет доступа к методу ошибки.
Если вы установили метод проверки, вы должны в какой-то момент вернуть TRUE, иначе вы никогда не сможете посетить текущую страницу.
В родительском компоненте страницы сведений мы устанавливаем метод проверки, чтобы убедиться, что каждое значение идентификатора, предоставленное пользователем, является числом и не превышает длину car_list. В противном случае мы возвращаем false, чтобы запустить механизм обработки ошибок Nuxt по умолчанию, который представляет собой страницу 404.
Пользовательская страница ошибки и как ее вызвать
В каталоге макетов создаем новый файл: error.vue.
Этот файл будет использоваться в качестве нашей настраиваемой страницы ошибок.
Наша настраиваемая страница ошибок может быть вызвана context.error (). Метод ошибки может передавать ему значение через свойство error.
Как мы уже говорили ранее, метод проверки не имеет доступа к context.error (). В результате он может запускать только страницу 404. Что, если мы хотим отобразить нашу собственную страницу ошибки для недопустимого идентификатора?
В этом случае мы не можем проверить идентификатор с помощью метода проверки. Мы выполняем проверку с помощью промежуточного программного обеспечения.
Вы все еще помните, как определять и устанавливать промежуточное ПО?
В каталоге промежуточного программного обеспечения вы определяете файл JS.
Внутри JS-файла вы экспортируете анонимную функцию по умолчанию. Эта функция является промежуточной функцией и получит контекст в качестве значения аргумента.
Так выглядит промежуточное ПО check-id.
Если идентификатор допустим, мы ничего не делаем. В противном случае мы вызываем context.error () и передаем сообщение об ошибке на страницу ошибки.
На стороне страницы ошибки мы можем получить доступ к сообщению об ошибке через error.message.
Как установить промежуточное ПО?
Вы можете установить промежуточное ПО глобально или локально.
Чтобы установить его локально, вы используете свойство промежуточного программного обеспечения.
Теперь промежуточное ПО возьмет на себя задачу проверки идентификатора из метода проверки. Если значение ID недопустимо, промежуточное программное обеспечение вызовет страницу с ошибкой через context.error (). Context.error () может передавать информацию на страницу с ошибкой через свойство error.
Исходный код можно скачать по этому адресу: https://github.com/OnlyKioskAccount/nuxt_practice_app
(Для редактирования и улучшения…)
Конец.
Если вам понравилась эта статья, аплодируйте ^ _ ^ и щелкните ссылку ниже, чтобы пройти наш курс Nuxt.
Https://www.udemy.com/complete-nuxtjs-course/?couponCode=MEDIUM_PROMO_CNG
Ознакомьтесь с нашим ПОЛНЫМ курсом VueJS:
https://www.udemy.com/vuejs-for-students-with-zero-es6-foundation/?couponCode=MEDIUM_PROMO_1
Ознакомьтесь с нашим полным курсом веб-разработки:
https://www.udemy.com/web-development-html5-css3-php-oop-and-mysql-database/?couponCode=MEDIUM_WEB_DEV.
