Как создать предварительно визуализированное, оптимизированное для SEO приложение Vue.js

1. GitHub репо и живая демо-версия Vue
2. Что такое Vue.js?
3. Наш пример Vue.js: быстрое, оптимизированное для SEO приложение для электронной коммерции
4. Предварительные условия
5. 1. Настройка среды
6. 2. Сборка архитектуры
7. 2.1 Строительство магазина
8. 2.2 Сборка роутера
9. 2.3 Связать все вместе
10. 3. Создание компонентов Vue
11. 4. Создание приложения
12. 5. Обработка Vue.js SEO с плагином Prerender
13. Другие важные соображения SEO

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

Я потер руки, все еще улыбаясь. И, наконец, повод использовать JS-фреймворк, о котором все так любят: Vue.js ,

Я только что закончил кодировать это приложение, и мне понравилось .

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

1. Как создать простое веб-приложение с помощью Vue.js
2. Как работать с Vue.js SEO и предварительным просмотром с PreRender-спа-плагин

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

Я слегка коснулся Vue в мой последний безголовый пост CMS , но этот пойдет намного глубже, поэтому я взволнован.

GitHub репо и живая демо-версия Vue

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

Смотрите GitHub код репо

Посмотреть демо Vue.js

Что такое Vue.js?

Давайте начнем с того, что опускаем немного знаний для тех, кто не знаком с прогрессивной структурой.

Vue - это легкая, прогрессивная среда JavaScript, которая помогает вам создавать веб-интерфейсы .

Не обманывайте себя частью определения «JS framework». Ведь Vue довольно сильно отличается от своих модных аналогов - React.js & Angular.js. Начнем с того, что это не побочный продукт с открытым исходным кодом коммерческих технологических гигантов, таких как Google и Facebook.

Эван Ю Впервые он был выпущен в 2014 году с намерением создать «постепенно расширяемую» современную библиотеку JS. Это одна из самых мощных функций Vue: создание подключаемых компонентов, которые вы можете добавить в любой проект, не подвергаясь серьезным рефакторингам. Любой разработчик может опробовать Vue в проекте, не подвергая опасности и не обременяя существующую кодовую базу.

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

1. Вы не можете знать всю архитектуру своего приложения с самого начала.

2. Ваши данные обязательно изменятся во время выполнения.

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

Vue также имеет более мягкую кривую обучения, чем, скажем, React, что требует знания шаблонов JSX. Можно даже сказать, что Vue - это React, за исключением неловких частей.

Для более глубокого сравнения с другими средами JS - React, Angular, Ember, Knockout, Polymer, Riot - проверить официальные документы на предмет.

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

Из открытых проектов, таких как Laravel & PageKit для предприятий, таких как Gitlab & Codeship (не говоря уже о гигантах Alibaba и Baidu), многие организации используют Vue.

Теперь, однако, пришло время посмотреть, как вы собираетесь использовать его здесь.

Наш пример Vue.js: быстрое, оптимизированное для SEO приложение для электронной коммерции

В этом разделе я покажу вам, как создать небольшое приложение для электронной коммерции, используя Vue 2.0 и Snipcart, нашу платформу корзины HTML / JS для разработчиков. Вы также узнаете, как убедиться, что страницы продукта правильно «сканируются» для роботов поисковых систем.

Предварительные условия

• Минимальные знания Vue.js - Начни здесь ,
• Основное понимание vuex & вя-маршрутизатор ,
• Аккаунт Snipcart (навсегда бесплатный в тестовом режиме).

Если вы хотите глубже погрузиться во все, что связано с Vue 2.0, Laracasts - это то, что вам нужно. эта серия ,

1. Настройка среды

Во-первых, используйте vue-cli для создания базового приложения Vue. В своем любимом терминале введите:

Это создаст новую папку vue-snipcart, содержащую базовую конфигурацию с использованием vue-loader. Это также позволит вам записать один компонент файла (template / js / css в том же файле .vue).

Я хочу, чтобы эта демонстрация была максимально реалистичной, поэтому давайте добавим еще два модуля, широко используемых в Vue SPA для больших приложений: vuex и vue-router.

• vuex - управляющий поток как государственный менеджер - действительно легкий, но очень мощный. Это сильно зависит от Redux, о котором вы можете узнать больше Вот ,
• vue-router позволяет вам определять маршруты для динамической обработки компонентов вашего приложения.

Чтобы установить их, перейдите в новую папку проекта vue-snipcart и выполните следующие команды:

Еще одна вещь, которую нужно установить сейчас, - это prerender-spa-plugin, который позволит вам предопределить просматриваемые маршруты:

Почти готово. Последние четыре пакета:

• мопс - для шаблонов я предпочитаю это HTML.
• vuex-router-sync - для вставки части информации о вашем маршрутизаторе непосредственно в состояние vuex.
• copy-webpack-plugin - чтобы упростить включение статических файлов в папку dist.
• babel-polyfill - для запуска Vue внутри PhantomJS (используется плагином prerender).

Запустите эти:

2. Сборка архитектуры

Установлено: проверьте. Время установить все, чтобы оно могло обрабатывать данные магазина.

Начнем с магазина Vuex. Вы будете использовать это для хранения / доступа к информации о наших продуктах.

Для этой демонстрации я буду использовать статические данные, хотя это все равно будет работать, если вместо этого вы получите их.

Примечание : с помощью Snipcart мы добавляем в корзину базовый фрагмент JS и определить продукты в разметке с помощью простые атрибуты HTML ,

2.1 Строительство магазина

Создайте папку хранилища в src вместе с 3 файлами:

• state.js для определения статических продуктов
• getters.js для определения функции get для получения товаров по идентификатору
• index.js для объединения первых двух

2.2 Сборка роутера

Давайте сохраним магазин основным: домашняя страница со списком товаров + страница с описанием каждого товара. Вам нужно зарегистрировать два маршрута в маршрутизаторе, чтобы обработать их:

Эти компоненты еще не созданы, но не стоит беспокоиться, они появятся позже. ;)

Обратите внимание, что я использовал режим: 'history' в моей декларации VueRouter. Это важно, так как плагин prerender не будет работать иначе. Разница в том, что для навигации маршрутизатор будет использовать исторический API вместо хеш-банга.

2.3 Связать все вместе

Теперь, когда у вас есть и ваш магазин, и ваш маршрутизатор, вам нужно зарегистрировать их в приложении. Перейдите в файл src / main.js и обновите его следующим образом:

Довольно просто, верно? Как упоминалось ранее, метод синхронизации из пакета vuex-router-sync вводит некоторую информацию о текущем маршруте в состояние хранилища. Это будет полезно позже.

3. Создание компонентов Vue

Имея данные, это здорово, но показывать их еще лучше. Для этого вы можете использовать три компонента:

• Дом, чтобы показать список продуктов
• Продукт, который будет использоваться для каждого продукта компонентом Home
• ProductDetails для отдельных страниц продукта

Каждый из них будет в папке src / components.

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

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

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

4. Создание приложения

Давайте использовать ваши новые компоненты, да?

Откройте файл App.vue. Содержимое там по-прежнему является содержимым по умолчанию, сгенерированным из скаффолдинга vue init webpack-simple.

Вместо этого поменяйте все на это:

Компонент TopContext не очень важен: он действует только как заголовок. Ключевая часть - это представление маршрутизатора: оно будет определяться динамически VueRouter, и вместо него будет добавлен связанный ранее определенный компонент.

Последнее, что нужно обновить, это index.html. Для этого варианта использования давайте создадим новую статическую папку в src. Там вы переместите файл индекса и обновите его следующим образом:

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

5. Обработка Vue.js SEO с плагином Prerender

Все в приложении отображается динамически с помощью JS, что не является супер для SEO: асинхронный контент страниц не может быть оптимально просканирован роботами поисковых систем. Было бы неразумно иметь сайт электронной коммерции, упускающий все возможности органического трафика!

Давайте использовать предварительную визуализацию, чтобы добавить больше возможностей SEO в ваше приложение Vue.js.

По сравнению с Vue SSR (рендеринг на стороне сервера), предварительный рендеринг гораздо проще настроить. И, честно говоря, бывший часто перебор , если вы не имеете дело с большим количеством маршрутов. Кроме того, оба достигают довольно схожих результатов на уровне SEO.

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

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

Хорошо, так как это работает?

CopyWebpackPlugin скопирует вашу статическую папку (только содержащую представление, ссылающееся на наше приложение Vue) в вашу папку dist. Затем PrerenderSpaPlugin будет использовать PhantomJS для загрузки содержимого ваших страниц и использовать результаты в качестве статических ресурсов.

И вуаля! Теперь у вас есть готовые, оптимизированные для SEO страницы продукта для приложения Vue.

Вы можете проверить это самостоятельно с помощью следующей команды:

Это создаст папку dist, содержащую все необходимое для производства.

Другие важные соображения SEO

1. Попробуйте добавить соответствующие метатеги и карту сайта для страниц своего приложения. Вы можете узнать больше о метатегах в функции «postProcessHtml» Вот ,
2. Отличный контент играет огромную роль в современном SEO. Я бы посоветовал сделать так, чтобы контент в вашем приложении можно было легко создавать, редактировать и оптимизировать. Чтобы расширить возможности редакторов контента, подумайте о том, чтобы добавить безголовую CMS и создать настоящую JAMstack ,
3. Связь HTTPS теперь официально считается фактором рейтинга Google. Я размещаю это демо на Netlify , который предоставляет бесплатные сертификаты SSL со всеми планами.
4. Мобильная индексация & мобильные дружелюбие в качестве фактора ранжирования, ну, в действительности. Убедитесь, что ваш мобильный опыт так же быстр, как и настольный!

Заключение

Поскольку я раньше работал с Vue, создание этого урока прошло довольно гладко. Должно быть, я провел час на демо. Я изо всех сил пытался заставить CopyWebpackPlugin работать, но в конце концов нашел ответы в их документах.

Я надеюсь, что этот пост побудит разработчиков начать использовать Vue в некоторых проектах. Как я уже сказал, вы можете начать медленно, разработав крошечную часть существующего проекта с ним. Я думаю, что это определенно стоит попробовать. Наш ведущий разработчик кодирует нашу последнюю функцию панели инструментов продавца с Vue, когда я пишу это, и ему это нравится. Кроме того, при правильной настройке приложение Vue может обеспечить хорошие результаты SEO.

Если вы хотите сначала получить вдохновение, проверьте Список Vue.js Awesome , который курирует множество примеров и проектов Vue.

И если вы в конечном итоге действительно копаете Vue, Полицейский или же поддержать создателя !

Если вы нашли этот пост ценным, уделите секунду поделиться этим в твиттере , Нашли что-то, что я пропустил? Есть мысли по поводу Vue, других фреймворков или работы с SEO? Комментарии все ваши!

Похожие

Комментарии