Здравствуйте, читатели! Меня зовут Дхруви, и я фронтенд-инженер в Quicko. В Quicko мы используем Angular для создания всех веб-приложений, но для моей первой задачи здесь мне дали возможность изучить варианты и решить, что лучше всего подходит для нашего варианта использования. И я изучил все, что есть в Интернете, и решил пойти с Nuxt. Итак, эта статья в основном состоит из проблем, с которыми вы сталкиваетесь при создании веб-сайта, и того, как Nuxt помог мне их решить.
Итак, позвольте мне сначала рассказать вам о моей проблеме. Нам нужен был статический веб-сайт для нашей новой платформы API, чтобы продемонстрировать, что представляет собой продукт и как он решает основные проблемы соблюдения налогового законодательства для различных предприятий. Веб-сайт должен быть очень интерактивным, оптимизированным для SEO, удобным в сопровождении и иметь высокую производительность.
Мы создаем наши приложения и запускаем их в производство очень быстро, поэтому изменение технологического стека может занять много времени, и я должен был убедиться, что время, которое я вкладываю в веб-сайт, должно того стоить. Итак, я перечислил несколько важных формулировок проблем, и у Nuxt был ответ почти на каждый мой вопрос. Итак, я пошел на это, и теперь у нас есть красивый, интерактивный и очень удобный веб-сайт Nuxt в Интернете, и это тоже всего за пару недель. Найти его можно здесь — Песочница.
Вот список формулировок проблем и всех решений Nuxt, которые я использовал:
- Как легко приступить к работе и не тратить слишком много времени на хорошую структуру каталогов и управление зависимостями?
- Nuxt предоставляет очень интеллектуальные значения по умолчанию, основанные на хорошо изученных передовых методах, и запуск всего одной команды может дать нам скелет, который мы можем легко использовать для готового к производству приложения. При запуске нового приложения Nuxt запрашивает различные параметры зависимостей, такие как пользовательский интерфейс, библиотеки CSS, после чего они готовы к использованию в новом приложении. И встроенный по умолчанию Nuxt имеет дополнительные папки, в которых мы можем легко организовать наш код, и все они настраиваются.
Всего одна команда, и Nuxt сделает за вас свое волшебство.
npx create-nuxt-app <project-name>
2. Как лучше и эффективнее управлять конфигурацией маршрутизации?
- С Nuxt вы просто помещаете свои компоненты Vue из одного файла в папку pages, и Nuxt автоматически генерирует ваши маршруты с нулевой конфигурацией. Так что маршрутизация вообще не проблема в Nuxt.
3. Как я могу сделать свой веб-сайт оптимизированным для SEO и сделать его более заметным в Интернете?
- Это была самая серьезная проблема, которую мы хотели решить. Что ж, Nuxt упростил задачу сделать сайт более оптимизированным для SEO. Мы статически предварительно визуализировали весь веб-сайт, а затем использовали AWS S3 для его размещения, и снова с предварительно настроенным приложением Nuxt это была всего лишь одна команда. Кроме того, добавление SEO-контента на сайт было проще простого.
Для генерации статического веб-сайта вам необходимо иметь следующую конфигурацию в вашей конфигурации nuxt:
// Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode) ssr: true, // Target (https://go.nuxtjs.dev/config-target) target: ‘static’,
А для создания папки dist вам понадобится следующая команда:
// For generating the pre-rendered website nuxt generate //For viewing the production version of your app nuxt start
4. Как убрать из окна «не очень хорошее поведение SPA с точки зрения производительности»?
- Ну, мы все знаем, как производительность SPA может быть настоящей головной болью, но предварительно обработанный статический веб-сайт решил проблему. Веб-сайт загружается очень быстро, и после загрузки он начинает работать как обычный SPA. Кроме того, с автоматической разбивкой кода он будет загружать только тот JavaScript, который необходим для работы маршрута, поэтому Nuxt снова пришел мне на помощь.
5. Как настроить веб-сайт, даже если я использую отличные настройки по умолчанию?
- В любом приложении в тот или иной момент нам нужны настройки, и мы можем легко сделать это в Nuxt. Nuxt предоставляет модули более высокого порядка, так что мы можем легко перенастроить все и вся с нуля.
Я надеюсь, что эта статья была вам полезна, и я каким-то образом помог развеять ваши первоначальные сомнения относительно Nuxt. Увидимся в следующей статье. До свидания до тех пор!
