こんにちは！スギモトです！
VuePressをご存知でしょうか。
自分は勝手に名前から連想して、おそらくVueをWordpressのようにしたやつ！と思っていましたが調べてみると少し違うようです。
公式サイトには次のような感じの記述があります（日本語対応していないので、Google翻訳に丸々投げたものです）
特徴
・技術文書に最適化された組み込みのマークダウン拡張機能
・Markdownファイル内のVueを活用する能力
・Vue-poweredカスタムテーマシステム
・自動サービスワーカーの生成
・Googleアナリティクスの統合
・Gitに基づいた「最終更新日」
・多言語サポート
・デフォルトテーマ：
– レスポンシブレイアウト
– オプションのホームページ
– シンプルですぐに利用できるヘッダーベースの検索
– アルゴリアの検索
– カスタマイズ可能なナビゲーションバーとサイドバー
– 自動生成されたGitHubリンクとページ編集リンク
これだけ見てもピンとこないですよね。
雑に言うと、似たようなVueを便利したNuxt.jsよりもドキュメント系サイトを作るのに便利？ということでしょうか。Markdownをそのまま読み込ませることができるし、勝手にいい感じのテーマも当ててくれるとのことです。
ただ、これではやっぱりわかりませんよね。
ということで、実際にVuePressを試してみつつ、基本的な使い方を学んでいこうと思います！
目次
VuePressを試してみた！
前提条件
- Node.js v8.0.0以上
webpack 3.xのプロジェクトにはYarnを使ってほしいとのことです
詳しくは公式サイトを参照してください。
今回はグローバルインストールする場合の手順をご紹介していきます。
サンプルプロジェクトを作成
npm initを使ってプロジェクトを作成します。
今回、細かい設定はなんでもいいのでEnter連打で。
npm init
package.jsonが作成されたと思います。
VuePressのインストール
では、さっそくVuePressをインストールしましょう。
npm install --save-dev vuepress
また、ローカルにインストールしましたのでビルドコマンドを用意する必要があるそうです。
package.jsonにコマンドを追加しておきましょう。
"scripts": {
"dev": "vuepress dev",
"build": "vuepress build"
}
これで準備OK。
コマンドを試してみる
初期状態で何が表示されるのか確認してみます。
npm run dev
コマンドが成功したら、ローカルにアクセスしてみます。
404が表示されました。。。
調べてみると、どうもプロジェクトフォルダ直下にあるMarkdownファイルを自動でコンパイルしてくれるようです。
まだ、何もファイルを置いていないので404になったのだと思われます。
Markdownを置いてみる
プロジェクトフォルダ直下に「README.md」というファイル名で置いてみます。
# スギモトノート ## VuePressを試してみた！ * VuePressとは * Vueで技術文書とか書くときにめちゃめちゃ便利かも
すると、
TOPページがこんな感じの画面に変わりました！
右上に検索ボックスが自動で付いてますね。
config.jsも作ってみる
これだけでも十分便利なのですが、各ページ共通であるheadタグについては「./.vuepress/config.js」に記述する方式のようです。
module.exports = {
title: 'Hello VuePress'
}
ファイルを追加したら、もう一度「npm run dev」をしてみましょう。
サイトのタイトルを設定したら、トップページにもタイトルが追加されました。
この辺は勝手にVuePress側がやってくれるようです。
もしこの感じが気に入らず色々カスタマイズしたいという場合は、公式サイトを参照ください。
当然、Vueを使っているのでコンポーネントも利用できる
ディレクトリ構造はこんな感じ。
README.mdを編集
サンプルコンポーネントを追加
表示結果
サクッとできましたね。
まとめ
今回はVuePressのご紹介でした。
自分も完全にはじめましてで、公式サイトを見つつサンプルコードを書いてみました。
ちょっとしたドキュメントを残したい場合や、共有したい場合は便利かと思います。
他にもいろいろいじれそうなので、どこかで導入してみてもう少しノウハウが溜まったらまたご紹介できればと思います！
