Гифт Эгвуэну, автор блога сообщества Alibaba Cloud

Введение

Nuxt.js — универсальный фреймворк для создания приложений Vue.js. Цель создания универсальной платформы заключается в том, чтобы она была достаточно гибкой, чтобы ее можно было использовать как в качестве приложения, отображаемого на стороне сервера, так и в качестве статического сгенерированного сайта или одностраничного приложения.

Nuxt.js основное внимание уделяет аспекту разработки рендеринга пользовательского интерфейса, абстрагируясь от распределения клиент/сервер. В этой статье мы рассмотрим фреймворк Nuxt, как его настроить, а также как он структурирован при создании приложений на базе Vue.

Зачем использовать Nuxt?

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

  • Автоматическое разделение кода
  • Работает на Vue
  • Рендеринг статических файлов
  • Замена горячего модуля
  • Препроцессоры: Sass, Stylus, Less
  • Рендеринг на стороне сервера
  • Поддержка HTTP/2

Создание шаблона приложения Nuxt

С Nuxt.js действительно легко начать работу. Команда Nuxt создала инструмент создания шаблонов, который позволит вам создать приложение nuxt за считанные секунды под названием create-nuxt-app. Вы можете использовать npx или yarn для создания проекта Nuxt со следующими командами.

npx create-nuxt-app <project-name> or 
yarn create nuxt-app <project-name>

Варианты, доступные при использовании команды create-nuxt-app, разнообразны, вы можете выбрать между интегрированными серверными фреймворками, фреймворками пользовательского интерфейса, фреймворками тестирования и другими необходимыми инструментами, такими как PWA и linting, и они будут автоматически сгенерированы и настроены для вас. Но для этого урока мы будем делать минимум, поэтому я отказался от некоторых функций.

Запустить проект

После установки зависимостей для запуска проекта доступна следующая команда:

yarn run dev

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

После выполнения команды для запуска приложения, если мы перейдем к [http://localhost:3000](http://localhost:3000/), теперь вы сможете увидеть наше приложение, работающее на экране, как показано ниже.

Структура папок

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

Активы: файлы, содержащиеся в этой папке, состоят из таких ресурсов, как изображения, шрифты и таблицы стилей, которые будут использоваться в приложении Nuxt.

Компоненты: каталог components состоит из многократно используемых компонентов Vue.js, которые будут использоваться при создании приложения, таких как (ввод, кнопка и карта) и т. д.

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

Промежуточное ПО: каталог middleware содержит промежуточное ПО вашего приложения. ПО промежуточного слоя позволяет определять пользовательские функции, которые можно запускать перед отрисовкой страницы или группы страниц.

Страницы: каталог pages содержит представления и маршруты вашего приложения. Фреймворк считывает все файлы .vue внутри этого каталога и создает маршрутизатор приложения. Например, если у вас есть маршрут index.vue, он станет маршрутом /, а маршрут about.vue станет маршрутом /about.

Плагины: каталог plugins содержит ваши плагины Javascript, которые вы хотите запустить перед созданием экземпляра корневого приложения Vue.js. Это место для глобальной регистрации компонентов и внедрения функций или констант.

Статический: каталог static похож на assets, но он напрямую связан с корнем сервера (/static/robots.txt доступен из http://localhost:3000/robots.txt) и содержит файлы, которые, скорее всего, не будут изменены (например, значок значка).

Магазин: в каталоге store находятся ваши файлы Vuex Store. Магазин Vuex поставляется с Nuxt.js из коробки, но по умолчанию он отключен. Создание файла index.js в этом каталоге активирует хранилище.

nuxt.config.js: этот файл содержит пользовательские конфигурации Nuxt.js. Обратите внимание, что файл нельзя переименовать без дополнительных настроек.

package.json: в этом файле находятся все зависимости и скрипты, и этот файл нельзя переименовать.

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

Маршрутизация работает с Nuxt.js, так как она автоматически генерирует конфигурацию vue-router на основе вашего файлового дерева из .vue файлов внутри каталога pages. Он просматривает структуру и автоматически генерирует конфигурации маршрутов на основе этой структуры. Nuxt и vue-router выполняют всю внутреннюю работу.

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

pages/
--|index.vue
--|product.vue
 --|index.vue
 --|one.vue

и это будет генерировать маршруты, подобные следующим:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'product',
      path: '/product',
      component: 'pages/product/index.vue'
    },
    {
      name: 'product-one',
      path: '/product/one',
      component: 'pages/product/one.vue'
    }
  ]
}

Динамические маршруты

Вам может быть интересно, как это будет работать в случаях, когда мы имеем дело с динамическими маршрутами. Чтобы определить динамический маршрут с параметром, вам нужно определить файл .vue ИЛИ каталог с префиксом подчеркивания, давайте рассмотрим пример.

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

и это создаст следующие маршруты:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

Вложенные маршруты

Nuxt.js позволяет создавать вложенные маршруты, используя дочерние маршруты vue-router.

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

pages/
--| products/
-----| _id.vue
-----| index.vue
--| products.vue

станет:

router: {
  routes: [
    {
      path: '/products',
      component: 'pages/products.vue',
      children: [
        {
          path: '',
          component: 'pages/products/index.vue',
          name: 'products'
        },
        {
          path: ':id',
          component: 'pages/products/_id.vue',
          name: 'products-id'
        }
      ]
    }
  ]
}

При навигации между страницами Nuxt рекомендует использовать встроенный компонент nuxt-link, а не использовать router-link, который используется vue-router.

Развертывание приложения Nuxt.js

Nuxt.js поставляется с набором полезных команд как для разработки, так и для производства.

Мы рассмотрим все сценарии, используемые при запуске приложения nuxt, и углубимся в сценарий развертывания приложения Nuxt.

Описанные выше команды — это сценарии, которые мы можем запускать с помощью yarn или npm на терминале. Для производства нам нужно развернуть приложение. Nuxt.js позволяет выбрать один из трех режимов развертывания вашего приложения: рендеринг на стороне сервера, статическая генерация или одностраничные приложения.

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

Рендеринг сервера

Чтобы запустить ваше приложение, вам нужно будет выполнить следующую команду:

$ yarn build or npm run build

Статический Генерируется

Чтобы сгенерировать наше приложение в статические файлы, нам нужно будет выполнить следующую команду:

$ yarn generate or npm run generate

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

SPA в Nuxt можно создавать в двух режимах:

  • Добавление mode: 'spa' в файл nuxt.config.js
export default { 
  mode: 'spa'
}
  • Добавление флага --spa к каждой команде скрипта
"scripts": {
    "dev": "nuxt --spa",
    "build": "nuxt build --spa",
    "start": "nuxt start --spa",
    "generate": "nuxt generate --spa",
  },

С помощью следующих шагов, описанных выше, у нас есть возможность развернуть наше приложение Nuxt в трех разных режимах.

Развертывание приложения Nuxt в облаке Alibaba

Мы будем развертывать наше приложение nuxt с помощью Alibaba Object Storage Service, службы облачного хранения, которую можно использовать для хранения огромного количества данных в любой точке мира, и мы будем использовать эту службу для развертывания нашего статического веб-сайта.

Для начала вам потребуется уже иметь учетную запись в Alibaba Cloud, если вы не пойдете дальше и не создаете ее.

Чтобы разместить наш статический веб-сайт в Alibaba Cloud OSS, мы должны сначала выполнить следующие шаги:

  • Создайте корзину, в которой мы будем хранить файлы нашего веб-сайта, такие как файлы, изображения и сценарии.
  • Затем загрузите файлы в нашу корзину.
  • Установите для нашей корзины режим статического хостинга веб-сайтов.

После выполнения этих шагов наш сайт будет развернут в облаке Alibaba, а затем мы сможем получить к нему доступ, используя аналогичную ссылку http://nuxt-app.oss-ap-southeast-1.aliyuncs.com/

Создание корзины в Alibaba OSS

Чтобы создать ведро, нажмите кнопку «Создать ведро», как показано на изображении. Вам будет предложено ввести модальное окно для ввода имени корзины и региона. Обязательно установите класс хранения и список управления доступом (ACL) по умолчанию на изображении ниже.

Загрузить файлы в корзину

Следующий шаг — загрузить наши файлы в корзину, которую мы только что создали. Поскольку мы развертываем статический сайт, нам нужно запустить команду nuxt generate, чтобы создать статические файлы, которые мы можем загрузить. После выполнения этой команды в каталоге нашего проекта будет создана папка dist. Затем мы переходим на Alibaba, чтобы загрузить файлы, нажимаем на файлы, после чего вы сможете нажать «Загрузить». Перетащите всю папку dist в режим загрузки, и через несколько секунд мы загрузим наши файлы.

Перевести сегмент в режим статического сайта

И на последнем шаге нам нужно установить ведро в режим хостинга статического веб-сайта. На панели инструментов нажмите «Основные настройки», перейдите к статическим страницам и добавьте index.html в качестве домашней страницы по умолчанию.

После выполнения следующих шагов наш сайт будет работать на пользовательском домене, созданном Alibaba OSS h ttp://nuxt-app.oss-ap-southeast-1.aliyuncs.com/

Вывод

Nuxt.js как приложение можно использовать для создания статических сайтов, серверных и одностраничных приложений с использованием Vue.js, и именно это делает его универсальным. В этой статье мы увидели, как начать работу с Nuxt.js, от настройки проекта до понимания функций Nuxt.js, а также мы рассмотрели структуру каталогов и способы развертывания другой версии вашего приложения Nuxt. Теперь вы можете создавать веб-приложения с помощью Nuxt.js.

Похожий контент
Ознакомьтесь со статьей другого поставщика облака Alibaba на тему Введение в платформу Vue.JS.

Оригинальный источник



Начало работы с Nuxt.js
Alibaba Clouder 2 декабря 2019 г. 3 298 Автор Gift Egwuenu, автор блога сообщества Alibaba Cloud Nuxt.js — это универсальный…www. alibabacloud.com