То, что я ненавижу делать в Vue JS, - это обработка рендеринга на стороне сервера.

Если вы заботитесь о SEO, у вас есть несколько вариантов для этого.

  • Рендеринг на стороне сервера (что мы и будем делать с nuxt.js)
  • Предварительная отрисовка (для создания статических файлов HTML во время сборки)

Уже есть отличная документация по рендерингу на стороне сервера из Vue JS, которую вы можете найти здесь https://ssr.vuejs.org/en/basic.html. Но все же мне это сложно, особенно если вы в этом новичок.

Настройка nuxt.js

Давайте рассмотрим шаги по настройке nuxt.js.

Прежде всего, у вас должны быть уже установлены vue-cli и node.

Если вы не знаете, как это сделать, то у меня уже есть 2 установочных видео на моем канале YouTube для Mac и Windows, нажмите здесь.

После этого команды довольно простые.

vue init nuxt/starter nuxtmedium (just press enter here for all the questions)
cd nuxtmedium
npm install
npm run dev

Теперь у вас есть проект nuxt js, созданный со всеми установленными зависимостями, и он работает на http: // localhost: 3000.

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

Маршрутизация в nuxt.js немного отличается. Он автоматически создается в соответствии с вашим древовидным списком внутри папки страниц.

Подробнее о маршрутизации можно прочитать здесь.

Итак, давайте создадим два маршрута. Внутри папки страниц мы создадим две папки, и в каждой папке будет файл index.vue.

Это должно выглядеть так. Файлы vue должны иметь строчную букву "i".

Теперь nuxt.js прочитает это древовидное представление и создаст два маршрута: / about и / contact.

Давайте сначала добавим контент в index.vue.

<template>
 <div>
 <h1>About page</h1>
 </div>
</template>

Сделаем то же самое с контактом.

<template>
 <div>
 <h1>Contact page</h1>
 </div>
</template>

Теперь вы можете посетить http: // localhost: 3000 / contact и http: // localhost: 3000 / о

Круто… Что теперь? Как мы можем справиться с SEO?

Обработка SEO с помощью nuxt.js

В nuxt.js все, что вам нужно сделать для обработки SEO для страницы, - это включить параметр заголовка в свой скрипт.

Таким образом, примерно у нас может быть что-то вроде этого…

<script>
  export default {
    head: {
    title: 'This is the about page',
    meta: [
        {
         hid: 'description',
         name: 'description',
         content: 'My about page'
        }
      ]
    }
  }
</script>

Последний файл index.vue для about - это

<template>
 <div>
 <h1>About page</h1>
 </div>
</template>
<script>
 export default {
 head: {
 title: ‘This is the about page’,
 meta: [
 {
 hid: ‘description’,
 name: ‘description’,
 content: ‘My about page’
 }
 ]
 }
 }
</script>

И этот для контакта

<template>
 <div>
 <h1>Contact page</h1>
 </div>
</template>
<script>
 export default {
 head: {
 title: ‘This is the contact page’,
 meta: [
 {
 hid: ‘description’,
 name: ‘description’,
 content: ‘My contact page’
 }
 ]
 }
 }
</script>

Теперь, если вы зайдете в раздел «Контакты» и «О нас», вы увидите, как меняется заголовок, а также, если вы проверите исходный код, вы можете увидеть метатег для описания.

Итак, вот и все, с nuxt.js ваше SEO снова на высоте.

Если вы получаете ошибки eslint из-за пробелов, вы можете отключить его, открыв nuxt.config.js и прокомментировав код if внутри функции расширения.

extend (config, ctx) {
 /*
 if (ctx.dev && ctx.isClient) {
 config.module.rules.push({
 enforce: ‘pre’,
 test: /\.(js|vue)$/,
 loader: ‘eslint-loader’,
 exclude: /(node_modules)/
 })
 }
 */
 }

Nuxt.js предназначен только для рендеринга на стороне сервера и SEO?

Что ж, у вас есть несколько вариантов обработки рендеринга на стороне сервера и SEO в Vue.JS, так что nuxt.js не только об этом. Он может больше!

Во-первых, они предоставляют вам лучшую структуру папок для начала работы над проектом.

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

Но где nuxt.js продвигает игру, так это с другим вариантом развертывания, называемым nuxt generate. Он создаст статическое сгенерированное приложение Vue.js.

Вот некоторые из функций, перечисленных в их документации.

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

Итак, в следующий раз, когда вы захотите создать приложение vue.js, убедитесь, что вы используете nuxt.js!