Введение

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

Папки, файлы и их уникальные функции

Ресурсы

Папка assets в Nuxt, как и во Vue, предназначена для размещения ваших файлов URL-адресов активов. Файлы URL-адреса ресурсов - это файлы, которые вы можете вызывать в своих блоках CSS и шаблонов с помощью стандартных атрибутов с помощью URL-адреса. Например, атрибут <img> tag src или значение background-image: url(/**/) в CSS. Вы также можете использовать файлы URL ресурсов через CSS @import. Однако особенность папки ресурсов заключается в том, что она запускается через Webpack, где загрузчик URL-адресов условно встраивает ресурсы размером менее 4 КБ *, уменьшая количество HTTP-запросов. По умолчанию вы сможете получить доступ к файлам URL ресурсов с помощью следующих атрибутов в ваших шаблонах:

{
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
}

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

URL-адреса файлов ресурсов доступны с помощью ~assets/<file-path>.

Компоненты

Если вы знакомы с современными фреймворками Javascript, вы, вероятно, знакомы с концепцией компонентов - Nuxt ничем не отличается, папка components является домом для ваших компонентов. Вы можете импортировать свои компоненты через ~components/<file-path>.

Макеты

Макеты в Nuxt по сути являются файлами-оболочками для вашего основного приложения. При создании нового проекта Nuxt CLI создаст единый макет: default.vue. Вы можете включить в этот файл верхний и нижний колонтитулы и другие пользовательские компоненты. Для многих приложений может быть достаточно одного файла макета, однако вы можете настроить несколько макетов в зависимости от ваших потребностей, например, если вы хотите создать макет блога, вы можете создать новый файл в папке макетов, blog.vue, затем вы можете взять Преимущество этого макета за счет использования свойства макета в выбранном вами файле страницы:

export default {
   /**/
   layout: ‘blog’
   /**/
}

ПО промежуточного слоя

По промежуточного слоя действует как защита между маршрутами в вашем приложении, позволяя пользователям разрешать доступ только к определенным областям вашего сайта, если выполняется определенный набор критериев. Например, у вас может быть контент, доступный только для участников, поэтому вы можете создать промежуточное программное обеспечение, требующее аутентификации для доступа к этим маршрутам. Чтобы защитить страницу с помощью промежуточного программного обеспечения, вы можете создать новый js файл в папке middleware, например auth.js. После этого вы сможете получить доступ к auth.js промежуточному программному обеспечению, используя свойство middleware в выбранном вами файле страницы:

export default {
    /**/
    middleware: ‘auth'
    /**/
}

Страницы

Страницы в Nuxt являются особыми компонентами, вы можете работать с ними во многом так же, как и с обычными компонентами, однако страницы имеют некоторые уникальные свойства, которые их отличают. Помимо атрибутов промежуточного программного обеспечения и макета, страницы также имеют доступ к заголовку, asyncData и выборке среди других. Возможно, наиболее существенное различие между страницами и компонентами заключается в том, что страницы контролируют маршруты ваших приложений. После создания нового приложения Nuxt интерфейс командной строки создаст одну страницу: index.vue, вы можете считать ее своей домашней страницей. Предположим, вы хотите добавить раздел «Статьи» в свое приложение. Для этого вам понадобятся 2 маршрута: /articles для отображения ваших статей и динамический /articles/<file-path> маршрут для отображения отдельных статей. Чтобы добиться этого в Nuxt в каталоге pages, вам нужно создать новую папку с именем articles в новой папке articles, создать 2 файла index.vue и _id.vue, создав 2 желаемых маршрута /articles и /articles/<file-path> соответственно, с параметром id. доступен для маршрута /articles/<file-path>.

- - pages
- - - - articles
- - - - - - index.vue
- - - - - - _id.vue
- - - - index.vue

Плагины

Nuxt позволяет вам определять плагины JavaScript, которые будут запускаться перед корневым приложением Vue.js. Это полезно при использовании ваших собственных библиотек или внешних модулей. Каждый раз, используя Vue.use, вы должны создавать файл в plugins каталоге и добавлять его путь к плагинам в nuxt.config.js.

Статический

Папка static в Nuxt похожа на папку assets тем, что в ней хранятся статические файлы, которые вы можете вызывать из своего приложения. Однако, в отличие от файлов в папке assets, файлы в папке static действительно статичны и не будут запускаться через Webpack, а будут просто скопированы в вашу папку public. По этой причине к статическим файлам можно получить доступ, как если бы это был ваш корневой каталог. Если вы хотите получить доступ к /static/images/icon.svg из вашего шаблона, ваш путь будет /images/icon.svg.

Магазин

Каталог store, если вы решите его использовать, - это то место, где вы будете размещать все ваши файлы Vuex, Vuex - это шаблон / библиотека централизованного управления состоянием для Vue, которая позволяет вам легко обмениваться состоянием между components и pages. Как и в стандартном приложении Vue, вы можете использовать модули, состояние, геттеры, мутации и действия.

Конфигурация Nuxt

Файлы nuxt.config.js позволяют вам настроить ваш проект Nuxt, от SEO по умолчанию до пользовательских загрузчиков URL, среди прочего, глобального создания динамических маршрутов на основе CSS и SCSS и API.

Вывод

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

Если вы нашли эту статью полезной, хлопните в ладоши и подпишитесь на меня на Medium, Dev.to и / или Twitter.