vuepressを使用したブログの作成

概要
以前はhexoで作った静的ブログサイトがありましたが、hexoで作るのは面倒で、一日中やっていたのを覚えています.今はVuePressを使うのが便利です.
VuePressのWebサイトは、実際にはVue、Vue Router、webpackによって駆動される単一ページアプリケーションです.以前にVueを使用したことがある場合は、カスタムトピックを作成または開発するときに(Vue DevToolsを使用してカスタムトピックをデバッグすることもできます!)、おなじみの開発体験に溶け込みます!
VuePressインストール
node.jsのインストール
node.jsをインストールします.バージョンは>=8 node.jsでアドレスをダウンロードする必要があります.https://nodejs.org/zh-cn/環境変数の設定
vuePressのインストール

ファイルBlog

を作成する

フォルダオープン端末に入り、

と入力.

npm install -D vuepress

は以下の構成に従って作成され、具体的な構成は公式

を参照する.

├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

package.jsonを設定するスクリプト構成VuePressには、

という2つのコマンドがあります.

vuepress dev docsコマンドローカルサービスを実行し、アクセス(http://localhost:8080)をクリックすると、Webサイト

をプレビューできます.

vuepress build docsコマンドは静的ファイルを生成するために使用されます.デフォルトではdocs/.vuepress/distディレクトリに配置されます.もちろんdocs/.vuepress/config.jsのdestフィールドでデフォルトの保存ディレクトリを変更することもできます.ここでは2つのコマンドをスクリプトにカプセル化し、npm run devとnpm run buildを直接使用すればよい.

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

docsのmdファイルは私たちが表示するページで、vuepressはmarkdownファイルごとにmarkdown-itを使用してHTMLにコンパイルし、Vueコンポーネントのテンプレートとして処理します.これにより、markdownファイルで直接Vueを使用できます.
配置
vuepressを構成すると、npm run buildでパッケージ化し、プロジェクトを導入できます.