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

  1. Vue 2.x
  2. Vue-Router
  3. Vuex
  4. Вью-Мета

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

  • Кодовое плевание
  • Рендеринг на стороне сервера
  • Маршрутизация с асинхронными данными
  • Обслуживание статических файлов
  • ES6 / ES7 Транспиляция
  • Объединение и минификация
  • Управление метаинформацией
  • Горячая перезагрузка
  • Поддержка LESS, SASS и т. Д.
  • Готовые заголовки HTTP / 2
  • Модульная Архитектура

ПРИМЕЧАНИЕ. ЕСЛИ вы еще не настроили рабочее пространство, вы всегда можете обратиться к этим руководствам, чтобы начать работу.

  1. Введение в Vue Framework?
  2. Начало работы с Vue с использованием Fiddle
  3. Узнайте, как быстро обрабатывать вводимые пользователем данные и привязки форм с помощью Vue
  4. Легко привязывать выделение и множественный выбор с помощью Vue
  5. Научитесь составлять список дел - создание компонентов Vue
  6. Список задач Vue с опцией удаления и глобальной шиной событий - Часть II
  7. Как создать глобальную шину событий с помощью Vue.js?
  8. Узнайте, как работать с вычисляемыми свойствами в VueJS
  9. Как использовать наблюдатели Vue.js для асинхронных обновлений?
  10. Создайте простой редактор HTML с помощью директивы Vuejs v-html
  11. Предотвратить XSS в Vue.js с помощью Google Caja
  12. Как работает обработка событий в Vue.js?

Настройте Nuxt с помощью Vue-cli

Если вы не знакомы с установкой Vue-cli. Мы настоятельно рекомендуем вам ознакомиться с Руководством по установке и использованию Vue-cli.

Давайте посмотрим, как начать работу с Nuxt.

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

vue init nuxt/starter .

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

npm install

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

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

npm run dev

Если вы увидите часть сценария в package.json, вы поймете, что он просто вызывает Nuxt, что приводит к запуску сервера, а также к переносу кода и его выдаче. Я разместил package.json только для справки.

{ “name”: “the-web-juice”, “version”: “1.0.0”, “description”: “Nuxt.js project”, “author”: “Shiv Kumar Ganesh <[email protected]>”, “private”: true, “scripts”: { “dev”: “nuxt”, “build”: “nuxt build”, “start”: “nuxt start”, “generate”: “nuxt generate”, “lint”: “eslint — ext .js,.vue — ignore-path .gitignore .”, “precommit”: “npm run lint” }, “dependencies”: { “nuxt”: “¹.0.0-rc3” }, “devDependencies”: { “babel-eslint”: “⁷.2.3”, “eslint”: “⁴.3.0”, “eslint-config-standard”: “¹⁰.2.1”, “eslint-loader”: “¹.9.0”, “eslint-plugin-html”: “³.1.1”, “eslint-plugin-import”: “².7.0”, “eslint-plugin-node”: “⁵.1.1”, “eslint-plugin-promise”: “³.5.0”, “eslint-plugin-standard”: “³.0.1” } }

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

  1. Полученная страница после запуска Nuxt
  2. Теперь давайте рассмотрим структуру каталогов и объясним, что находится, где и как работает вместе.
  3. активы - содержат активы, такие как изображения или другой статический контент
  4. компоненты - это папка, в которой находятся все ваши компоненты
  5. макеты - эта папка содержит макет вашего веб-приложения, такой как верхний колонтитул, нижний колонтитул и т. д.
  6. промежуточное ПО - оно полностью содержит код, который должен быть запущен до того, как ваша страница будет отображена. Это может быть какая-то настраиваемая функция или утилиты.
  7. pages - это все ваши страницы и маршруты. Скорее вы можете сказать маршруты и виды.
  8. store - это помогает вам хранить ваши файлы Vuex на месте, чтобы хранилище было в одном месте.
  9. Для того, чтобы он отображал что-то конкретное, например «Hello World» или что-то еще. Давайте делать это поэтапно
  10. Откройте файл pages / index.vue.
  11. Удалите весь код в этом на время
  12. Напишите Hello World в файл, как показано ниже.
<template> <h1>Hello World</h1> </template>

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

Вывод

Как и в этой статье, мы только что установили простой шаблон Nuxt с Vue-cli и попробовали запустить его. Обязательно следуйте другим руководствам, чтобы получить другое руководство по той же теме.

Изначально опубликовано в The Web Juice.