Vuepress Build Project Project Документация

VuePress
Vuepress Build Project Project Документация

предисловие

  • 【Музыкальный блог】Сейчас в сети!
  • Почему вы хотите писать документацию?
  • Потому что если в проекте нет документов, возрастет сложность стыковки, а во-вторых, самому будет удобно увидеть собственный код.После трех дней к коду нужно относиться с восхищением, что удобно другим и не только удобно для себя.
  • Вдохновение: Мои коллеги недавно исследовали Ele.me, а потом я обнаружил, что документация Ele.me привязана к компонентам кода Я хотел извлечь его документацию, но обнаружил, что связь слишком высока, и Я тоже думал о своем проекте, там тоже должен быть документ, поэтому вдохновившись, я пошел узнавать, что vuepress неплох, а md пишет документ
  • В последнее время я два раза инкапсулировал компонент Ele.me, после инкапсуляции его можно разместить нав документации vuepress
  • Некоторые друзья-обезьяны github не перешли через стену, и я развернул еще один набор на Alibaba Cloud.в документации vuePress

стиль эффекта веб-сайта

шесть аспектов

1. Скачать vuepress

  • Портал на гитхабе:GitHub.com/git-достоинство…

  • Официальный сайт:Cai Baojian.com/v UE press/So…

  • Сначала я клонирую официальный github и запускаю его, чтобы увидеть полный эффект. Затем в соответствии с введением на официальном сайте и справочными статьями в сочетании с полным кодом шаг за шагом настройте содержимое. Наконец, обратитесь к стилю дизайна элемента, измените и увеличьте код, чтобы сформировать веб-сайт библиотеки компонентов платформы.

  • После загрузки кода на github вы можете напрямуюnpm run docs:devПопробуйте эффект.Второй и третий пункты этой статьи покажут вам больше о vuepress.Если вы его понимаете, то можете его обойти.

2. Понять структуру vuepress

  • конфигурационный файл

  • Конфигурация (ссылка:Cai Baojian.com/v UE press/co…) Основные файлы сайта VuePress:.vuepress/config.js, который экспортирует объект JavaScript:

  •   module.exports = {
        title: '郑泽敏个人文档', // 设置网站标题
        // title: '文档',
        base: '/vuePressDos/',
        description: '音乐博客', //描述
        dest: './dist',   // 设置输出目录
        port: 2333, //端口
       
        themeConfig: { //主题配置
          // 添加导航栏
          nav: [
            { text: '主页', link: '/' }, // 导航条
            { text: '组件文档', link: '/baseComponents/' },
            { text: '知识库', link: '/knowledge/' },
            { text: '接口对接规范', link: '/interfaceSpecification/' },
            {
              text: 'github',
              // 这里是下拉列表展现形式。
              items: [
                { text: 'focus-outside', link: 'https://github.com/TaoXuSheng/focus-outside' },
                { text: 'stylus-converter', link: 'https://github.com/TaoXuSheng/stylus-converter' },
              ]
            }
          ],
          // 为以下路由添加侧边栏
          sidebar:{
            '/baseComponents/': [
              {
                title: '布局类组件',
                collapsable: true,
                children: [
                  'base/test1',
                  'base/test2',
                  'base/test3',
                  'base/test4',
                  'base/test5'
                ]
              },
              {
                title: '可视化组件',
                collapsable: true,
                children: [
                ]
              },
              {
                title: '工具类组件',
                collapsable: true,
                children: [
                ]
              }
            ],
            '/interfaceSpecification/': [
              {
                title: '前后端对接规范',
                collapsable: true,
                children: [
                  'base/apiRequest',
                  'base/apiRespone',
                  'base/apiOther'
                 
                ]
              }
            ]
          }
        }
      }
    
  • Раздел конфигурации темы: Измените стиль в .vuepress/override.styl:

  •   $accentColor = #3EB9C8 // 主题色
      $textColor = #2c3e50 // 文字颜色
      $borderColor = #eaecef // 边框颜色
      $codeBgColor = #282c34 // 代码背景颜色
      
      
      // 代码库重置
      .content pre{
        margin: 0!important;
      }
    
  • Добавьте другие плагины расширения

  • Плагины npm install: element-ui, vue-echarts, vue-highlight.

  • Введите в .vuepress/enhanceApp.js:

  •   /**
       * 扩展 VuePress 应用
       */
      import VueHighlightJS from 'vue-highlight.js';
      import 'highlight.js/styles/atom-one-dark.css';
      import Element from 'element-ui'
      import 'element-ui/lib/theme-chalk/index.css'
      import VueECharts from 'vue-echarts' //注册图表
      
      import './../.vuepress/public/css/index.css'
      
      export default ({
        Vue, // VuePress 正在使用的 Vue 构造函数
        options, // 附加到根实例的一些选项
        router, // 当前应用的路由实例
        siteData // 站点元数据
      }) => {
        // ...做一些其他的应用级别的优化
        Vue.use(VueHighlightJS)
        Vue.use(Element)
        Vue.component('chart', VueECharts)
      }
    

3. Некоторые приложения на Markdown

  • Расширение уценки

  • Назовите колесо, написанное другими:Уууу, эта лошадь plus.com/package/v ue…

  •     <highlight-code slot="codeText" lang="vue">
          <template>
            <div class="demo-button">
              <div>
                <dt-button>默认按钮</dt-button>
                <dt-button type="primary">主要按钮</dt-button>
                <dt-button type="success">成功按钮</dt-button>
                <dt-button type="info">信息按钮</dt-button>
                <dt-button type="warning">警告按钮</dt-button>
                <dt-button type="danger">危险按钮</dt-button>
              </div>
          </template>
        </highlight-code>
    
  • Использование Vue ----- Вставить стиль кнопки в Markdown

  • Сначала напишите компонент кнопки.\vuepress\docs\.vuepress\components\src\button.vue

  •   <template>
        <button
          class="dt-button"
          @click="handleClick"
          :disabled="disabled"
          :autofocus="autofocus"
          :type="nativeType"
          :class="[
            size ? 'dt-button--' + size : '',
            type ? 'dt-button--' + type : '',
            {
              'is-disabled': disabled,
              'is-round': round,
              'is-plain': plain
            }
          ]">
          <i :class="icon" v-if="icon"></i>
          <span v-if="$slots.default"><slot></slot></span>
        </button>
      </template>
      
      <script>
      export default {
        name: 'DtButton',
      
        props: {
          size: String,
          type: {
            type: String,
            default: 'default'
          },
          nativeType: {
            type: String,
            default: 'button'
          },
          disabled: Boolean,
          round: Boolean,
          plain: Boolean,
          autofocus: Boolean,
          icon: {
            type: String,
            default: ''
          }
        },
        methods: {
          handleClick (event) {
            this.$emit('click', event)
          }
        },
        mounted () {
          this.$emit('click', event)
        }
      }
      </script>
    
  • Стиль CSS, в .\vuepress\docs\.vuepress\public\css\button.css, пожалуйста, обратитесь к методу написания.

  • Сводка в .\study\vuepress\docs\.vuepress\public\css\index.css

  •   @import './iconfont.css';
      @import './icon.css';
      
      @import './card.css';
      @import './button.css'; //按钮组件
      @import './checkbox.css';
      
    
  • Кнопка вызова в папке .\vuepress\docs\.vuepress\components\test\test1.vue

  •   <template>
        <div class="demo-button">
          <div>
            <dt-button>默认按钮</dt-button>
            <dt-button type="primary">主要按钮</dt-button>
            <dt-button type="success">成功按钮</dt-button>
            <dt-button type="info">信息按钮</dt-button>
            <dt-button type="warning">警告按钮</dt-button>
            <dt-button type="danger">危险按钮</dt-button>
          </div>
        </div>
      </template>
      
      <script>
      import DtButton from '../src/button'
      export default {
        name: 'buttonWrap',
        components: {
          DtButton
        }
      }
      </script>
      
      <style lang="less" scoped>
      .demo-button{
        width: 100%;
        text-align: center;
        div {
          margin: 10px 0;
        }
      }
      </style>
      
    
  • Vuepress автоматически зарегистрирует компонент в соответствии с путем, мы можем вызывать компонент, если сопоставляем путь к файлу.

  • в .\vuepress\docs\baseComponents\base\test1.md

  •   测试案例1
      ---
      <Common-Democode title="基本用法" description="基本按钮用法">
        <test-test1></test-test1>
        <highlight-code slot="codeText" lang="vue">
          <template>
            <div class="demo-button">
              <div>
                <dt-button>默认按钮</dt-button>
                <dt-button type="primary">主要按钮</dt-button>
                <dt-button type="success">成功按钮</dt-button>
                <dt-button type="info">信息按钮</dt-button>
                <dt-button type="warning">警告按钮</dt-button>
                <dt-button type="danger">危险按钮</dt-button>
              </div>
            </div>
          </template>
        </highlight-code>
      </Common-Democode>
      
      | Tables        | Are           | Cool  |
      | ------------- |:-------------:| -----:|
      | col 3 is      | right-aligned | $1600 |
      | col 2 is      | centered      |   $12 |
      | zebra stripes | are neat      |    $1 |
    
  • Эффект отображения показан на рисунке:

4. Развернуть на github

  • GitHub создает новый репозиторий

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db7004c553c64500b16b21f329b8380f~tplv-k3u1fbpfcp-zoom-1.image)  


**
  • Имя репозитория должно совпадать со значением базового атрибута в config.js.

  • изменить базу

  • Если наш блог развернут как .github.io (то есть репозиторий с тем же именем, что и его собственное имя пользователя в github), github автоматически развернет его как GitPages.

  • Если мы хотим выполнить развертывание в других репозиториях github или gitee, мы должны указать базу, а имя атрибута базы должно совпадать с именем репозитория, иначе на главной странице блога возникнет проблема 404.

  • Как показано на рисунке, мой репозиторий на github называется vuePressDos, поэтому база должна быть настроена как:

  • Найдите docs/.vuepress/config.js, настройте базу

  •   module.exports = {
        title: '郑泽敏个人文档', // 设置网站标题
        // title: '文档',
        base: '/vuePressDos/',
        description: '音乐博客', //描述
        dest: './dist',   // 设置输出目录
        port: 2333, //端口
         .......
      }
    
  • После завершения настройки хранилище также создано.Теперь мы запускаем: npm run docs:build to package, вырезаем файлы в файле dist в корневую директорию, удаляем пустую папку dist и проталкиваем корневую директорию на github. Каталог github выглядит следующим образом:

  • Откройте настройки, прокрутите вниз, найдите GitHub Pages (обычно это статический веб-сайт), см. зеленую страницу. Ваш сайт опубликован по URL-адресу, он прошел успешно, щелкните ссылку, чтобы просмотреть нашу документацию.

  • PS: Это связано с тем, что упакованный дистрибутив используется в качестве основной ветки, и появится ссылка.Обязательно выберите ветку github, соответствующую упакованному файлу.

5. Развертывание на облачном сервере Alibaba

  • base

    Тип: строка Значение по умолчанию: /Базовый путь сайта развертывания, если вы хотите, чтобы ваш сайт был развернут на подпути, Вам нужно будет настроить его. Как и страницы Github, если вы хотите развернуть свой веб-сайт наfoo.GitHub.IO/человек/Затем база должна быть установлена ​​​​на «/bar/», и ее значение всегда должно начинаться с косой черты и заканчиваться косой чертой. base будет автоматически вставляться в качестве префикса ко всем ссылкам на другие параметры, начинающиеся с / , поэтому вам нужно указать его только один раз.

  • Эта конфигурация является самой базовой конфигурацией маршрутизации. Vuepress, как и другие проекты Vue, представляет собой одностраничное приложение. Настроив его, можно решить проблему базовой маршрутизации. Проблема у меня в том, как настроить этот маршрут на nginx.

  • Конфигурация на nginx

  • Внутри vuepressdocs\.vuepress\config.jsУстановите базовую конфигурацию на «/» (очень важно)

  • Ставим упакованные файлы vuepress на nginx

    server { listen 8088; server_name localhost;

    location / {
    	root   html;   // 即build后放在服务器的路径)
    	index  index.html index.htm;
    	try_files $uri $uri/ /index.html;
    
    }
    
     # 静态资源目录,即vue打包后的dist里的静态资源
    root  /usr/local/nginx/html;
    index  index.html index.htm;
    

    }

PS: начало все еще не понимают конфигурацию, затемbase: '/vuePressDos/', деплоим на nginx не устанавливая базу в "/", и смотрим в консоли браузераUncaught SyntaxError: Unexpected token &lt;сообщить об ошибке

6. Ветка Github для хранения исходного кода

  • Вышеупомянутый подход заключается в том, чтобы поместить упакованные файлы в основную ветку на github, Что, если мы хотим разместить на ней исходный код?

  • В это время мы можем разветвить расходы.

  • Мастер кладет файлы из запакованного дистрибутива

  • DEV филиал хранит наш исходный код

  • Создать ветку на гитхабе

7. Меры предосторожности

  • Если он переходит на 404, проверьте его

  • Базовая конфигурация совпадает с именем репозитория проекта github?

  • Облако Gitee Сайт сайта Адрес Код Страницы Сервисы строчные, базовая часть всех в config.jsнижний регистрРешим проблему vuepress jump 404

  • Возможные ошибки:

исходный адрес

Наггетс.Талант/пост/685457…

Ссылаться на

официальный сайт vuePress

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

Ямы, с которыми столкнулись при развертывании VuePress GitHub и Gitee

Как развернуть блог, созданный с помощью vuepress, на Github Pages

Создайте элементный документ с помощью VuePress

1 час, чтобы получить vuepress для быстрого создания документа/блога vue + бесплатное предварительное развертывание

Vuepress генерирует статические файлы и развертывает их на обратном прокси-сервере nginx.

[Многословно] Пошаговая сборка и оптимизация VuePress(Смотреть видео)