VuePress быстро ступает на яму в течение часа

JavaScript VuePress

Введение

официальная документация

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

На прошлой неделе автор Vue, в частности, предложил новое решение — VuePress. Основная идея позаимствована у nuxt.js, но лично я считаю, что nuxt больше подходит для средних и крупных приложений, поэтому я не буду здесь его слишком подробно обсуждать. VuePress — более легкое приложение, учитывая, что синтаксис vue может быть встроен в файл md, поэтому его гибкость относительно выше.

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

  1. SEO-оптимизация
  2. скорость загрузки страницы

характеристика

  • Поддержка встраивания кода vue в файлы md

  • Поддержка PWA

  • Интегрированный анализ GA

  • Компоновка rwd по умолчанию

  • Простые компоненты пользовательского интерфейса

Начать реализацию демо

Создайте новую папку и быстро инициализируйте ее

mkdir new_project

npm init -y

Установите VuePress глобально

npm install -g vuepress

Создайте папку для хранения статей md

// vuepress官方預設的命名是採用docs，為了避免踩到額外的坑，統一先使用官方文件的格式

mkdir docs

Настройте package.json и добавьте следующие две строки

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

Создайте файл md для поддержки рендеринга и предварительного просмотра домашней страницы.

echo '# Hello VuePress' > docs/README.md

Запустите локальный сервер для предварительного просмотра

yarn run docs:dev 
or
npm run docs:dev

Сначала выполните сборку пакета, пусть папка проекта представляет структуру официального пресета vuepress.

yarn run docs:build
or
npm run docs:build

структура

На этом этапе вы должны увидеть структуру, как показано ниже:

Вы увидите папку .vuepress, которая является официальной именованной папкой по умолчанию.

Используется для хранения компонентов (components) и файлов конфигурации (config.js).

Компоненты пользовательского интерфейса

Локальный сервер, который вы видите сейчас, должен иметь только простую страницу Hello VuePress, поэтому вам нужно добавить некоторые компоненты, чтобы обогатить страницу.

импортные компоненты

// cd進入.vuepress資料夾
// 建立一個config.js設定檔
// 準備引入組件

module.exports = {
    
}

title (название) составляющая

module.exports = {
    title: 'My VuePress'
}

// 將會出現在頁面的左上角，同時也是整個靜態website的標題

Верхняя панель навигации (с удобной функцией поиска)

module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'VuePress', link: 'https://vuepress.vuejs.org/' },
    ]
  }
}

левая боковая панель

sidebar: [
  '/',
  '/about/',
  {
    title: 'Group 1',
    collapsable: false,
    children: [
      '/guide/'
    ]
  }
]

// 除了側邊欄，也可以建立子側邊欄

Использование компонентов Vue

В дополнение к основному файлу md, VuePress также предоставляется в файле md, в который встроен файл vue.

// vuepress預設在.vuepress / components 下的.vue文件，都會自動註冊到全域。

// 故可在任何md文件中自由引用，僅須將components名稱，作為div名稱引入。

Чтобы объяснить следующий рисунок, сначала создайте файл vue в папке компонентов.

Помимо использования синтаксиса vue, вы также можете изменить стиль.

Наконец, импортируйте записанный файл vue в соответствующий файл md.

развернуть страницы github

Создайте репозиторий на удаленном конце и клонируйте его локально. Затем добавьте базу в файл конфигурации config.js.

// 在base進行設定後，會自動添加到下面子目錄中所有/開頭的url連結
// 需注意vuepress官方要求路徑名稱後方須添加 '/'

base: '/your repository name/'

В основном это будет выглядеть так:

База собрана и упакована.

yarn run docs:build
or
npm run docs:build

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

Вернитесь в удаленный репозиторий и введите настройки.

Перетащите на GitHub Страницы ниже Исходник выбирает ветку master, тему выбирать не нужно, а потом сохранять. То есть статический URL-адрес будет сгенерирован автоматически, но в начале URL-адрес будет 404, и для завершения развертывания потребуется более десяти секунд.

Демонстрация проекта

Категории