Универсальный прикладной код в NUXT.JS

Автор оригинала: FreeCodeCamp Community Member.

Крути Патель

Краткое резюме структуры исходного кода в NUXT.JS

Вы новичок в рамках NUXT.JS и полностью перегружены количеством папок, с которыми он поставляется? Вы также удивляетесь, что большинство из них пусты только с файлом readme в них? Ну, вот где я был чуть больше года назад. С тех пор я всегда хотел учиться и документировать магию, что каждая папка принесла в проект NUXT.

И теперь, после внедрения нескольких проектов с этой структурой, я задокументировал мое понимание того, как эти папки вместе работают вместе, чтобы принести серверное приложение Vue для жизни.

Диаграмма выше основана на Vue SSR Guide и продлен с учетом NUXT.JS. На первый взгляд вы видите разные папки в Ваш универсальный код приложения Раздел и как тогда код, упакованный NUXT и в комплекте по WebPack.

Эта статья не является ни учебником, ни полным руководством для NUXT SSR. Это скорее показывает, что идет в универсальное приложение.

Хотя вы видите модули, ServerMiddleware и плагины в верхней части диаграммы, давайте начнем с Магазин первый.

Магазин vuex (//store)

NUXT поставляется предварительно упакованным с vuex, но он не активируется, если вы не сделаете магазин Vuex в /Магазин каталог и создать магазин.

Это очень специальный каталог для любого проекта, управляемого данными. Это где вы можете создать хранилище данных, а также определить NUXTSERVERINIT действие. Это происходит очень первым крюком жизненного цикла!

const createStore = () => {  return new Vuex.Store({     ...  })}

Когда пользователь изначально обращается к вашему приложению, это помогает заполнить/обновить магазин. Он также поддерживает состояние ваших данных по всему заявлению.

Маршрут Marmware (/Mardware)

Есть три разных вида промежуточного программного обеспечения маршрута в NUXT. Все они определены в одном центральном месте – в /промежуточное программное обеспечение каталог.

Отсюда вы можете использовать их следующими способами:

Глобальное промежуточное программное обеспечение – (запись через nuxt Config и влияет на все маршруты)

// nuxt.config.js

export default {  router: {    middleware: 'authenticated'  },}

Макет промежуточного программного обеспечения (вход через макеты и затрагивает группу соответствия маршрутов, то есть определенные страницы только для просмотра/доступ к аутентифицированным пользователям)

// layouts/default.vue

export default {  middleware: 'authenticated-basic-plan-user'}

Page Mardware (вход через компонент страницы и влияет на единый маршрут)

// pages/index.vue

export default {   middleware: 'subscribed'}

Выше промежуточного программного обеспечения приведены в этом точным порядке – это смысл, их приоритеты не подлежат обсуждению. Таким образом, вы должны тщательно подумать и планировать вашу заявку, чтобы получить из них наибольшее использование.

Vue компоненты

Есть три каталогов, где .vue Файлы создаются в проекте NUXT.

1. Страница компонентов? (/Страницы)

Это самый важный каталог всех, кто содержит представления приложений и маршруты. Компоненты Vue.js, созданные здесь, непосредственно преобразуются в прикладные маршруты.

Настоящая сила компонентов страниц лежит в динамических маршрутах. Вы можете использовать их для генерации SEO дружественных и ориентированных на данных URL-адреса. Динамические маршруты генерируются на основе вашей структуры каталога под /Страницы.

Кроме того, NUXT добавляет три специальных метода на компонентах страницы, которые не доступны где-либо еще. Они Validate () , Asyncdata () & fetch () Отказ

// 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. Компоненты макета (/макеты)

Компоненты макета питания структурных аспектов вашего приложения. Общие компоненты, найденные на всех страницах, создаются здесь (например, главное меню, вторичное меню, заголовок, нижний колонтитул и т. Д.). Они расположены в /Макеты каталог.

Вы можете быть таким же креативным, как вы хотите здесь, ведь они являются компонентами Vue.js. Не забудьте добавить T/> в основной зоне содержания макета.

Включить Marable-Mardware и хранить данные-состояния С компонентом макета для создания идеальных Кто видит – что Особенности любого количества пользовательских типов с различными сценариями. Вы можете достичь немного больше, чем просто с пользовательским пользовательским интерфейсом.

3. Компоненты Vue.js (///Компоненты)

Это регулярные, но универсальные VUE компоненты. Они созданы под /Компоненты каталог. Они не перегружены специальными методами, такими как компоненты страницы.

Но они позволяют вам структурировать и организовать вашу бизнес-логику. Они также скрывают тяжелую разметку от страница и Макет составные части. Это делает вашу кодовую базу более управляемой.

Теперь посмотрите внимательно – можете ли вы увидеть структуру частичной папки в этой диаграмме жизненного цикла NUXT? Подсказка: Магазин (NUXTSERVERINIT), маршрут промежуточного программного обеспечения и компонентов страницы (Validate, Asyncdata и Fetch методы)

Ресурсы

УБПАКОВЫЕ АКТИВЫ (///АКТИВЫ)

Активы, такие как файлы JavaScript, пользовательские шрифты и файлы CSS и CSS обрабатываются WebPack, используя определенные погрузчики (CSS-погрузчик, файл-загрузчик, URL-погрузчик и т. Д.) В зависимости от типов файлов. Например, если вы пишете свои CSS в .scss или Это Формат, а затем WebPack будет обработать эти файлы, используя определенный загрузчик и вывод, компилируемый .css Файл, который можно использовать браузером.

Вы даже можете настроить свой nuxt.config.js Чтобы проинструктировать WebPack понимать и оптимизировать изображения в папке активов как часть вашего процесса сборки. После того, как WebPack обрабатывает файлы, он придает Hash-код – Например, индекс.4258E3668A44556DD767.js – к обработанным предметам, которые помогают в долгосрочной кэшировании динамических активов и разряда в кэше.

Статические активы (/статические)

Для активов, которые не изменится, вы можете безопасно поставить их в Статический папка. WebPack игнорирует статическую папку и не будет обрабатывать ничего там.

Модули, ServerMiddleware и плагины

Все они определены (по их пути) в конфигурации NUXT. Они доступны во всем мире в приложении NUXT.

Модули (/модули)

Свежее приложение NUXT предварительно упаковано с Vue, Vue Router, Vuex, Vue Server представленным и Vue Meta по умолчанию.

Но вы можете удивляться, как насчет функций, таких как Citactemap, Google Analytics, Progressive Web Apps или более? Если вы думаете об использовании модулей, то да, вы правы, именно здесь питание модулей NUXT вступает в игру.

ServerMiddleware (I.E./API)

ServerMiddleware можно считать точкой расширения для вашего приложения. Они особенные, потому что у них есть доступ к базовому экземпляру Framework Connect.

Так как NUXT использует соединить Чтобы доставить приложение, он позволяет подключать пользовательские функции в базовый трубопровод запроса в качестве промежуточного программного обеспечения.

Вы можете использовать ServerMiddleware для:

Создайте конечную точку API для подключения к внешним приложениям.
Создайте конечную точку API, чтобы отправить электронную почту пользователей из вашего приложения NUXT.
Доступ и модифицируйте запрос в любом случае, даже до того, как он достигнет NUXT.

Обратите внимание, что у вас нет предварительно заполненных пустых папок для ServerMiddleware и модулей. Вы создаете их при необходимости.

Плагины (/плагины)

Вы можете сделать ваши существующие Vue Mixins, фильтры или директивы, работающие усерднее, просто преобразовав их в плагины NUXT. Вы размещаете их в /плагины Справочник, который поставляется со свежим установкой NUXT.

Но большую часть времени вы в конечном итоге добавляете внешние пакеты или библиотеки Vue в виде плагинов NUXT. Вы включаете их в NUXT, просто используя Vue.use () синтаксис. Некоторые из плагинов скота, которые я всегда в конечном итоге использую в моем внедрении NUXT, являются Vue Bootstrap, валидация формы, шрифт-потрясающий значок и Axios.

Это не конец плагинов. Вы можете написать пользовательские плагины и добавить их в корневой корню. Они доступны во всем мире в вашем приложении NUXT. Это мой личный любимый способ добавления пользовательских GreenSock или прокрутки магических переходов в проект и используя их в Vue (/Компоненты) и страница (/Страницы) составные части.

Обзор высокого уровня модулей, ServerMiddleware и плагинов

Пакет, пакет и доставить

После того, как у вас есть нужные функции, вы создаете свое приложение, используя NPM запустить сборку. NUXT пакеты вашего приложения.

Как показано на диаграмме ниже, index.js является основной точкой входа, которая импортирует app.js Отказ

App.js Определяет экземпляр корня Vue. Если вы внимательно посмотрите в .nuxt/app.js Это ничего, кроме Vue компонента.

После того, как этот экземпляр CORT VUE определяется, клиентская запись ( Client.js ) создает новый экземпляр, основанный на нем и устанавливает его в элемент DOM. Конечные пользователи видят новый экземпляр приложения в их браузерах. Пока запись сервера ( Server.js ) создает новый экземпляр приложения для каждого запроса.

И, наконец, WEBPACK сочиняет ваше приложение, чтобы код запускался как на стороне клиента, так и на сервере. Пакет сервера отображает сторону сервера, а клиентский пучок гидратов статической HTML-разметки в браузере. Оказывается в динамическом доме, которое может реагировать на изменения данных на стороне клиента.

NUXT делает это все из коробки для нас, поэтому вам не нужно писать эту настройку вручную. Много сложности попадает в последние два шага – упаковка и пакета. Но Nuxt скрывает все это от вас. Вы можете сосредоточиться на приложении, который в конечном итоге обеспечивает окончательное приложение.

Заключение

Я надеюсь, что этот обзор более высокого уровня структуры кодовой коды приложения требует еще один шаг в вашем обучающем путешествии NUXT Framework.

Это одна из многих альтернативных перспектив, которые помогут вам иметь смысл того, как все вписывается в приложение NUXT.

Для меня лично это маленькое упражнение помогает мне:

Ознакомьтесь с требованиями проекта против функций Nuxt Nuxt
Список соответствующих сообществ модулей и плагинов, которые уже доступны, и
Выберите оставшиеся/сложные биты, которые требуют пользовательского развития.

Диаграммы Ссылки с высокими версиями диаграмм, используемых выше

Не стесняйтесь обращаться с комментариями, обратной связью или даже предложению для новых идей с диаграммой, которые вы хотели бы видеть – в разделе «Комментарий» ниже.

Если вы новичок в NUXT, то вы можете проверить мою предыдущую статью по этой теме « Почему nuxt js – идеальная рамка для вашей посадки? Это даст вам более глубокое понимание в Nitty-Gritty Разработка приложений с NUXT.

Вы уже NUXT?

Когда @_Achopin спросил в @vuejsamsterdam : “Вы nuxt?” Я думал, эй … Я NUXT.

И я создал эти Nuxt наклейки – Профессионально напечатано Moo Phypt и готовая к отправке, если вы заинтересованы. Кроме того, вы можете заказать их на RedBubble также.