Caffè Latte

日々を徒然に

スポンサーリンク

Gridsomeをサクッと触って見た感じ

スポンサーリンク

Gridsomeをサクッと触って見た感じ

印象

いい感じにまとまったVueの爆速Framework 爆速でポートフォリオ作るなら良さそう

使い方

npm install -g @gridsome/cli
gridsome create my-gridsome-site
cd my-gridsome-site
gridsome develop

をして、ブラウザでlocalhost:8080をひらけば初期画面が見える

Pageの追加方法

/pages/.vueファイルを作成します

こんな感じ

src/pages
├── About.vue
├── Index.vue
└── test.vue

そしてtest.vueに適当に書く

ここはVueJSのコンポーネントと同じかんじ

/.temp/routers.jsに routingを追記する

  ,{
    name: "test",
    path: "/test",
    component: () => import("~/pages/test.vue")
  }

上のようなものを追記します。

やっていることは/testのURLを踏んだら

test.vueを表示するようにといったことを書いている。

するとlocalhost:8080/testに先ほど追加したものが見えるはず。

何が良いか

  • GraphQLレイヤーを使ってデータソースにアクセスしていて、とても早いらしい

  • デフォでいい感じに設定されているので、追記すればよしなにサイトが作れる

https://gridsome.org/docs/

軽く触ったソースコード

github.com

スポンサーリンク