Сверхдетализированная практическая сборка сайта VuePress, открытие PWA и автоматическое развертывание.

внешний интерфейс Vue.js PWA

Я хотел написать статью о Vuepress до мая день. В результате друга Wedd.

Не забудьте прочитать меры предосторожности в конце!

Введение в Vuepress

Официальный сайт:vuepress.vuejs.org/

Подобно hexo, минималистичному генератору статических веб-сайтов, писать техническую документацию не круто. Конечно, создать блог не проблема.

Особенности Vuepress

  • Отзывчивый, вы также можете настроить тему, похожую на hexo
  • Встроенная установка (с добавлением некоторых расширений), и вы можете использовать компоненты Vue в нем
  • Интеграция с Google Аналитикой
  • PWA автоматически генерирует Service Worker

Начать быстро

Установить

Инициализировать проект

yarn init -y
# 或者 npm init -y

Установить vuepress

yarn add -D vuepress
# 或者 npm install -D vuepress

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

yarn global add vuepress
# 或者 npm install -g vuepress

Создайте новую папку Docs

mkdir docs

Настройте package.json

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

пишу

yarn docs:dev # 或者：npm run docs:dev

То есть для запуска среды разработки достаточно зайти в файл docs для написания статьи, открыть http://localhost:8080/ для предварительного просмотра

Построить

build генерирует статические файлы HTML, которые по умолчанию будут генерироваться в.vuepress/distв папке

yarn docs:build # 或者：npm run docs:build

базовая конфигурация

существует.vuepressСоздайте новый в каталогеconfig.js, который выводит объект

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

Информация о сайте

module.exports = {
  title: '游魂的文档',
  description: 'Document library',
  head: [
    ['link', { rel: 'icon', href: `/favicon.ico` }],
  ],
}

Конфигурация панели навигации

module.exports = {
  themeConfig: {
    nav: [
      { text: '主页', link: '/' },
      { text: '前端规范', link: '/frontEnd/' },
      { text: '开发环境', link: '/development/' },
      { text: '学习文档', link: '/notes/' },
      { text: '游魂博客', link: 'https://www.iyouhun.com' },
      // 下拉列表的配置
      {
        text: 'Languages',
        items: [
          { text: 'Chinese', link: '/language/chinese' },
          { text: 'English', link: '/language/English' }
        ]
      }
    ]
  }
}

Как показано на рисунке:

конфигурация боковой панели

можно опустить.mdрасширение, с/конечные пути будут рассматриваться как*/README.md

module.exports = {
  themeConfig: {
    sidebar: {
      '/frontEnd/': genSidebarConfig('前端开发规范'),
    }
  }
}

упакован вышеgenSidebarConfigфункция

function genSidebarConfig(title) {
  return [{
    title,
    collapsable: false,
    children: [
      '',
      'html-standard',
      'css-standard',
      'js-standard',
      'git-standard'
    ]
  }]
}

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

module.exports = {
  themeConfig: {
    sidebar: {
      '/note': [
        {
          title:'前端',
          collapsable: true,
          children:[
            '/notes/frontEnd/VueJS组件编码规范',
            '/notes/frontEnd/vue-cli脚手架快速搭建项目',
            '/notes/frontEnd/深入理解vue中的slot与slot-scope',
            '/notes/frontEnd/webpack入门',
            '/notes/frontEnd/PWA介绍及快速上手搭建一个PWA应用',
          ]
        },
        {
          title:'后端',
          collapsable: true,
          children:[
            'notes/backEnd/nginx入门',
            'notes/backEnd/CentOS如何挂载磁盘',
          ]
        },
      ]
    }
  }
}

Как показано на рисунке:

成品图

Модификация темы по умолчанию

Изменение цвета темы

существует.vuepressсоздать каталогoverride.stylдокумент

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色

пользовательский класс страницы

Иногда вам нужно применить разные css на разных страницах, вы можете сначала объявить на странице

---
pageClass: custom-page-class
---

затем вoverride.stylнаписано на

.theme-container.custom-page-class {
  /* 特定页面的 CSS */
}

Настройки ПВА

Установите для serviceWorker значение true, затем предоставьте манифест и значки, вы можете обратиться к моему предыдущему "Знакомство с PWA и быстрое начало создания приложения PWA》

module.exports = {
  head: [
    ['link', { rel: 'icon', href: `/favicon.ico` }],
    //增加manifest.json
    ['link', { rel: 'manifest', href: '/manifest.json' }],
  ],
  serviceWorker: true,
}

Развертывание запущено

установить базовый путь

существуетconfig.jsустановить базу Например: вы хотите развернуть на https://foo.github.io, затем установите для базы значение/, базовые значения по умолчанию/так что не нужно устанавливать Хотите развернуть в https://foo.github.io/bar/, тоbaseЭто должно быть установлено"/bar/"

module.exports = {
  base: '/documents/',
}

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

Сборка и автоматическое развертывание

использоватьgitHubстраницы илиcodingСтраницы могут быть или могут быть построены на вашем собственном сервере. БудуdistПросто отправьте содержимое папки в git или загрузите на сервер

yarn docs:build # 或者：npm run docs:build

Также можно получить скрипт, настроить непрерывную интеграцию, автоматически запускать скрипт при каждом PUSH-коде

deploy.sh

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

Меры предосторожности (яма)

  • Поместите все ресурсы, на которые вы хотите сослаться.vuepressв каталогеpublicпапка
  • После привязки независимого доменного имени к репозиторию git не забудьте изменить егоbaseдорожка
  • После настройки группировки боковой панели предыдущая/следующая ссылка будет автоматически сгенерирована по умолчанию.
  • Настройка автоматически сгенерированной боковой панели будет охватывать группировку боковой панели.
  • Не забудьте включить SSL при настройке PWA
Категории