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

внешний интерфейс GitHub Vue.js Markdown VuePress
VuePress быстро ступает на яму

В последнее время появился очень популярный проект с открытым исходным кодом — VuePress, разработанный You Xiaoyou.VuePress позволяет очень удобно писать код Vue в документах Markdown, а VuePress выполняет некоторую оптимизацию скомпилированных HTML-файлов для поисковых систем. Кроме того, VuePress сделал несколько расширений для файлов Markdown, чтобы сделать его более мощным.Эта статья будет посвящена созданию статического блога на Github.

Добавьте VuePress в свой проект

Первый шаг — установить VuePress для вашего проекта, если в коде вашего проекта его нет.package.jsonфайл, пожалуйста, выполнитеnpm init.

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

// 在项目根目录下新加 docs 文件夹
mkdir docs

// 新建一个 Markdown 文件
echo "# Hello VuePress!" > docs/README.md

Второй шагpackage.jsonДобавьте в него эти скрипты и запустите.

// package.json
"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
}

// 本地运行文档
npm run docs:dev

// 编译打包生产静态 HTML 文件
npm run docs:build

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

---
// 该语法表示使用当前页面标题自动生成侧边栏
sidebar: auto
---

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

Через файл конфигурации VuePress мы можем использовать некоторые пользовательские функции, такие как добавление боковых панелей, добавление панелей навигации и т. д. первый вdocsСоздайте новый в каталоге.vuepressкаталог и создайте новый в каталогеconfig.js.

  1. VuePress упаковывает файлы по умолчанию в.vuepress/distВ каталоге мы можем пройтиdestСвойства изменяют выходной каталог файла, например, вывод файла в корневой каталог проекта.distпапка.
  2. установивrepoсвойство, VuePress добавит ссылку на репозиторий Github на панели навигации.
  3. В VuePress, установивtitleсвойство для установки заголовка сайта, он будет использоваться в качестве префикса для всех заголовков страниц, а в теме по умолчанию он будет применен к панели навигации.
  4. При использовании VuePress для написания блога и публикации его на страницах Github мы можем столкнуться с проблемой, показанной на рисунке ниже: страница уже существует, но стили и js не загружаются успешно. Мы можем настроитьbaseсвойства для решения этой проблемы,baseЗначение свойства по умолчанию равно/. Если вы собираетесь развернуть свой код наtaoxusheng.github.io/mt-blog/, Такbaseсвойство должно быть установлено в/mt-blog/.Примечание. Значение базового свойства всегда начинается с / и заканчивается на / . 
// dcos/.vuepress/config.js
module.exports = {
  title: 'my-blog',  // 设置网站标题
  dest: './dist'，   // 设置输出目录
  base: '/mt-blog/'，// 设置站点根路径
  repo: 
 'https://github.com/TaoXuSheng/mt-blog' // 添加 github 链接
}

Панель навигации и боковая панель

В VuePress, если вы хотите добавить панель навигации на свой веб-сайт, вы можете установитьthemeConfig.navчтобы добавить навигационные ссылки, установивthemeConfig.sidebarсвойство, чтобы добавить боковую панель. Если ваша навигация представляет собой раскрывающийся список, вы можете сделать это с помощьюitemsсвойства для установки.

// dcos/.vuepress/config.js
module.exports = {
  themeConfig: {
    // 添加导航栏
    nav: [
      { text: 'vue', link: '/' },
      { text: 'css', link: '/blog/' },
      { text: 'js', link: '/zhihu/' },
      {
        text: 'github',
        // 这里是下拉列表展现形式。
        items: [
          { text: 'focus-outside', link: 'https://github.com/TaoXuSheng/focus-outside' },
          { text: 'stylus-converter', link: 'https://github.com/TaoXuSheng/stylus-converter' },
        ]
      }
    ],
    // 为以下路由添加侧边栏
    sidebar: ['/', '/git', '/vue']
  }
}

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

docs
 ├── README.md
 ├── vue
 │    ├─ README.md
 │    ├─ one.md
 │    └─ two.md
 └── css
      ├─ README.md
      ├─ three.md
      └─ four.md

Для боковой панели многоуровневого каталога нам нужно использовать описание объекта, следующее / git / представляет в каталоге git, по умолчанию указывает на файл /Git/readme.md.

// dcos/.vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: {
      '/vue/': [
        'one',
        'two'
      ],
      '/css/': [
        'three',
        'four'
      ]
    }
  }
}

В зарегистрированных компонентах VuePress

Пишем код Vue в VuePress, а мы обычно пишемотдельный файлТочно так же иногда нам может понадобиться использовать библиотеку компонентов пользовательского интерфейса Vue. НапримерElement,MintПодождите, обычно, когда мы используем эти библиотеки компонентов пользовательского интерфейса в наших проектах, мы регистрируем их единообразно в файлах main.js или botostrap.js. К счастью, эта функция также поддерживается в VuePress, мы можем создать.vuepress/enhanceApp.jsфайл для выполнения некоторой конфигурации на уровне приложения, этот файл exprot default — это функция ловушки, в которой вы можете выполнять некоторые специальные действия, такие как добавление ловушек глобальной маршрутизации, регистрация внешних библиотек компонентов.

// .vuepress/enhanceApp.js
// 全局注册 Element 组件库
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default ({
  Vue,
  options,
  router
}) => {
  Vue.use(Element)
}

В нормальном развитии Vue, иногда нам может потребоваться сделать некоторые пользовательские компоненты, в VuePess мы можем.vuepress/componentsЗапишите наши пользовательские компоненты в каталог, VuePress просматривает все компоненты в каталоге во время компиляции.*.vueфайлов и видеть их зарегистрированными как глобальные компоненты.

// 注册一个自定义组件
// docs/.vuepress/components/hello.vue
<template>
  <div class="cpt-hello">Hello VuePress Demo</div>
</template>

Таким образом, нам не нужно регистрировать эти компоненты при написании кода Vue в файлах Markdown, и мы можем использовать их непосредственно в Markdown.

// docs/.vuepress/vue/README.md
<template>
  <div class="test-demo">
    {{ msg }}
    <my-hello></my-hello>
    <el-button>button</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello VuePress!'
    }
  }
}
</script>

Посмотреть онлайн-примеры

Развернуть на страницах Github

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

// 1.下载 gh-pages 包
npm install -D gh-pages

// 2. 在 package.json 文件上添加脚本命令
"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs",
  // 上面我修改了 VuePress 的输出目录，所以您如果没有修改 .vuepress/config.js
  // 的 dest 属性，应该将这里的 dist 改为 .vuepress/dist
  "deploy": "gh-pages -d dist",
  "deploy:build": "npm run docs:build && gh-pages -d dist"
}

// 3. 打包并推送到 gh-pages 分支
npm run deploy:build

// 4.打开你的 Github pages, 地址是 https://<yourname>/github.io/<repo>

Посмотреть онлайн-примеры

Суммировать

По сравнению с Hexo, VuePress легче начать и имеет более мощные функции.Например, вы можете регистрировать пользовательские компоненты в VuePress, а писать Vue во VuePress так же, как обычно.Затраты на обучение практически нулевые. Поэтому, если вы открываете библиотеку, связанную с Vue, или другой проект, вы можете использовать VuePress в качестве инструмента для редактирования документов. Хотя содержание VuePress раскрыто не полностью, после прочтения этой статьи я думаю, что вы сможете получить общее представление о VuePress и, по крайней мере, быстро создать блог.Если вы хотите узнать больше о VuePress, обратитесь кКитайский API Vuepress. Последняя волна проектов Amway с открытым исходным кодом, над которыми я работаюstylus-converter, Заинтересованные студенты могут участвовать вместе Желаю вам счастливой жизни и счастливых первомайских праздников.

Категории