Nuxt js Tutorial — это тема, которую мы обсудим сегодня. Nuxt.js — это платформа для создания универсальных приложений Vue js. Основная область действия nuxt — рендеринг пользовательского интерфейса , абстрагируясь от распределения клиент-сервер. Помните, Nuxt js не является серверной средой, такой как Laravel или Express. Он просто предварительно обрабатывает HTML страницу на сервере, а затем передает ее клиенту. Nuxt.js объединяет все формы вместе, чтобы мы могли создать элегантное приложение Vue js с рендерингом на стороне сервера. Nuxt.js поставляется с множеством функций, которые помогают нам в разработке между клиентской и серверной сторонами, такими как асинхронные данные, промежуточное ПО, макеты и т. Д. Nuxt js включает следующие различные компоненты и библиотеки для создания динамичной и надежной разработки веб-приложений. :

• Vue 2
• Vue Router
• Vuex (включается только при использовании параметра store)
• Vue Server Renderer (исключено при использовании mode: 'spa' )
• vue-meta

Nuxt.js Возможности

• Запись файлов Vue
• Автоматическое разделение кода.
• Рендеринг на стороне сервера.
• Мощная система маршрутизации с асинхронными данными.
• Обслуживание статических файлов.
• Транспиляция ES6/ES7.
• Объединение и минимизация вашего JS и CSS.
• Управление элементом nt ( title >, meta > и т. д.)
• Горячая замена модуля в разработке.
• Препроцессор: Sass, Less, Stylus и т. д.
• Готовы push-заголовки HTTP/2.
• Расширение с помощью модульной архитектуры.

Зачем нам нужен Nuxt.js?

Рабочий процесс приложения Vue.js следующий.

1. Клиент сначала запрашивает сервер.
2. Сервер возвращает ответ с файлом index.html с кодом Vue на нем. .
3. Теперь, если вы используете одностраничное приложение, вы не будете отправлять запрос другой страницы, но можете отправить запрос AJAX через fetch, axios или другие HTTP-библиотеки. . Но не полностью HTML запрос страницы, просто запрос AJAX, который возвращает данные JSON.
4. Теперь это нормально для одностраничного приложения, в котором, когда вы меняете маршрут, клиент отправляет запрос AJAX на сервер, и он возвращает ответ JSON, а затем клиент управляет этими данными и отображает их пользователю.
5. Но с точки зрения поисковой оптимизации это нехорошо. Когда сканеры поисковой системы отправляют запрос, они получают данные JSON и не получают HTML-страницу. Таким образом, метаописание и другая стратегия SEO не будут работать, и вы не сможете проиндексировать свои страницы ни в одной поисковой системе.
6. Чтобы решить эту проблему, Nuxt. js появится на картинке.
7. Он предварительно отрисовывает любую страницу, а затем отправляет клиенту данные сервера. Он не будет запрашивать какие-либо данные сервера, как мы манипулируем базой данных в серверной среде. Он просто предварительно визуализирует все динамические данные на сервере, а затем отправляет эту страницу клиенту.
8. Поэтому, когда веб-сканеры пытаются запросить эту страницу, они получают HTML-страницу полностью со всеми метатегами и описания.

Nuxt js Tutorial

Во-первых, нам нужно установить nuxt. js с помощью следующей команды.

 vue init nuxt-community/starter-template nuxt-tutorial 

Помните, что вам необходимо установить vue-cli глобально в вашей системе, в противном случае нажмите следующую команду в вашем терминале в режиме администратора.

 npm install -g vue-cli 

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

 npm install 

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

Определение структуры папок.

Структура ваших папок выглядит следующим образом.

В проекте так много папок. Мы не очень углубляемся в это. Если вы хотите узнать больше, перейдите по этой ссылке. Сейчас нас интересует только папка pages . Если мы собираемся отобразить другой маршрут, просто сначала создайте файл в папке pages с именем appdividend.vue .

//appdividend.vue  
 Блог AppDividend 
  

Определите шаблон HTML. Теперь, если мы хотим выполнить рендеринг в браузере, просто зайдите в браузер и нажмите следующую ссылку.

 http://localhost: 3000/appdividend 

Ура !! Мы видим нашу страницу. Таким образом, нам не нужно выполнять настройку маршрута вручную. Все это обрабатывается Nuxt.js Framework. Нам просто нужно создать страницы внутри каталога pages , а затем взять это имя файла и поместить это имя после корневого маршрута.

Nuxt js Компоненты.

В структуре папок есть одна папка с именем components , и в этой папке создайте один элемент с именем Box. .vue .

//Box.vue  
 
 {{title}} 
 
 {{description}} 
 
  экспорт по умолчанию {props: ['title', 'description']}  

Box.vue файл содержит два свойства.

1. title
2. description

Эти свойства либо получены из родительского компонента, либо определены в запросе AJAX. на странице услуг или любой другой странице. Итак, сейчас мы просто жестко кодируем значения из родительского компонента vue. Компоненты Nuxt вели себя как обычные компоненты Vue. В нем есть шаблон и Javascript. Нам просто нужно включить этот компонент в файлы наших страниц. В нашем случае это файл appdividend.vue .

//appdividend.vue     import Box from '~/components/Box.vue'export default {components: {Box}}  

Итак, вот , мы передали два свойства в компонент Box.vue . Компонент Box принимает это свойство и отображает внутри своего HTML-шаблона. Мы можем дать любые динамические значения в этом потоке. Кроме того, если мы передаем какие-либо данные восходящим компонентам, мы можем использовать для этого vuex store . Теперь перейдите по следующему URL-адресу.

 http://localhost: 3000/appdividend 

Вы можете увидеть, что наша страница имеет оба этих свойства, и если вы нажмете Ctrl + u , тогда вы увидите исходный код страницы и полную загруженную страницу HTML . Вот как вы можете создать приложение с рендерингом на стороне сервера, используя Nuxt.js. В следующих статьях мы подробно рассмотрим Nuxt.js . Учебник Nuxt js для начинающих 2018 на сегодня закончился. Следите за обновлениями следующих статей.