Nuxt - это фреймворк, который заимствует идеи из Next.js и оказывается универсальным фреймворком для приложений Vue.js. Nuxt помогает вам создавать различные приложения, начиная от статических приложений Vue.js и заканчивая приложениями Vue.js с серверной визуализацией. Он поставляется с большим количеством промежуточного программного обеспечения и макетов, которые могут помочь любому без проблем начать работу. Мы можем исследовать Nuxt дальше, оценивая компоненты, которые появляются во время работы с ним. Nuxt включает в себя экосистему разработки, которая включает следующее.
Существуют различные функции, на которые следует обратить внимание при работе с Nuxt. А именно, у вас есть функции, упомянутые ниже, которые поставляются вместе с Nuxt.
- Кодовое плевание
- Рендеринг на стороне сервера
- Маршрутизация с асинхронными данными
- Обслуживание статических файлов
- ES6 / ES7 Транспиляция
- Объединение и минификация
- Управление метаинформацией
- Горячая перезагрузка
- Поддержка LESS, SASS и т. Д.
- Готовые заголовки HTTP / 2
- Модульная Архитектура
ПРИМЕЧАНИЕ. ЕСЛИ вы еще не настроили рабочее пространство, вы всегда можете обратиться к этим руководствам, чтобы начать работу.
- Введение в Vue Framework?
- Начало работы с Vue с использованием Fiddle
- Узнайте, как быстро обрабатывать вводимые пользователем данные и привязки форм с помощью Vue
- Легко привязывать выделение и множественный выбор с помощью Vue
- Научитесь составлять список дел - создание компонентов Vue
- Список задач Vue с опцией удаления и глобальной шиной событий - Часть II
- Как создать глобальную шину событий с помощью Vue.js?
- Узнайте, как работать с вычисляемыми свойствами в VueJS
- Как использовать наблюдатели Vue.js для асинхронных обновлений?
- Создайте простой редактор HTML с помощью директивы Vuejs v-html
- Предотвратить XSS в Vue.js с помощью Google Caja
- Как работает обработка событий в 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” } }
Результат выполнения приведенного выше кода выглядит следующим образом: -
- Полученная страница после запуска Nuxt
- Теперь давайте рассмотрим структуру каталогов и объясним, что находится, где и как работает вместе.
- активы - содержат активы, такие как изображения или другой статический контент
- компоненты - это папка, в которой находятся все ваши компоненты
- макеты - эта папка содержит макет вашего веб-приложения, такой как верхний колонтитул, нижний колонтитул и т. д.
- промежуточное ПО - оно полностью содержит код, который должен быть запущен до того, как ваша страница будет отображена. Это может быть какая-то настраиваемая функция или утилиты.
- pages - это все ваши страницы и маршруты. Скорее вы можете сказать маршруты и виды.
- store - это помогает вам хранить ваши файлы Vuex на месте, чтобы хранилище было в одном месте.
- Для того, чтобы он отображал что-то конкретное, например «Hello World» или что-то еще. Давайте делать это поэтапно
- Откройте файл pages / index.vue.
- Удалите весь код в этом на время
- Напишите Hello World в файл, как показано ниже.
<template> <h1>Hello World</h1> </template>
Это должно автоматически перезагрузить браузер или выполнить горячую перезагрузку, как мы говорим, и должно помочь вам продолжить работу.
Вывод
Как и в этой статье, мы только что установили простой шаблон Nuxt с Vue-cli и попробовали запустить его. Обязательно следуйте другим руководствам, чтобы получить другое руководство по той же теме.
Изначально опубликовано в The Web Juice.