Структура базового проекта Nuxt.js

Оглавление

• Папки
  • Папка .nuxt
  • Папка assets
  • Папка components
  • Папка layouts
  • Папка middleware
  • Папка pages
  • Папка plugins
  • Папка static
  •  Папка store
•  Файлы
  • Файл package.json
    • Зависимости
    • Скрипты
  • Файл nuxt.config.js
• Псевдонимы

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

#

Папки

Nuxt.js содержит несколько папок, который будут установлены по умолчанию, вместе с установкой проекта.

#

Папка .nuxt

Системно-сгенерированная папка, которая обновляется автоматически в процессе работы над приложением. Трогать её не следует.

#

Папка assets

Папка assets содержит нескомпилированные файлы с исходным кодом, такие как LESS, SCSS или JavaScript код.

#

Папка components

Папка components содержит компоненты Vue.js для приложения.

#

Папка layouts

Папка layouts содержит шаблоны приложения. В этих шаблонах задается базовая разметка страниц, в зависимости от их внешнего вида. Если в вашем приложении несколько страниц с разной разметкой — определять её нужно именно в файлах layout.

#

Папка middleware

В этой папке необходимо хранить сущности middleware. Они позволяют определять пользовательские функции, которые можно запускать перед отображением страницы или группы страниц (layouts).

#

Папка pages

Папка pages содержит представления (views) и маршруты (routes). Фреймворк считывает все файлы .vue внутри папки и создает маршрутизатор для вашего приложения.

#

Папка plugins

Папка plugins содержит JavaScript-плагины, запускаемые перед созданием экземпляра корневого приложения Vue.js.

#

Папка static

Папка static содержит статические файлы приложения. Каждый файл в этой папке доступен через /.

Пример: /static/robots.txt будет доступен как /robots.txt.

#

 Папка store

Папка store может содержать файлы Vuex хранилища. Vuex хранилище является опциональным в Nuxt.js. Создайте файл index.js в этой папке, и Vuex хранилище активируется фреймворком автоматически.

#

 Файлы

Несколько файлов, которые устанавливаются вместе с Nuxt.js.

#

Файл package.json

Внутри файла package.json, вы найдете настройки вашего приложения. Название, описание, имя автора, версию, скрипты, зависимости и т. д. Представьте что во время разработки вы установили несколько npm пакетов, они лежат у вас в папке node_modules, тащить всю эту папку между серверами не имеет смысла, достаточно перенести package.json и запустить установку приложения. Он установит проект с теми настройками и зависимостями, что указаны в этом файле.

#

Зависимости

По умолчанию в зависимостях вы найдете только одну — собственно сам фреймворк Nuxt.js.

"dependencies": {
  "nuxt": "^2.14.1"
},

#

Скрипты

По умолчанию вам доступы 4 скрипта для управления приложением.

• dev — скрипт для запуска приложения — npm run dev.
• build — скрипт для билда продакшен приложения (оптимизированная версия приложения) — npm run build.
• start — скрипт для запуска оптимизированной версии в работу, запускает и сервер и клиент — npm run start.
• generate — скрипт генерирует статические страницы (при использовании SPA) — npm run generate.

#

Файл nuxt.config.js

Файл nuxt.config.js содержит пользовательские конфигурации Nuxt.js для всего приложения.

Подробнее про nuxt.config.js

#

Псевдонимы

Псевдоним	Папка
~assets	/assets
~components	/components
~pages	/pages
~plugins	/plugins
~static	/static
~store	/store