NuxtJS
Установка
Использование приложения create-nuxt
Чтобы быстро приступить к работе, вы можете использовать create-nuxt-app .
Убедитесь, что вы установили yarn, npx (по умолчанию входит в состав npm v5.2+) или npm (v6.1+).
npm init nuxt-app <project-name>
или
npx create-nuxt-app <project-name>
Он задаст вам несколько вопросов (имя, параметры Nuxt, инфраструктура пользовательского
интерфейса, TypeScript, линтер, среда тестирования и т. д.). Чтобы узнать больше обо всех
параметрах, смотрите документацию create-nuxt-app .
После того, как на все вопросы будут даны ответы, он установит все зависимости. Следующий шаг
— перейти в папку проекта и запустить его:
Npm run dev
Маршрутизация
Большинство веб-сайтов имеют более одной страницы. Например, домашняя страница, страница
«О нас», страница контактов и т. д. Чтобы показать эти страницы, нам нужен маршрутизатор.
Автоматические маршруты
Большинство веб-сайтов имеют более одной страницы (т. е. домашнюю страницу, страницу с
информацией, страницу контактов и т. д.). Чтобы показать эти страницы, нам нужен
маршрутизатор. Вот тут-то и vue-router возникает проблема. При работе с приложением Vue вам
необходимо настроить файл конфигурации (т . е [Link].) и вручную добавить в него все ваши
маршруты. Nuxt автоматически генерирует vue-router для вас конфигурацию на основе
предоставленных вами файлов Vue внутри pages каталога. Это означает, что вам больше никогда
не придется писать конфигурацию маршрутизатора! Nuxt также дает вам автоматическое
разделение кода для всех ваших маршрутов.
Другими словами, все, что вам нужно сделать для маршрутизации в вашем приложении, — это
создать .vue файлы в pages папке.
Навигация
Для навигации между страницами вашего приложения вы должны использовать компонент
NuxtLink . Этот компонент включен в Nuxt, поэтому вам не нужно импортировать его, как другие
компоненты. Он похож на <a>тег HTML, за исключением того, что вместо использования
href="/about" мы используем to="/about". Если вы использовали vue-router раньше, вы можете
думать о <NuxtLink>нем как о замене<RouterLink>
Простая ссылка на [Link] страницу в вашей pages папке:
страницы /[Link]
<template>
<NuxtLink to="/">Home page</NuxtLink>
</template>
Для всех ссылок на страницы вашего сайта используйте <NuxtLink>. Если у вас есть ссылки на
другие веб-сайты, вы должны использовать этот <a>тег. См. пример ниже:
страницы /[Link]
<template>
<main>
<h1>Home page</h1>
<NuxtLink to="/about">
About (internal link that belongs to the Nuxt App)
</NuxtLink>
<a href="[Link] Link to another page</a>
</main>
</template>
Каталоги
Каталог страниц
Каталог pages содержит представления и маршруты вашего приложения. Как вы узнали из
предыдущей главы, Nuxt считывает все .vue файлы внутри этого каталога и использует их для
создания маршрутизатора приложения.
Каталог компонентов
Каталог components — это место, где вы размещаете все свои компоненты [Link], которые затем
импортируются на ваши страницы.
С Nuxt вы можете создавать свои компоненты и автоматически импортировать их в ваши
файлы .vue, что означает, что вам не нужно импортировать их вручную в разделе скриптов. Nuxt
сканирует и автоматически импортирует их для вас, как только для компонентов установлено
значение true.
Каталог активов
Каталог assets содержит ваши нескомпилированные активы, такие как ваши стили, изображения
или шрифты.
Статический каталог
Каталог static напрямую связан с корнем сервера и содержит файлы, которые должны сохранить
свои имена (например , [Link]) или , вероятно, не изменятся (например, значок значка)
Файл [Link]
Файл [Link] является единственной точкой конфигурации для Nuxt. Если вы хотите
добавить модули или переопределить настройки по умолчанию, здесь можно применить
изменения.
Файл [Link]
Файл [Link] содержит все зависимости и скрипты для вашего приложения.
Команды и развертывание
Nuxt поставляется с набором полезных команд как для разработки, так и для производства.
Использование в [Link]
У вас должны быть эти команды в вашем [Link]:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "npm run lint:js",
"lintfix": "npm run lint:js -- --fix"
},
Вы можете запускать свои команды через yarn <command>или npm run <command>(пример: yarn
dev/ npm run dev).
Среда разработки
Для запуска Nuxt в режиме разработки с горячей заменой модуля на [Link]
Npm run dev
Список команд
Вы можете запускать разные команды в зависимости от цели :
цель: server(значение по умолчанию)
nuxt dev — запустить сервер разработки.
nuxt build — создавайте и оптимизируйте свое приложение с помощью веб-пакета для
производства.
nuxt start — Запустить рабочий сервер (после запуска nuxt build). Используйте его для
хостинга [Link], такого как Heroku, Digital Ocean и т. д.
Цель: static
nuxt dev — запустить сервер разработки.
nuxt generate — сборка приложения (при необходимости), создание каждого маршрута в
виде HTML-файла и статический экспорт в dist/каталог (используется для статического
хостинга).
nuxt start — обслуживайте dist/каталог так же, как ваш статический хостинг (Netlify, Vercel,
Surge и т. д.), отлично подходит для тестирования перед развертыванием.
Проверка конфигурации Webpack
Вы можете проверить конфигурацию веб-пакета, используемую Nuxt для сборки проекта
(аналогично vue inspect ).
следующий запрос веб-пакета...
Аргументы:
--name: Имя пакета для проверки. (клиент, сервер, современный)
--dev: проверить конфигурацию веб-пакета для режима разработки.
--depth: Глубина осмотра. По умолчанию 2 для предотвращения подробного вывода.
--no-colors: отключить цвета ANSI (отключено по умолчанию, когда TTY недоступен или при
передаче в файл)
Примеры:
nuxt webpack
nuxt webpack devtool
nuxt webpack resolve alias
nuxt webpack module rules
nuxt webpack module rules test=.jsx
nuxt webpack module rules test=.pug oneOf use.0=raw
nuxt webpack plugins [Link]=WebpackBar options reporter
nuxt webpack module rules loader=vue-
nuxt webpack module rules "loader=.*-loader"
Развертывание производства
Nuxt позволяет выбирать между серверным или статическим развертыванием.
Развертывание сервера
Для развертывания приложения SSR мы используем target: 'server', где server — значение по
умолчанию.
npm run build
Nuxt создаст .nuxtкаталог, в котором все будет готово для развертывания на вашем сервере.
Мы рекомендуем .nuxtвводить .npmignoreили .gitignore.
После создания приложения вы можете использовать startкоманду, чтобы просмотреть
производственную версию вашего приложения.
npm run start
Статическое развертывание (предварительно обработанное)
Nuxt дает вам возможность разместить ваше веб-приложение на любом статическом хостинге.
Для развертывания статического генерироваться сайта убедитесь , что у вас есть target: 'static'в
вашем [Link](для Nuxt> = 2,13):
[Link]
export default {
target: 'static'
}
npm run generate
Nuxt создаст dist/каталог, в котором все будет готово для развертывания на статическом хостинге.
Начиная с Nuxt v2.13 установлен сканер, который теперь будет сканировать ваши теги ссылок и
генерировать ваши маршруты при использовании команды nuxt generateна основе этих ссылок.
Предупреждение: динамические маршруты игнорируются generateкомандой при использовании
Nuxt <= v2.12: генерация конфигурации API
При создании веб - приложения с nuxt generate, в контексте данной для asyncData и получать не
будет reqи res.
Сбой при ошибке
Чтобы вернуть ненулевой код состояния при обнаружении ошибки страницы и позволить CI/CD
завершить развертывание или сборку, вы можете использовать --fail-on-errorаргумент.
npm run generate --fail-on-error