Vue.js - отличный вариант для создания веб-приложений.
Для его использования у нас есть два основных инструмента:

  • Vue CLI 3 Стандартный инструментарий для разработки Vue.js
    Официальное решение для быстрой настройки приложения Vue.
  • Nuxt Универсальные приложения Vue.js
    Да, мы поговорим об этом.

Но чем dœs Nuxt отличается от стандартного приложения Vue?

[TL;DR]

[UPDATE] используйте сейчас Nuxt 2

установка

Установить Nuxt можно двумя способами:

Я предпочитаю последний, так как он не зависит от каких-либо глобальных зависимостей… и это также хороший способ интегрировать Nuxt в существующий проект.

Для веб-приложения я всегда добавляю:

Я на 100% уверен, что в тот или иной момент они мне понадобятся.

Выполнение интернационализации как можно скорее не требует особых усилий и избавляет меня от скучной задачи по включению его позже (файл за файлом и добавление вызовов и ключей i18n ...)

структура приложения

Vue не требует какой-либо структуры, но мы все любим и должны оставаться организованными.

Если вы используете Vue CLI, он создаст такую ​​структуру:

  • vue.config.js vue configuration
  • 📁 src
    - main.js your applications' entry point
    – router.js configuring routes
    – App.vue main Vue component
    📁 assets all static files
    📁 components other vue components
    📁 views your pages' components
    📁 store
    - index.js your Vuex Store

Nuxt потребует что-то подобное:

  • nuxt.config.js nuxt configuration
  • 📁 статический all static files
  • 📁 стр. all page files
  • 📁 макеты all layouts files (нюхательная штука, о которой мы поговорим позже)
  • 📁 магазин your Vuex Store
  • 📁 плагины Vue plugins

Это более плоская структура с очевидными названиями.

команды

И Vue CLI, и Nuxt предлагают множество полезных команд.
Я расскажу только об основных. Оба они служат одной цели:

  • сделать сервер быстрой разработки, чтобы начать кодирование
  • строить для производства

Vue CLI использует vue-cli-service, который является локальным пакетом для запуска волшебства.

  • vue-cli-service serve сервер разработки
  • vue-cli-service build сборка для производства

В Nuxt есть аналогичные команды.
Не нужно устанавливать дополнительный модуль 👍

  • nuxt сервер разработки
  • nuxt build сборка для производства

Обычно я использую одни и те же псевдонимы скрипты npm для всех своих проектов:

После этого я могу сделать yarn dev, чтобы начать кодирование, и yarn build, чтобы экспортировать.
Эти команды останутся независимыми от того, что приложение использует внизу.

Обзор Small Nuxt

Nuxt в некоторой степени полагается на соглашение, а не конфигурацию.
Создавая файлы, Nuxt позаботится об их интеграции в ваше приложение Vue.

Вот основные области, в которых он сияет.

маршрутизация

В стандартном приложении Vue вам нужно будет вручную настроить маршрутизатор.
Вот как обычно выглядит router.js:

Это имеет некоторые недостатки при рефакторинге.
Если вы хотите переименовать маршрут, вам необходимо:

  • переименовать компонент
  • изменить router.js файл
    - изменить имя маршрута
    - изменить импорт компонента
    - изменить имя блока веб-пакета

С Nuxt эта маршрутизация будет выглядеть так:

  • 📁 страницы
    - index.vue
    - foo.vue
    - 📁 bar
    - _id.vue

При переименовании маршрута теперь просто изменяется имя файла / папки.
И у вас есть стандартное разделение кода страницы.

хранить

То же самое и со стандартным магазином Vuex:

Как вы уже догадались, Nuxt следует тем же принципам, что и маршрутизация:

  • 📁 магазин
    - foo.js
    - bar.js

С теми же преимуществами, что и маршрутизация.
Тем не менее, есть классический режим, если вы хотите иметь больше контроля над ним.

примечание о макетах

Nuxt позволяет быстро обрабатывать множество макетов страниц.

Я думаю, что в большинстве случаев вы будете придерживаться базового:

  • layouts/default.vue
  • layouts/error.vue

Если вы хотите добиться этого в обычном приложении Vue, вам придется сделать это вручную, обернув каждый компонент страницы внутри желаемого компонента макета… что немного раздует ваш код.

Так что не обязательно, но определенно хорошее дополнение 🏅.

плагины (например, vue I18N)

Интеграция большего количества вещей из экосистемы Vue похожа на то, что есть в стандартном приложении Vue.

Это хорошо задокументировано здесь.

Например, создайте файл i18n.js в папке plugin…

… И обновите nuxt.config.js…

… И вы можете использовать $t('my-i18n0key') в своем приложении!

На данный момент Nuxt не поддерживает convention over configuration шаблон для интеграции плагинов, поэтому вам придется написать шаблонный код.
С другой стороны, этот код вряд ли изменится в будущем.

Но то, что на самом деле выглядит как ненужная конфигурация, на самом деле служит очень важной цели.

Nuxt позволяет нам создавать universal web applications.
Это означает, что он должен иметь возможность связывать ваш код:

  • для браузера
  • для сервера

Если вы ориентируетесь только на браузер (SPA), вам не о чем беспокоиться.
Но если вы запускаете код на сервере, вы не хотите, чтобы он сломался, потому что об использовании некоторых браузерных API.

Nuxt предотвращает это с помощью небольшой дополнительной настройки.

Теперь browser.js будет удален из пакета сервера, и мы уверены, что наш код не будет throw из-за отсутствия объекта window в среде NodeJs 😅

Прототипирование и эволюция

На мой взгляд, главное преимущество Nuxt в том, насколько удобно создать небольшой прототип и развить его до получения первого результата.
Мы уверены, что сможем развить его в любом направлении в будущем.

одностраничное приложение

Написание SPA позволяет довольно быстро создать небольшое приложение и дать любому возможность поиграть с ним практически в реальных условиях.

Вы можете создать простой статический API, поместив некоторые файлы JSON в папку static, и вы можете сохранить состояние вашего приложения, используя API локального хранилища с vuex-persistedstate

Хостинговые решения, такие как firebase, netlify или github Pages, позволяют бесплатно делиться вашим приложением.

универсальное веб-приложение

И теперь, когда вы удовлетворены своим прототипом, вы можете продвигать его дальше, интегрировав его с сервером Node.
Nuxt предоставляет несколько шаблонов, чтобы увидеть, как интеграция работает во многих фреймворках:

Я использую Коа 🐨

В файле server/index.js:

В package.json вам следует обновить свои скрипты:

Вам нужно будет немного обновить существующий код

  • Позаботьтесь о том, чтобы действия вашего магазина указывали на ваш новый API.
  • используйте рюкзак для запуска / компиляции серверного приложения.
    Это в основном связано с тем, что мы используем ES-модули на сервере, а NodeJS все еще отсутствует.

Кроме того, больше нечего делать.
Все будет работать, как ожидалось.

преимущества UWA

Создание универсального веб-приложения может показаться ненужным, но оно имеет некоторые преимущества:

  • Лучшее время начального рендеринга
  • Можно создать приложение, которое работает без Javascript в браузере
    - Я верю в прогрессивные улучшения
    - Android Chrome может запускать ваш сайт без Javascript
  • Должен иметь лучший SEO (подробнее о SEO вы можете прочитать здесь).

Если вы хотите узнать больше об этой теме, вы можете проверить статью Stereobooster о Плюсы и минусы рендеринга на стороне сервера.

А также…

Этот пост не является исчерпывающим списком того, что Nuxt может вам предложить.
Вот краткий список других вещей, которые он предоставляет:

Вывод

У Nuxt нет красивого графического интерфейса 😶, но это очень умный фрагмент кода, который позволяет мне чувствовать себя более продуктивно при создании веб-сайта или приложения.

Я сделал небольшой демонстрационный репозиторий с почти тем же кодом, что и в этом посте.

Если вы хотите узнать больше, вот несколько полезных ссылок, на которые я недавно наткнулся:

Так что, если вы используете Vue, вы можете попробовать Nuxt.

Первоначально опубликовано на hiswe.github.io.