Универсальная структура кода программы в Nuxt.js

1656538579 universalnaya struktura koda programmy v

автор Крутые Патель

Краткое описание структуры исходного кода в Nuxt.js

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

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

1*lwIEF0F3eDlMKR1hKZic7Q

Вышеприведенная диаграмма основана на руководстве 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.vue
export default {  middleware: 'authenticated-basic-plan-user'}
  • Промежуточное программное обеспечение страницы (вход через компонент страницы и влияет на один маршрут)
// pages/index.vue
export 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. Не забудьте добавить t/> в области основного содержимого макета.

<template>  &lt;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.

1*5K1HLp5zxlKfwlM7X2BdZw
Nuxt упаковывает ваш код – Webpack объединяет и доставляет ваш код

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

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

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

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

Вывод

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

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

Лично для меня это небольшое упражнение помогает мне:

  • сопоставьте требования проекта с готовыми функциями Nuxt
  • перечень соответствующих модулей и плагинов сообщества, которые уже доступны, и
  • выберите другие/сложные биты, требующие специальной разработки.
  1. Хуки жизненного цикла Nuxt Js
  2. Понимание модулей, серверного промежуточного программного обеспечения и плагинов
  3. Универсальный код программы в Nuxt.js

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

1*IslxntaSDwDHfcKEieqDng
https://www.pariksha.io/

Если вы новичок в Nuxt, то можете просмотреть мою предыдущую статью по этой теме «Почему Nuxt Js является идеальным фреймворком для вашей целевой страницы? Это даст вам более глубокое представление о тонкостях разработки приложений с помощью Nuxt.

Вы уже Nuxt?

1*xV6a7Pxle-OrI10wcbCCeQ

Когда @_achopin спросил @vuejsamsterdam: «Вы Nuxt?» Я подумал: привет… Я нукст.

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

Добавить комментарий

Ваш адрес email не будет опубликован.