VuePressであなたのブログを片付けます(一)

前言

先端エンジニアになりたい高齢の熊の子供として、独学で先端を学ぶ日はもう長い.
そして独学で自分のサイトやブログを持ちたいと思っています.ある日、私はvue+elementUI+koa 2+mongodyで楽しみにしていた個人ブログを作ったとき.突然私は一つのことを考えて、私はいったいどうしてブログを書くためにこんなに多くの技術スタックを使うのですか?
そこで怠け者の癌が発作して、そこで私はこれを見つけて、VuePressです.

1. VuePress

VuePressは極めてシンプルな静的Webサイトジェネレータであり、Vueによって駆動されるテーマシステムとプラグインAPIを含み、Vueチームがドキュメントを書くときにより快適になることを目的として誕生した.♂悦(笑).デフォルトのトピックはVueのドキュメントのスタイルです.
これはVue、Vue Router、webpackによって駆動される1ページのアプリケーションで、Docsディレクトリの下のmdファイルに基づいてサーバレンダリング(SSR)を使用して静的ページを生成します.約束が設定より大きいため、ほとんどはNuxtのように設定する必要はありません.

2.インストール

通常のプロジェクトのように、npm initでディレクトリを生成し、ディレクトリにdocsフォルダを新規作成した後、README.mdファイルを新規作成し、その中に「hello vuepress」などの内容を任意に入力します.
次にVuePressをインストールします.

npm i vuepress@next -g//  1.X   alpha   
npm i vuepress@next -D//  

次に、コマンドラインvuepress dev docsを実行し、以下のように出力します.
ブラウザを開いてみましょう
うん、走れ!僕らは続ける

3.使用および構成

docsフォルダの下に.vuepressフォルダを新規作成し、config.jsファイルを新規作成します.次に、構成を行います(ドキュメントのコピーを続行します)./docs/README.meにコンテンツを追加します(このコンテンツは必ず上部に置いてmarkdown文字コンテンツの前に置いてください)

---
home: true
heroImage: /hero.png
heroText: Hero  
tagline: Hero  
actionText:   →
actionLink: /zh/guide/
features:
- title:  
  details:   Markdown  ， 。
- title: Vue 
  details:   Vue + webpack  ，  Markdown   Vue  ，  Vue  。
- title:  
  details: VuePress   HTML， ，  SPA  。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
(markdown )

./docs/.vuepress/config.jsにコンテンツを追加

module.exports = {
  title: 'Darki',
  themeConfig: {
    nav: [
      {text: 'home', link: '/'},
      {text: 'guichu', items:[
        {text: ' ', link: '/geping/'},
        {text: ' ', link: '/yuanshou/'}
      ]},
      {text: 'darki', link: 'http://hujiashi.top'}
    ]
  }
}

次に./docs/の下に./docs/guichu/geping/index.mdと./docs/guichu/yuanshou/index.mdを新築し、中に何か書いておきます.ディレクトリ構造は次のとおりです.
次にdevを再起動します.など、再起動する前に公式の推薦に従ってpackage.jsonファイルに内容を追加します.

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

サービスを停止して、再びコマンドラインにnpm run docs:devを入力します(package.jsにコマンドを追加するのがおっくうな友達も王Xカード~泥垢を使うことができます!!)vuepress dev docsを引き続き使用することもできます
古い鉄は故障していません~図のようにVuePressはmdのディレクトリ内の位置に基づいてvue-routerを通じて自動的にパスを生成しますが、静的サイトジェネレータであるため、markdownドキュメントを変更するにはサービスを再起動する必要があります.
以上の内容はすべて公式文書を写して、もし同じであれば、もともと同じです.
しかし、ドキュメントをそのまま運ぶのは私の本意ではありません.結局、これはシリーズですから、ドキュメントの内容を見ても基本的に説明してください.
これは次号予告です.
自分のVuePressブログのデザイン方法
転載先:https://juejin.im/post/5c65656ff265da2dab17b5bb