スケジュール

前提条件

node.js v8.3以上
yarn or npmが入っている(Document見るとyarnの方が推奨とのこと)

環境構築手順

CLI入れる

まずはGridsomeのCLIを入れます。vue-cliを使ったことある人ならほぼ一緒なのですぐできちゃいそう。
直感的でわかりやすいです。cli便利ー。

// GridsomeのCLIを入れる
yarn global add @gridsome/cli
// project作成
gridsome create asset-management-app
// projectのフォルダに移動
cd asset-management-app/
// ローカルサーバーの立ち上げ
gridsome develop

gridsome developでlocalhost:8080で確認することができます。しかもhot reloadなので変更したらすぐ反映される便利。

こんな画面が表示されます。

今回他に入れるライブラリを追加

// 今回必要なライブラリとか入れる(随時追加)
yarn add csv-parse 
yarn add vue-chartjs chart.js

csv-parseはcsvを扱うためのライブラリで、vue-chart.jsはグラフを扱うライブラリです。
今回データソースをCSVにしたのは使ってるネット証券会社から、自分の投資しているものをCSV形式でダウンロードできるのでそれを使おうかなーと思ったためです。
gridsomeは色んなデータソースを使えるので(markdown・jsonやAPIなど)、他の形式使いたい方はこちらを参照
https://gridsome.org/docs/fetching-data/

ページの追加とメニューの変更

新しい静的なページなど追加するにはpagesディレクトリに追加していきます。

お次は共通のLayoutsを変更

src/layouts/Default.vue

<template>
  <div class="layout">
    <header class="header">
      <strong>
        <g-link to="/">{{ $static.metadata.siteName }}</g-link>
      </strong>
      <nav class="nav">
        <g-link class="nav__link" to="/portfolio/">Portfolio</g-link>
        <g-link class="nav__link" to="/asset-allocation/">Asset allocation</g-link>
        <g-link class="nav__link" to="/asset-transition/">Asset transition</g-link>
      </nav>
    </header>
    <slot/>
  </div>
</template>

g-linkはgridsomeが用意してくれているページリンク用のコンポーネントで、このコンポーネントのおかげでgridsomeは高速にページ遷移することを可能しています。以下はdocumentから引用

<g-link>は、リンクが表示されているときにIntersectionObserverを使用してリンクされたページをプリフェッチします。これにより、クリックしたページが既にダウンロードされているため、Gridsomeサイトの閲覧が非常に高速になります。

こんな感じでメニューとか変更しました。あとは中身を作ってかないと。

あとがき

やっぱhot reload便利。
そして調べてるうちにlive reloadとhot reloadの違いを初めて知った。。

ライブリロードは、ファイルが変更されたときにアプリケーション全体をリロードまたはリフレッシュします。たとえば、ナビゲーションに4つのリンクがあり、変更を保存した場合、ライブの再読み込みによってアプリが再起動され、アプリが最初のルートに戻されます。
ホットリロードは、アプリケーションの状態を失うことなく変更されたファイルのみをリフレッシュします。たとえば、ナビゲーションに4つのリンクがあり、一部のスタイリングに変更を保存した場合、状態は変更されませんが、新しいスタイルはページ上に表示されます。同じページにいてください。

あと全然関係ない話ですが、半沢直樹は面白いけど顔芸が濃すぎて話しが入ってこなくなると思った日曜日でした。
あと一週間なのでGridsomeをどんどん学んでいこう。

Gridsome入門 SPAを作ってみよう 【2日目 環境構築編】