2018/10/6こんにちは!スギモトです!VuePressをご存知でしょうか。自分は勝手に名前から連想して、おそらくVueをWordpressのようにしたやつ!と思っていましたが調べてみると少し違うようです。自動生成されたGitHubリンクとページ編集リンク引用:公式サイトこれだけ見てもピンとこないですよね。雑に言うと、似たようなVueを便利したNuxt.jsよりもドキュメント系サイトを作るのに便利?ということでしょうか。Markdownをそのまま読み込ませることができるし、勝手にいい感じのテーマも当ててくれるとのことです。これではやっぱりわかりませんよね。3.xのプロジェクトにはYarnを使ってほしいとのことです詳しくは公式サイトを参照してください。今回はグローバルインストールする場合の手順をご紹介していきます。initを使ってプロジェクトを作成します。今回、細かい設定はなんでもいいのでEnter連打で。initpackage.jsonが作成されたと思います。VuePressのインストールでは、さっそくVuePressをインストールしましょう。念のため、devDependenciesにインストールしておきましょう。vuepressまた、ローカルにインストールしましたのでビルドコマンドを用意する必要があるそうです。package.jsonにコマンドを追加しておきましょう。コマンドを試してみる初期状態で何が表示されるのか確認してみます。devコマンドが成功したら、ローカルにアクセスしてみます。404が表示されました。調べてみると、どうもプロジェクトフォルダ直下にあるMarkdownファイルを自動でコンパイルしてくれるようです。何もファイルを置いていないので404になったのだと思われます。Markdownを置いてみるプロジェクトフォルダ直下に「README.md」というファイル名で置いてみます。Vueで技術文書とか書くときにめちゃめちゃ便利かもすると、TOPページがこんな感じの画面に変わりました!右上に検索ボックスが自動で付いてますね。config.jsも作ってみるこれだけでも十分便利なのですが、各ページ共通であるheadタグについては「./.vuepress/config.js」に記述する方式のようです。dev」をしてみましょう。サイトのタイトルを設定したら、トップページにもタイトルが追加されました。この辺は勝手にVuePress側がやってくれるようです。この感じが気に入らず色々カスタマイズしたいという場合は、公式サイトを参照ください。Vueを使っているのでコンポーネントも利用できるディレクトリ構造はこんな感じ。表示結果サクッとできましたね。まとめ今回はVuePressのご紹介でした。自分も完全にはじめましてで、公式サイトを見つつサンプルコードを書いてみました。したドキュメントを残したい場合や、共有したい場合は便利かと思います。他にもいろいろいじれそうなので、どこかで導入してみてもう少しノウハウが溜まったらまたご紹介できればと思います!ブログで食べてけてる。サイト開設9ヶ月で15万円稼ぐようになった僕の物語と、そのノウハウ。【天一の日】ラーメン無料券ゲット!「天下一品祭り2018」にはじめて行ってきました!スギモト(@sugimotonote)です。今年で31歳になりました。新卒で独立系SIerに入社して気がつけば8年。ここ何年かは某大手メーカーに常駐して社内SEとしてレガシーな業務システムをモダン化しています。