Адрес блога автора:Несмотря на редкий блог Борхерса...Добро пожаловать в гости, есть разница между мобильным терминалом и ПК-терминалом~

Несколько дней назад я увидел, как кто-то использует Vuepress для создания блога на Nuggets.Я знаю Vuepress, но сам никогда им не пользовался, поэтому подумал об этом. Резюме: vuepress по-прежнему очень силен, прост в эксплуатации, не так сложен, если вы внимательно прочитаете статью, вы можете стать отцом vuepress. Эта статья проста для понимания. От начала до конца она будет объяснена по порядку. После внимательного прочтения вы станете самым красивым мальчиком~

Об авторском блоге

Этот блог создан на основе vuepress, что такое vuepress? => vuepress — это генератор статических веб-сайтов на основе Vue. VuePress состоит из двух частей: первая часть представляет собой минимальный генератор статического веб-сайта, который включает в себя систему тем и плагин API на основе Vue, а другая часть представляет собой тему по умолчанию, оптимизированную для написания технической документации, которая была создана для поддержки требований к документации для Vue и его подпроекты.

Советы (Ты самый красивый мальчик после внимательного просмотра~)

Вам может понадобиться 30-50 минут, чтобы прочитать его, чтобы быть компетентным в vuepress.

Три основные особенности Vuepress:

• Краткость на первом месте:Структура проекта, ориентированная на уценку, поможет вам сосредоточиться на написании с минимальной конфигурацией.

• ВУЭ драйвер:Наслаждайтесь опытом разработки Vue + webpack, вы можете использовать компоненты Vue в Markdown и использовать Vue для разработки пользовательских тем.

• высокая производительность:VuePress будет предварительно отображать статический HTML для каждой страницы, и когда каждая страница загружается, она будет работать как SPA.

представлять

Начать работу с vuepress стоит так же просто, как 1,2,3.

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

Уведомление: Пожалуйста, убедитесь, что ваш Node.js версия> = 8,6.

Как это работает?

По сути, веб-сайт VuePress — этоVue,Vue Routerа такжеwebpackуправляемое одностраничное приложение. Если вы использовали Vue раньше, вы почувствуете очень знакомый опыт разработки при разработке пользовательской темы, и вы даже можете использовать Vue DevTools для отладки своей пользовательской темы.

Во время сборки мы создаем версию приложения, визуализируемую на стороне сервера (SSR), а затем визуализируем соответствующий HTML, виртуально обращаясь к каждому пути. Этот подход был вдохновленNuxtизnuxt generateкоманды и другие элементы, такие какGatsby

Официальные термины обсуждаться не будут.официальный

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

Убедитесь, что ваша версия Node.js >= 8.

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

Если вы просто хотите попробовать VuePress, вы можете установить его глобально:

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

Существующий проект

Если вы хотите использовать VuePress в существующем проекте, а также хотите управлять документацией в этом проекте, вам следует установить VuePress как локальную зависимость. Установка в качестве локальной зависимости позволяет вам использовать инструменты непрерывной интеграции или какой-либо другой сервис (например, Netlify), которые помогут вам автоматически развертывать каждый раз, когда вы делаете коммит.

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

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

# 开始写作
npx vuepress dev docs

УведомлениеЕсли ваш существующий проект зависит от webpack 3.x, рекомендуется использовать Yarn вместо npm для установки VuePress. Потому что в этом случае npm сгенерирует неправильное дерево зависимостей.

Далее, вpackage.jsonДобавьте несколько скриптов:

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

Затем вы можете начать писать:

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

Чтобы сгенерировать статический HTML-файл, запустите:

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

По умолчанию файл будет создан в.vuepress/dist, конечно, вы также можете пройти.vuepress/config.jsсерединаdestполе для изменения, сгенерированные файлы можно развернуть на любой статический файловый сервер, см.развертыватьУзнать больше.

Структура каталогов

VuePress следует принципу «соглашение важнее конфигурации», и рекомендуемая структура каталогов выглядит следующим образом:

УведомлениеVuepress предусматривает, что каталог входа должен быть docs , а корневой каталог должен быть docs

.
├── docs
│   ├── .vuepress (可选的)  →  官方标注可选,不过一般都会用这个文件夹,核心文件夹
│   │   ├── components (可选的)  →  这个文件夹一些以.vue结尾的vue组件,可以在markdown文件里使用
│   │   ├── theme (可选的)   →  可以配置自己的博客
│   │   │   └── Layout.vue
│   │   ├── public (可选的)   →   放一些公共静态资源 使用方式 /xxx, 请必须以 `/` 开始表示根
│   │   ├── styles (可选的)  →  样式
│   │   │   ├── index.styl   →  自定义样式
│   │   │   └── palette.styl   →  用于重写默认颜色常量，或者设置新的 stylus 颜色常量
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html  →  用于开发环境的 HTML 模板文件
│   │   │   └── ssr.html  →  构建时基于 Vue SSR 的 HTML 模板文件
│   │   ├── config.js (可选的)   →   配置文件的入口文件，也可以是 YML 或 toml
│   │   └── enhanceApp.js (可选的)   →  客户端应用的增强
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

УведомлениеЕсли вы хотите настроить templates/ssr.html или templates/dev.html, лучше всего изменить его на основе файла шаблона по умолчанию, иначе это может привести к ошибкам сборки.

Маршрутизация страницы по умолчанию

Кроме того, для приведенной выше структуры каталогов адреса маршрутизации страниц по умолчанию следующие:

|относительный путь к файлу|адрес маршрутизации страницы| | ------------- |:--------------:| -----:| |/README.md|/| |/guide/README.md|/guide/| |/config.md|/config.html|

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

// dcos/.vuepress/config.js
module.exports = {
    title:"取舍",   // HTML的title
    description:"管鲍切思世所稀博客",   // 描述
    keywords:"管鲍切思世所稀博客",  // 关键字
    head:[   // 配置头部
        [
            ['link', {rel:'icon', href:"/icon.png"}],
            ['meta', {'name':'viewport', content:"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"}]
        ]
    ],
    markdown: {
        lineNumbers: true,  // 代码显示行号
    }, 
    dest:"./outer",    // 设置打包路径
    lastUpdated: 'Last Updated',    // 显示更新时间
    themeConfig:{
        logo:"/icon.png",   // 导航栏左边logo,不写就不显示
        sidebarDepth: 2, // 侧边栏显示2级
        nav:[   // 导航栏配置
            { text: 'vue', link: '/' },
            { text: 'css', link: '/blog/' },
            { 
                text: 'js',  // 这里是下拉列表展现形式。 items可以一直嵌套下去
                items:[
                    text:"ES5", link:"/js/es5/",
                    text:"ES6", link:"/js/es6/",
                ]
            },
            {text: 'github', link:"https://github.com/1046224544"}
        ],
        // 为以下路由添加侧边栏
        sidebar: ['/', '/git', '/vue']
        // 嵌套侧边栏  以对象的方式嵌套下去
        // sidebar: {
        //     '/2019/': [
        //         ['','前言(2019)'],
        //         {
        //             title:"10月份",
        //             collapsable:false,
        //             sidebarDepth:2,
        //             children:[
        //                 ["Nginx部署Vue项目", "Nginx部署Vue项目"],
        //                 ["NVM自由切换Node版本", "NVM自由切换Node版本小笔记"],
        //                 ["KTV点歌系统", "KTV点歌系统"],
        //             ]
        //         },
        //         {
        //             title:"9月份",
        //             collapsable:false,
        //             sidebarDepth:2,
        //             children:[
        //                 ["综合性博客网站", "综合性博客网站"]
        //             ]
        //         }
        //     ],
        //     ...
        // }
    },
    plugins:[
        // 'axios'  // 配置插件
    ]
  }
}

УведомлениеВышеизложенное является полным базовымconfig.jsКонфигурационный файл, студенты с обсессивно-компульсивным расстройством обязательно почувствуют, что файл слишком большой и сложный в обслуживании. Действительно, когда на нашем пути больше файлов, файлы могут стать очень длинными. Здесь автор рекомендует导航栏а также侧边栏Разделите два файла по отдельности и импортируйте их, загрузив файл, чтобы маршрутизация导航栏а также侧边栏Он может быть бесконечно вложенным, и вы также можете бесконечно выравнивать, создавать папки и т. Д., Чтобы добиться эффекта классификации.

следующим образом:

// docs/.vuepress/config.js
module.exports = {
    ...部分(同上)
    themeConfig:{
        nav: require('./nav'),   // 引入导航栏
        sidebar:require('./sidebar'),  // 引入侧边栏
    },
    ...
}


//  docs/.vuepress/sidebar.js
module.exports = {
    "/api/front/2019/": require('../.vuepress/frontbar/2019'),  // 继续分类
    "/api/front/2020/": require('../.vuepress/frontbar/2020'),
    "/api/end/2019/": require('../.vuepress/endbar/2019'),
    "/api/learn/koa/": require('../.vuepress/learnbar/koabar'),
    "/api/learn/express/": require('../.vuepress/learnbar/expressbar'),
    "/api/learn/java/": require('../.vuepress/learnbar/javabar'),
    "/api/learn/es6/": require('../.vuepress/learnbar/es6bar'),
    "/api/learn/vue/": require('../.vuepress/learnbar/vuebar'),
}


//   docs/.vuepress/nav.js
module.exports = [
    {text:"首页", link:"/"},
    {
        text:"技术API",
        ariLabel:"技术API",
        items:[
            {text:"koa", link:"/api/learn/koa/"},
            {text:"vue", link:"/api/learn/vue/"},
            {text:"es6", link:"/api/learn/es6/"},
            {text:"java", link:"/api/learn/java/"},
            {text:"express", link:"/api/learn/express/"},
        ]
    },
    {
        text:"日常博客",
        ariLabel:"日常博客",
        items:[
            {text:"前端",link:"/api/front/"},
            {text:"后端",link:"/api/end/"},
            {text:"其他",link:"/api/orther/1.md"},
        ]
    },
    {text:"关于博客", link:"/api/builog/"},
    {text:"关于作者", link:"/api/author/"},
    {
        text:"其他小站",
        ariLabel:"其他小站", 
        items:[
            {text:"掘金", link:'https://juejin.im/user/2999123453679656'},
            {text:"SegmentFault", link:'https://segmentfault.com/u/98kk'},
            {text:"CSDN", link:'https://blog.csdn.net/weixin_43374176'},
        ]
    },
    {
        text:"联系",
        ariLabel:"联系",
        items:[
            {text:"邮箱", link:"mailto:wsm_1105@163.com", target:"_blank"},
            {text:"其他", link:"/api/contact/"}
        ]
    },
    {text:"GitHub", link:"http://github.com/1046224544"}
]

Скрин каталога автора:

УведомлениеПока это каталог, настроенный вами, в каталоге docs должна быть соответствующая структура каталогов./api/aboutme/, то файловая директория объекта/docs/api/aboutme/readme.md, корневой путь по умолчаниюreadme.mdдокумент.如果你的路径是/api/aboutme/ktv点歌系统, то файловая директория объекта/docs/api/aboutme/ktv点歌系统.md

Использование сторонних библиотек в файлах Vue (два шага)

1. Пишем код Vue в VuePress, а мы обычно пишем单文件Точно так же иногда нам может понадобиться использовать библиотеку компонентов пользовательского интерфейса Vue. НапримерElement,Mintи т. д. Обычно, когда мы используем эти библиотеки компонентов пользовательского интерфейса в наших проектах, мыmain.jsилиbotostrap.jsЕдиная регистрация в файле. К счастью, эта функция также поддерживается в VuePress, мы можем создать.vuepress/enhanceApp.jsфайл для настройки на уровне приложения, этот файлexprot default 一个钩子函数, в этом хуке вы можете выполнять некоторые специальные действия, такие как добавление хуков глобальной маршрутизации, регистрация внешних библиотек компонентов.
2. В файле vue вызовите его как обычно

// .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中使用第三方库
// 定义一个vue组件   /docs/.vuepress/componets/demo.vue
<template>
  <div class="demo">
    {{ msg }}
    <my-hello></my-hello>
    <el-button>button</el-button>   // 使用了el-button
  </div>
</template>

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

Использование компонентов vue в файлах уценки

Удостоверьтесь, что доступ к браузеру/DOM API осуществляется только до монтирования или монтирования. Если вы используете или вам нужно отобразить компонент, который не очень дружелюбен к SSR (например, включает пользовательские директивы), вы можете обернуть их во встроенный<ClientOnly>В компоненте:

<ClientOnly>
    <demo />
</ClientOnly>

Обратите внимание, что это не относится к некоторым компонентам или библиотекам в导入проблемы при попытке доступа к API браузера — если вам нужно использовать такой компонент или библиотеку, вам нужно подключить его в соответствующем жизненном цикле动态导入Oни:

<script>
export default {
  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      // use code
    })
  }
}
</script>

Если ваш модуль экспортирует компонент Vue через экспорт по умолчанию, вы можете зарегистрировать его динамически:

<template>
  <component v-if="dynamicComponent" :is="dynamicComponent"></component>
</template>
<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      this.dynamicComponent = module.default
    })
  }
}
</script>

Ссылаться на:

• Vue.js > Динамические компоненты

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

Связь

Внутренняя ссылка

Ссылки внутри сайта будут преобразованы в<router-link>Для СПА-навигации. При этом под каждой папкой на станцииREADME.mdилиindex.mdфайлы автоматически компилируются какindex.html, соответствующая ссылка будет рассматриваться как/. 以如下的文件结构为例：

.
├─ README.md
├─ foo
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ README.md
   ├─ three.md
   └─ four.md

Предположим, выfoo/one.mdсередина:

[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾（推荐） -->
[bar - four](../bar/four.html) <!-- 也可以用 .html -->

перенаправление ссылок

VuePress поддерживает перенаправление на чистые ссылки. если ссылка/foo Если он не найден, VuePress сам найдет доступный./foo/или/foo.html. И наоборот, когда/foo/или/foo.htmlЕсли один не найден, VuePress также попытается найти другой. С этой функцией мы можем использовать официальный плагинvuepress-plugin-clean-urlsНастройте путь к вашему веб-сайту.

УведомлениеС плагинами permalink и clean-urls или без них ваши относительные пути должны определяться в зависимости от текущей файловой структуры. В приведенном выше примере, даже если вы поместите/foo/one.mdПуть установлен на/foo/one/, вы все равно должны пройти./two.mdпосетить/foo/two.md.

внешняя ссылка

Внешние ссылки будут автоматически настроены наtarget="_blank" rel="noopener noreferrer":

• Github
• SegmentFault
• Наггетс
• блог

Вы можете настроить его, настроивconfig.markdown.externalLinksЧтобы настроить свойства внешних ссылок

Front Matter

VuePress предоставляетYAML front matterПоддержка из коробки:

---
title: Blogging Like a Hacker
lang: en-US
---

Эти данные можно использовать в теле текущей уценки или в любых пользовательских или тематических компонентах.

Чтобы узнать больше, переместитеFront Matter

Таблицы в стиле GitHub

войти

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

выход

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Emoji

войти

:tada: :100:

выход

• Самородки здесь уценки здесь не поддерживаются, вы можете прочитать исходный текст моего блога:Оригинальное чтение блога

ты сможешьэтот списокНайти все доступные emoji.

содержание

войти

[[toc]]

выход

• Самородки здесь уценки здесь не поддерживаются, вы можете прочитать исходный текст моего блога:Оригинальное чтение блога

Визуализация оглавления может быть выполнена с помощьюmarkdown.tocопции для настройки.

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

войти

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

выход ::: tip This is a tip :::

::: warning This is a warning :::

::: danger This is a dangerous warning :::

• Самородки здесь уценки здесь не поддерживаются, вы можете прочитать исходный текст моего блога:Оригинальное чтение блога

Вы также можете настроить заголовок в блоке:

::: danger STOP
Danger zone, do not proceed
:::

::: danger STOP Danger zone, do not proceed :::

• Самородки здесь уценки здесь не поддерживаются, вы можете прочитать исходный текст моего блога:Оригинальное чтение блога

Ссылаться на:

• vuepress-plugin-container

Подсветка синтаксиса в блоках кода

VuePress используетPrismреализовать подсветку синтаксиса для блоков кода в уценке. Prism поддерживает большое количество языков программирования, все, что вам нужно сделать, это добавить действительный псевдоним языка в начало блока кода:войти

    ``` js
    export default {
    name: 'MyComponent',
    // ...
    }
    ```

выход

export default {
  name: 'MyComponent',
  // ...
}

войти

    ``` html
    <ul>
    <li
        v-for="todo in todos"
        :key="todo.id"
    >
        {{ todo.text }}
    </li>
    </ul>
    ```

выход

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

Подсветка строк в блоках кода

войти

    ``` js {4}
    export default {
    data () {
        return {
        msg: 'Highlighted!'
        }
    }
    }
    ```

выход

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

номер строки

Вы можете отображать номера строк для каждого блока кода, настроив:

module.exports = {
  markdown: {
    lineNumbers: true
  }
}

Импорт сегмента кода

Вы можете импортировать фрагменты кода из существующих файлов со следующим синтаксисом:

<<< @/filepath

Он также поддерживает подсветку строк:

<<< @/filepath{highlightLines}

УведомлениеПоскольку импорт фрагмента будет выполнен до компиляции веб-пакета, вы не можете использовать псевдонимы путей в веб-пакете, здесь@Значение по умолчаниюprocess.cwd().

Расширенная конфигурация

Vuepress используетmarkdown-itДля рендеринга Markdown большинство вышеперечисленных расширений также реализуются через пользовательские плагины. Если вы хотите пойти дальше, вы можете пройти.vuepress/config.jsиз markdownОпции к текущемуmarkdown-itПример выполнения некоторой пользовательской конфигурации:

module.exports = {
  markdown: {
    // markdown-it-anchor 的选项
    anchor: { permalink: false },
    // markdown-it-toc 的选项
    toc: { includeLevel: [1, 2] },
    extendMarkdown: md => {
      // 使用更多的 markdown-it 插件!
      md.use(require('markdown-it-xxx'))
    }
  }
}

Система комментариев Валин

Прочитав содержание этого раздела, вы можете быть компетентны в отношении Валина. Отныне сайт больше не молчит. Эта система комментариев проста для понимания и может полностью решить последствия, оставленные другими авторами, объясняющими эту часть. Спешите и собирать его!

• Необходимо установить LeanCloud-Storage и Valine
• официальный сайт валина
• Для приобретения appid и appkey требуется регистрацияleancloud, затем вы можете создать новое приложение и设置>应用 keyможет просматривать

Установить

# Install leancloud's js-sdk
npm install leancloud-storage --save
# Install valine
npm install valine --save

настроить

Компоненты Components.vue

// 新建Components.vue组件
<template>
    <div class="vcomment" v-if="data.comments === true">
      <div id="vcomments"></div>
    </div>
</template>

<script>
import { isActive, hashRE, groupHeaders } from '../util'
export default {
  computed: {
    data () {
      return this.$page.frontmatter
    },
  },
  mounted: function(){
    this.createValine()
  },
  
  methods: {
    createValine() {
      const Valine = require('valine');
      window.AV = require('leancloud-storage');
      const valine =  new Valine({
        el: '#vcomments',
        appId: 'your ID',
        appKey: 'your Key',
        notify: false,
        verify: false,
        avatar: 'monsterid',
        path: window.location.pathname,
        placeholder: '同道中人,文明留言...',
      });
      this.valineRefresh = false
    }
  },
  watch: {
    '$route' (to, from) {
      if(to.path !==  from.path){
        setTimeout(() => {
          //重新刷新valine
          this.createValine()
        }, 180)
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
#vcomments {
  max-width 740px
  padding 10px
  display block;
  margin-left auto;
  margin-right auto;
}
</style>

Page.vue

// Page.vue
<template>
  <main class="page">
    <slot name="top" />

    <Content class="theme-default-content" />
    <PageEdit />

    <PageNav v-bind="{ sidebarItems }" />

    <slot name="bottom" />
    <Comments v-bind:is="viewComments"></Comments>
  </main>
</template>

<script>
import PageEdit from '@theme/components/PageEdit.vue'
import PageNav from '@theme/components/PageNav.vue'
import { resolvePage, normalize, outboundRE, endingSlashRE } from '../util'
import Comments from './Comments.vue'

export default {
  components: { PageEdit, PageNav , Comments},
  props: ['sidebarItems'],
  data(){
    return{
      viewComments: 'Comments',
    }
  }
}
</script>

<style lang="stylus">
@require '../styles/wrapper.styl'

.page
  padding-bottom 2rem
  display block

</style>

использовать (по мере необходимости)

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

// China.md
---
coments: true
---

снимок экрана

Экземпляры Valine и Leancloud-storage будут инициировать запрос к серверу с текущим параметром URL-адреса для получения данных комментария каждый раз при загрузке страницы, и этот параметр URL-адреса каждый раз будет одним и тем же. Во-первых, и экземпляр Valine, и экземпляр Leancloud-Storage инициализируются в смонтированном хуке или подключаются к объекту окна. При изменении URL-адреса страницы сам Page.vue не меняется, но монтирование запускается повторно.

О других плагинах

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

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

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

Создайте файл deploy.sh

touch 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 -

установить package.json

{
    "scripts": {
        "deploy": "bash deploy.sh"
      },
}

выпускать

npm run deploy   // 即可自动构建部署到github上。

За подробностями переходите на официальный сайт

• vuepress.vuejs.org

Суммировать

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

Посмотреть онлайн

Несмотря на редкий блог Борхерса...

Разница между мобильным телефоном и ПК

Скриншот раздела блога

разное

• Полный всеобъемлющий веб-сайт
• Система запросов песен KTV
• Nginx развертывает проекты Vue
• Советы по использованию NVM

соединять

Если вы заинтересованы, пожалуйста, обратите внимание на публичный номер: _facebook (передовые веб-технологии), проверьте больше качественных статей, приглашаю всех присоединиться к моей группе обмена интерфейсом:866068198, чтобы обмениваться и изучать передовые технологии вместе. Блогер изучает Node самостоятельно, и его технологии ограничены, поэтому, если это возможно, он постарается предоставить вам некоторую помощь или некоторые методы обучения.

• Нет публики