Я так счастлив, наконец, запустить свой новый сайт! Что касается технологического стека, я остался в своем любимом мире - Vue 😆. Но на этот раз я решил использовать вместо этого VuePress. В этой статье я хочу рассказать, как было принято это решение и что я думаю об использовании VuePress.

  • Что я использовал раньше
  • Почему я перешел с Nuxt на VuePress
  • Преимущества VuePress
  • Проблемы VuePress
  • Стоило ли переходить с Nuxt на VuePress?

Что я использовал раньше

До этого использовал Nuxt. Я выбрал Nuxt, потому что он был единственным, предлагающим рендеринг на стороне сервера. Это было важно для меня, так как в этом есть преимущество SEO. Позвольте мне объяснить, что это значит.

Это исходный HTML-вывод. Затем Vue берет на себя и вставляет все ваши компоненты в id=app часть. Вот почему во Vue вы всегда должны указывать элемент, к которому вы хотите прикрепить свое приложение vue. Как пользователь, вы этого не замечаете, потому что это происходит очень быстро (в зависимости от скорости вашего интернета).

Приложение Vue

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script src="/js/app.js"></script>
  </body>
</html>

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

Однако с Nuxt ваше приложение сначала создается на стороне сервера. Итак, как только он попадает в ваш браузер, все ваши страницы уже заполнены.

Приложение Nuxt

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <h1>Hello there</h1>
    </div>
    <script src="/js/app.js"></script>
  </body>
</html>

Вот как я люблю это сравнивать. Vue похож на те синие фартуки (не спонсируемые), которые вы должны собирать дома. А Nuxt похож на заказ еды на вынос из ресторана, все приходит готовым к употреблению 😋

В общем, я не пытался создать красивый сайт. Я просто пытался создать контентный сайт, чтобы отображать лакомые кусочки моего кода и статьи 😄. Так что мне не нужно было одностраничное приложение. Мне просто нужен хороший старый модный простой HTML. И именно поэтому Nuxt был для меня!

# Почему я перешел с Nuxt на VuePress

Если Nuxt был таким классным, зачем переключаться. Почему бы просто не продолжать. Ну потому что я был ленив. Самое замечательное в Nuxt - это то, что он супер настраиваемый. Это тоже его минус, пришлось все настраивать самому. Я больше не хотел этого делать. Это похоже на покупку недвижимости. Вы можете купить кусок пустой земли или готовый дом. Земля прекрасна, потому что вы можете построить на ней любой дом, какой захотите, по сути, вы начинаете с нуля. Но что касается меня, я хочу предварительно построенный дом, в который я могу просто въехать и ни о чем не беспокоиться.

И для меня это был VuePress. Он имеет встроенный поисковый плагин, уже настроенную супер-модную уценку с множеством интересных функций, таких как выделение кода, и он был разработан для сайта со статическим контентом. Это именно то, что я строил. Итак, я переключился!

Второе место: Gridsome

Я был так близок к тому, чтобы выбрать Gridsome. В нем есть все, что я хотел для создания сайта со статическим контентом. Но команда Vue пришла с собственной альтернативой - VuePress. Поэтому я подумал, что если команда Vue создала это, я в деле! Оглядываясь назад, я думаю, что мне следовало больше разобраться в этом, поскольку с VuePress были некоторые проблемы. Подробнее об этом позже.

Преимущества VuePress

Хорошо, давайте поговорим о некоторых вещах, которые мне нравятся в VuePress. Вот моя тройка лучших:

1. Функция уценки

Это была основная причина, по которой я перешел на VuePress. Я помню, что у меня было такое сложное время с настройкой разметки в Nuxt. Но это могло быть связано с моим ограниченным опытом программирования в то время. Поэтому я реализовал только минимум, чтобы он работал. С VuePress мне почти не приходилось работать, чтобы эти классные функции заработали!

Выделение строк

<p>I am not highlighted</p>
<p>I am highlighted</p>

Использование Vue в уценке

# My markdown
<VueComponent />

Внутренние ссылки

[Home](/) <!-- I can use relative links -->

Вы можете увидеть все расширения Markdown здесь

2. Поиск

Кто знал, что такая маленькая функция может иметь такое большое влияние. На моем старом сайте не было функции поиска. Так что я бы использовал Google для поиска на моем собственном сайте, чтобы найти конкретные лакомые кусочки. Я удивлен, что никогда не получал писем с жалобами по этому поводу. Может, эти люди просто перестали пользоваться моим сайтом вместе 😳 Я тебя не виню 🤦‍♀️

И угадай что! VuePress имел встроенную функцию поиска. Это плагин поиска на основе заголовков. Это означает, что он просканирует все ваши файлы уценки и вернет заголовок, соответствующий вашему запросу. Фантастика!

3. Frontmatter

Frontmatter - это как данные для вашего файла уценки. Когда вы пишете статью с уценкой, часто вы хотите включить в нее некоторую дополнительную информацию. Например, имя автора, дата создания, дата изменения… и т. Д. Как передать информацию в уценке. Это с блоком фронтмэттера.

---
author: Samantha Ming
created: Jan 26
modified: Jan 30
---
# My new blog post

Я хотел эту функцию для моего старого сайта. Мне не удалось заставить его работать, поэтому я вместо этого создал объект JavaScript, содержащий все данные моей статьи. Это заставляет мой творческий потенциал разработчика работать. Когда у вас не получается заставить его работать, вы находите другой способ. Это отличная черта работы над собственным проектом. Он не обязательно должен быть идеальным. Пока вы можете добраться до места назначения. Даже если это означает долгий путь, все в порядке. Потому что это ваша вечеринка, поэтому вы можете устанавливать правила! 😂

Проблемы VuePress

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

В документации отсутствуют примеры настраиваемых задач

Документация VuePress отлично подходит для основных функций. Это было немного сложно для более сложных или настраиваемых задач. Я обнаружил, что в документации немного не хватает примеров. Позвольте мне привести пример (дай пять на плавном переходе примера 😂).

Я пытался установить vue-fontawesome в свое приложение, чтобы использовать значки Font Awesome. Я не мог понять, как это сделать. К счастью, у меня были некоторые рекомендации, и я наконец понял это. Я хотел бы, чтобы в документации не было примеров использования. Думаю, это определенно поможет мне. Если вы когда-нибудь читали документацию по Vue, она наполнена примерами и очень проста для чтения. Хорошие новости: я знаю, что команда VuePress пытается улучшить это. Так что мы очень рады, что это произошло 👏

Кстати, вот как вы устанавливаете плагин для работы с VuePress, если вам интересно.

Ссылка на GitHub

Ограниченная поддержка метаданных

Когда я использовал Nuxt, был замечательный плагин под названием vue-meta. Это позволяет программно создавать метаданные для ваших страниц. Это очень важно для SEO и создания карточек для обмена в Twitter или Facebook.

Да, VuePress поддерживает это. Вы можете установить общий в вашем config файле. И вы можете установить отдельные в своем файле уценки. Помните, я упоминал об этом из-за того, что мне не удалось настроить фронтматтер в моем приложении Nuxt. В итоге я использовал огромный объект JavaScript для хранения всех данных для каждой из моих статей. В нем также оказались все мои метаданные. Поэтому я хотел программно установить свою метадату. Да, я нашел несколько неофициальных плагинов. Но они в основном полагались на метаданные, задаваемые в предварительном вопросе. Так что это не сработало.

Помните, когда я упомянул свой вариант, занявший второе место, Gridsome. Они это СДЕЛАЛИ! Ух 🤦‍♀️ Это было частью их пакета. Под их капотом они использовали vue-meta. Я был так близок к тому, чтобы переключиться на Gridsome только из-за этой функции. Но я был так далеко, что решил придерживаться VuePress. И вы можете спросить, почему бы вам просто не настроить vue-meta с помощью VuePress. Отличный вопрос! Если вы выясните, как это сделать, напишите мне, пожалуйста! Не то чтобы я не хотел, просто не мог понять. А время идет, поэтому я решил двигаться дальше. Кстати, мне нужно настроить vue-meta рендеринг на стороне сервера. Так что сложность немного выше.

В любом случае, текущее решение, которое у меня есть, использует мой собственный настраиваемый плагин, который программно извлекает мои метаданные из моего объекта JavaScript и устанавливает их вначале через настраиваемый плагин. Проблема в том, что когда мой сайт развернут, у меня появляются повторяющиеся метаданные (которые я недавно обнаружил). Ух, это входит в корзину проблем. Я разберусь с этим позже 🤦‍♀️ (опубликую обновление, если найду решение 🤞)

Я также создал проблему в официальном репозитории VuePress, поэтому, надеюсь, они рассмотрят возможность добавления этого. Не стесняйтесь присоединиться, если вам тоже нравится эта функция:

Запрос функции VuePress

Стоило ли переходить с Nuxt на VuePress?

Да 100% Да !!!! На создание сайта у меня ушло полных сумасшедших 2 месяца, работая круглосуточно. В VuePress было так много замечательных функций, которые уже были встроены в него, что я сэкономил массу времени, поскольку мне не приходилось работать над их созданием. Скорость - вот игра! Я не хочу тратить время на настройку чего-либо. Я не хочу строить ничего, в чем не нуждаюсь. Я хочу тратить свое время, просто выполняя. Вот почему я хотел выбрать что-то, в чем было бы много готовых вещей. Следовательно, выбрав VuePress.

Надеюсь, вам понравится этот обзор моего опыта и отзывы об использовании VuePress.

В следующем посте я хочу рассказать о том, почему я решил сменить фреймворк CSS и использовать Tailwindcss. Так что следите за обновлениями 😊

Ресурсы

Спасибо за чтение ❤

Сказать привет! Instagram | Твиттер | SamanthaMing.com | Блог