Содержание статьи
автор Крутые Патель
Краткое описание структуры исходного кода в Nuxt.js
Вы новичок во фреймворке Nuxt.js и полностью поражен количеством папок, с которыми он поставляется? Вы также удивлены, что большинство из них пусты, у них есть только файл readme? Ну, там я был чуть больше года назад. С тех пор я всегда хотел узнать и документировать магию, которую каждая папка привнесла в проект Nuxt.
И вот после реализации нескольких проектов с этим фреймворком я задокументировал свое понимание того, как эти папки работают вместе, чтобы реализовать программу Vue на сервере.
Вышеприведенная диаграмма основана на руководстве Vue SSR и расширена с учетом Nuxt.js. С первого взгляда вы увидите разные папки Ваш универсальный код программы раздел, а затем код упаковывается Nuxt и соединяется с Webpack.
Эта статья не является ни учебным пособием, ни полным руководством Nuxt SSR. Это скорее показывает, что является универсальным применением.
Хотя вы видите модули, серверное промежуточное программное обеспечение и плагины в верхней части диаграммы, начнем с Магазин сначала.
Магазин Vuex (/store)
Nuxt поставляется с предварительно упакованным Vuex, но он не активируется, если вы не создадите магазин Vuex в /магазин каталог и создайте магазин.
Это очень особый каталог для любого проекта, управляемого данными. Здесь вы можете создать хранилище данных, а также определить nuxtServerInit действия. Это тоже первый крючок жизненного цикла!
const createStore = () => { return new Vuex.Store({ ... })}Когда пользователь сначала получает доступ к программе, это помогает заполнить/обновить магазин. Он также поддерживает состояние ваших данных на протяжении всей программы.
Промежуточное программное обеспечение маршрута (/middleware)
В Nuxt доступны три разных вида промежуточного программного обеспечения маршрутов. Все они определены в одном центральном месте — в /промежуточное программное обеспечение каталог.
Отсюда вы можете использовать их следующими способами:
- Глобальное промежуточное программное обеспечение – (вход через конфигурацию Nuxt и влияет на все маршруты)
// nuxt.config.js export default { router: { middleware: 'authenticated' },}- Промежуточное программное обеспечение макета (вход через макеты и влияет на группу соответствующих маршрутов, то есть определенные страницы для просмотра/доступа только подлинным пользователям)
// layouts/default.vueexport default { middleware: 'authenticated-basic-plan-user'}- Промежуточное программное обеспечение страницы (вход через компонент страницы и влияет на один маршрут)
// pages/index.vueexport default { middleware: 'subscribed'}Промежуточное программное обеспечение, указанное выше, рассматривается в этом точном порядке, т.е. их приоритеты не подлежат обсуждению. Поэтому вы должны тщательно продумать и спланировать свою программу, чтобы получить от них максимальную пользу.
Компоненты Vue
Есть три каталога, где .vue файлы создаются в проекте Nuxt.
1. Компоненты страницы? (/pages)
Это самый важный каталог из всех, содержащий просмотры программ и маршруты. Созданные здесь компоненты Vue.js напрямую превращаются в маршруты приложений.
Истинная сила компонентов страницы заключается в динамических маршрутах. Вы можете использовать их для создания удобных для SEO и ориентированных на данные URL. Динамические маршруты генерируются на основе вашей структуры каталогов /страницы.
Кроме того, Nuxt добавляет три специальных метода к компонентам страницы, которые больше нигде не доступны. Они есть validate(), asyncData() & получить().
// pages/index.vue export default { validate() { // validates dynamic URL parameters // verifies the availability of the data }, asyncData() { // sets component data }, fetch() { // doesn't set component data, but // fetches further contextual data }}2. Компоненты макета (/layouts)
Компоненты макета обеспечивают структурные аспекты программы. Здесь создаются общие компоненты на всех страницах (например, главное меню, вспомогательное меню, верхний колонтитул, нижний колонтитул и т.п.). Они расположены в /макеты каталог.
Здесь вы можете быть настолько креативны, как захотите, ведь это компоненты Vue.js. Не забудьте добавить
<template> <div> <nuxt/> </div></template>Включить route-middleware и хранить данные-состояние с компонентом макета для идеального создания кто-видит-что функции для любого количества пользователей с различными сценариями. Вы можете добиться немного больше, чем просто с помощью специального пользовательского интерфейса.
3. Компоненты Vue.js (/components)
Это простые, но универсальные составляющие Vue. Они созданы под /компоненты каталог. Они не перегружены специальными способами, такими как компоненты страницы.
Но они разрешают структурировать и организовать свою бизнес-логику. Они также скрывают большую наценку от страница и макет компонентов. Это делает вашу кодовую базу более управляемой.
Теперь внимательно посмотрите — можете ли вы увидеть частичную структуру папок на этой диаграмме жизненного цикла Nuxt?
Подсказка: Хранилище (nuxtServerInit), промежуточное программное обеспечение маршрутизации и компоненты страницы (методы проверки, asyncData и получения)
Активы
Webpacked активы (/assets)
Такие ресурсы, как файлы JavaScript, специальные шрифты и CSS, обрабатываются Webpack с помощью определенных загрузчиков (css-loader, file-loader, url-loader и т.д.) в зависимости от типов файлов. Например, если вы пишете свой CSS .scss или .меньше форматирование, Webpack обработает эти файлы с помощью определенного загрузчика и откомпилирует исходные данные .css файл, который можно использовать браузером.
Вы даже можете настроить свой nuxt.config.js чтобы поручить Webpack минимизировать и оптимизировать изображение в папке активов как часть процесса сборки. После обработки файлов Webpack добавляет хэш-код. См. Например, index.4258e3668a44556dd767.js — к обработанным элементам, что помогает в долгосрочном кэшировании динамических активов и уничтожении кэша.
Статические активы (/static)
Для активов, которые не изменятся, вы можете смело положить их в статический папку. Webpack игнорирует статическую папку и ничего в ней не будет обрабатывать.
Модули, серверное промежуточное программное обеспечение и плагины
Все они определяются (по их пути) в конфигурации Nuxt. Они доступны по всему миру в программе Nuxt.
Модули (/modules)
Свежая программа Nuxt по умолчанию предварительно упакована из Vue, Vue Router, Vuex, Vue Server Rendered и Vue Meta.
Но вы можете задаться вопросом, а как насчет таких функций, как Sitemap, Google Analytics, Progressive Web Apps и т.д.? Если вы думаете об использовании модулей, то да, вы правы, именно здесь обнаруживается мощность модулей Nuxt.
serverMiddleware (т.е. /api)
serverMiddleware можно считать точкой расширения для вашего приложения. Они особенные, поскольку имеют доступ к базовому экземпляру подключения.
Поскольку Nuxt использует подключить для доставки программы он позволяет подключать специальные функции к основному конвейеру запросов в качестве промежуточного программного обеспечения.
Вы можете использовать serverMiddleware для:
- Создайте конечную точку API для подключения к внешним программам.
- Создайте конечную точку API для отправки электронной почты пользователям из программы Nuxt.
- Получить доступ к запросу и изменить его любым способом даже до того, как он достигнет Nuxt.
Обратите внимание, что у вас нет предварительно заполненных пустых папок для serverMiddleware и модулей. Вы создаете их, когда это необходимо.
Плагины (/plugins)
Вы можете заставить существующие миксины, фильтры или директивы Vue работать интенсивнее, просто превратив их в плагины Nuxt. Вы размещаете их в /плагины каталог, поставляемый со свежей инсталляцией Nuxt.
Но чаще всего вы будете добавлять внешние пакеты или библиотеки Vue в качестве плагинов Nuxt. Вы включаете их в Nuxt, просто используя Vue.use() синтаксиса. Некоторые из основных плагинов, которые я всегда использую в своей реализации Nuxt, – это Vue Bootstrap, проверка формы, отличный набор иконок и axios.
Это еще не конец плагинов. Вы можете написать свои плагины и добавить их в корни программы. Они доступны во всем мире в вашем приложении Nuxt. Это мой любимый способ добавлять собственные переходы GreenSock или Scroll-Magic в проект и использовать их в Vue (/компоненты) и Страница (/pages) компонентов.
Обзор высокого уровня модулей, серверного промежуточного программного обеспечения и плагинов
Упакуйте, упаковайте и доставьте
Когда у вас есть нужные функции, вы создаете приложение с помощью npm запустить сборку. Nuxt упаковывает ваше приложение.
Как показано на схеме ниже, index.js является основной точкой входа, которая импортирует app.js.
App.js определяет корневой экземпляр Vue. Если внимательно присмотреться в .nuxt/App.jsэто не что иное, как компонент Vue.
Как только этот корневой экземпляр Vue определен, клиентская запись (client.js) создает новый экземпляр на его основе и монтирует его к элементу DOM. Конечные пользователи видят новый экземпляр программы в своих браузерах. При входе на сервер (server.js) создает новый экземпляр программы для каждого запроса.
И, наконец, Webpack объединяет ваше приложение так, чтобы код работал как на клиентской, так и на серверной стороне. Пакет сервера воспроизводит серверную сторону, а клиентский пакет гидратирует статическую HTML-разметку в обозревателе. Это превращает его в динамический DOM, который может реагировать на изменение данных на стороне клиента.
Nuxt делает это все из коробки за нас, поэтому вам не придется писать эту настройку вручную. Большая сложность включает в себя два последних шага – упаковка и комплектование. Но Nuxt все это скрывает от вас. Вы можете сосредоточиться на коде программы, который в конечном счете обеспечивает окончательную программу.
Вывод
Надеюсь, этот обзор высшего уровня структуры кода программы сделает вас еще на один шаг в вашем путешествии изучения фреймворка Nuxt.
Это одна из многих альтернативных точек зрения, которая поможет вам понять, как всё сочетается в приложении Nuxt.
Лично для меня это небольшое упражнение помогает мне:
- сопоставьте требования проекта с готовыми функциями Nuxt
- перечень соответствующих модулей и плагинов сообщества, которые уже доступны, и
- выберите другие/сложные биты, требующие специальной разработки.
Диаграммы ссылаются на версии диаграмм с высоким разрешением, использованных выше
- Хуки жизненного цикла Nuxt Js
- Понимание модулей, серверного промежуточного программного обеспечения и плагинов
- Универсальный код программы в Nuxt.js
Не стесняйтесь обращаться с комментариями, отзывами или даже предложением о новых идеях диаграмм, которые вы хотели бы увидеть в разделе комментариев ниже.
Если вы новичок в Nuxt, то можете просмотреть мою предыдущую статью по этой теме «Почему Nuxt Js является идеальным фреймворком для вашей целевой страницы? Это даст вам более глубокое представление о тонкостях разработки приложений с помощью Nuxt.
Вы уже Nuxt?
Когда @_achopin спросил @vuejsamsterdam: «Вы Nuxt?» Я подумал: привет… Я нукст.
И я создал эти наклейки Nuxt – профессионально напечатанные Moo Printing и готовы к отправке, если вы заинтересованы. Кроме того, вы можете также заказать их на RedBubble.