Введение
Запуск нового проекта 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.