Если вы разработчик Vue, возможно, вы слышали о Nuxt.js. Но вы, вероятно, не знаете всей шумихи по этому поводу. Вы можете спросить, зачем мне использовать фреймворк внутри фреймворка, Vue упростил разработку приложений JavaScript, в чем идея Nuxt.js?
В этой статье мы рассмотрим 10 причин, по которым вам следует использовать Nuxt в вашем следующем проекте.
Что такое Nuxt.js?
Nuxt.js — это более продвинутый фреймворк, построенный на базе Vue. Это упрощает разработку общих или одностраничных приложений Vue.
Nuxt.js абстрагируется от деталей распределения кода на стороне сервера и на стороне клиента, чтобы вы могли сосредоточиться на разработке приложений. Цель Nuxt — сделать его достаточно гибким, чтобы его можно было использовать в качестве основной базы проекта. Поскольку большая часть Nuxt происходит на этапе разработки, вы можете получить много функций, добавив небольшое количество дополнительных килобайт в ваши файлы JavaScript.
Давайте рассмотрим причины, по которым вам нужно рассмотреть возможность использования Nuxt в вашем следующем проекте Vue.
1. Легко создавайте универсальные приложения
Одним из главных преимуществ Nuxt.js является то, что создание универсальных приложений никогда не было таким простым.
Что такое универсальное приложение?
Общее приложение используется для описания кода JavaScript, который может выполняться как на стороне клиента, так и на стороне сервера. Многие современные фреймворки JavaScript, такие как Vue, предназначены для создания одностраничных приложений (SPA), и использование SPA на традиционных веб-сайтах имеет много преимуществ, например, вы можете создавать пользовательские интерфейсы, которые быстро обновляются и быстро работают. Однако у SPA также есть недостатки, такие как длительное время загрузки, и Google борется с ними, потому что изначально на странице нет контента для целей SEO. Весь контент генерируется в JavaScript постфактум.
Общее приложение предполагает наличие SPA, но вместо пустой страницы index.html предварительно загрузите приложение на веб-сервер и отправьте обработанную HTML-страницу в ответ на запросы браузера для каждого маршрута, чтобы ускорить загрузку и улучшить SEO. упрощая сканирование страницы Google.
Nuxt.js упрощает написание универсального приложения
Создание универсальных приложений может быть утомительным, потому что вам нужно выполнить множество настроек как на стороне сервера, так и на стороне клиента.
Это проблема, которую Nuxt.js призван решить для приложений Vue. Nuxt.js упрощает обмен кодом между клиентом и сервером, поэтому вы можете сосредоточиться на логике своего приложения.
Nuxt.js позволяет вам получить доступ к таким свойствам, как isServer и isClient компонента (ярость beats.org/API/context…так что вы можете легко решить, рендерить ли что-то на клиенте или сервере. Есть также некоторые специальные компоненты, такие как компонент no-ssr (ярость beats.org/API/comp one…Используется для преднамеренного предотвращения рендеринга компонентов на стороне сервера.
Наконец, Nuxt предоставляет вам доступ к [методу asyncData] внутри компонента (ярость beats.org/API/),Вы можете использовать его для получения данных и их рендеринга на стороне сервера.
Это верхушка айсберга того, как Nuxt может помочь вам создавать универсальные приложения. [кликните сюда](ярость beats.org/expensive)Узнайте больше о рендеринге универсальных приложений, предоставляемых Nuxt.
2. Визуализируйте свое приложение Vue статически и получите все преимущества универсального приложения без необходимости использования сервера.
Самая большая инновация Nuxt — это команда nuxt generate. Эта команда создает полностью статическую версию веб-сайта. Он генерирует HTML для каждого из ваших маршрутов и помещает его в отдельный файл. Например, если у вас есть следующеестраница(терминология маршрутизации Nuxt):
-| pages/----| about.vue----| index.vue
Nuxt сгенерирует для вас следующую файловую структуру:
-| dist/----| about/------| index.html----| index.html
Преимущества этого очень похожи на преимущества универсальных приложений. Наличие тегов ускоряет загрузку веб-страниц и помогает поисковым системам и сканерам социальных сетей сканировать сайт.
Разница в том, что вам больше не нужен сервер. Все происходит на этапе разработки.
Это мощно, потому что вы получаете преимущества общего рендеринга без необходимости в сервере. Вы можете разместить свое приложение на GitHub Pages или Amazon S3.
Узнать больше остатически сгенерированный (предварительно отрендеренный)раздел в документации Nuxt.js
3. Получите автоматическое разделение кода (предварительно обработанные страницы)
Nuxt.js может генерировать статическую версию вашего веб-сайта, используя специальную конфигурацию Webpack.
Для каждого маршрута (страницы), сгенерированного статически, маршрут также получает свой собственный файл JavaScript и просто запускает код, необходимый для этого маршрута.
Это действительно помогает увеличить скорость, поскольку сохраняет размер файла JavaScript относительно размера всего приложения.
4. Настройка через командную строку с использованием начального шаблона
Nuxt.js предоставляет начальный шаблон под названием starter-template, который дает вам всю необходимую основу, чтобы вы могли начать работу над своим проектом с хорошей структурой папок.
Убедитесь, что у вас установлен vue-cli, затем выполните следующую команду:
$ vue init nuxt-community/starter-template <project-name>
Оттуда всего лишь CD в приложение и запустить NPM установить, и его должно быть легко.
кликните сюдаУзнайте больше о настройке проектов с помощью командной строки.
6. Получите хорошую структуру проекта по умолчанию
Во многих небольших приложениях Vue вы в конечном итоге управляете структурой своего кода так же, как и в нескольких файлах. Структура приложения Nuxt.js по умолчанию обеспечивает хорошую отправную точку для организации вашего приложения в понятной форме.
Вот несколько основных каталогов, которые вы создали:
- Components — папка для организации ваших отдельных компонентов Vue.
- Макеты — Папка, содержащая основной макет приложения.
- Pages — папка, содержащая маршруты вашего приложения. Nuxt.js читает все файлы .vue в этом каталоге и создает маршрутизатор приложений.
- Storage — папка, содержащая все файлы хранилища Vuex приложения.
кликните сюдачтобы узнать больше обо всей структуре папок, которую предлагает вам Nuxt.js.
5. Легко настраивайте переходы между вашими маршрутами
Vue имеет элемент-оболочку
Если вам нужно освежить в памяти элемент
Nuxt.js настраивает маршрутизацию таким образом, что каждая страница оборачивается в элемент
кликните сюдаПосмотрите пример того, как Nuxt.js может помочь вам с переходами между страницами.
7. Легко писать отдельные файловые компоненты
Во многих небольших проектах Vue компоненты определяются с помощью Vue.component, за которым следует new Vue({ el: '#container' }) для целевых элементов-контейнеров в теле каждой страницы.
Это для небольших проектов, где JavaScript используется только для улучшения определенных представлений. Но в более крупных проектах это может стать неуправляемым.
Все эти проблемы можно решить с помощью расширения .vue.компонент одного файларешать. Чтобы использовать их, вы должны настроить процесс сборки с помощью таких инструментов, как Webpack и Babel.
Вот пример одного файла .vue компонента
Nuxt.js предварительно настроен для Webpack, поэтому вы можете начать использовать файлы .vue без необходимости самостоятельно настраивать сложный процесс сборки.
Чтобы узнать больше об отдельных файловых компонентах, посетите документацию Vue.кликните сюда.
8. Получите компиляцию ES6/ES7 без дополнительной работы
Помимо Webpack, Nuxt.js также поставляется с предустановленным Babel. Babel занимается компиляцией последних версий JavaScript (таких как ES6 и ES7) в JavaScript, который может работать в старых браузерах.
Nuxt.js настраивает Babel за вас, поэтому все файлы .vue и весь код ES6, который вы пишете внутри тегов
кликните сюдаУзнать больше о Бабеле
9. Настройте сервер автоматического обновления, чтобы упростить разработку
По сравнению с настройкой этого процесса самостоятельно или процессом изменения-обновления-изменения-обновления, к которому привыкли веб-разработчики, разработка с Nuxt.js очень безболезненна. Он устанавливает для вас автоматически обновляемый сервер разработки.
Когда вы разрабатываете и обрабатываете эти файлы .vue, Nuxt.js использует конфигурацию Webpack для проверки изменений и компиляции всего за вас.
Вы можете запустить команду npm run dev в своем проекте Nuxt.js, и она настроит сервер разработки.
10. Доступ ко всему в сообществе Nuxt.js
Наконец, есть Nuxt Community [Коллекция GitHub](GitHub.com/anger subsides — Сообщество…Он собирает полезные библиотеки, модули, стартовые наборы и многое другое, упрощая создание приложений. Прежде чем писать код самостоятельно, посмотрите, что вам нужно здесь.
Суммировать
Все эти функции делают разработку приложений Vue.js еще лучше. Даже если вам не нужно универсальное приложение и вы хотите придерживаться SPA, использование Nuxt.js все равно имеет свои преимущества. Это может быть основная база вашего проекта с такими функциями, как файлы .vue, компиляция ES6 и многое другое.
Больше контента Nuxt
на [VueMastery.com](woohoo.v UE mastery.com/)Изучите Nuxt.js. Скоро появится контент, ориентированный на Nuxt. Вы можете создать бесплатную учетную запись, чтобы получать уведомления.