Nuxt.jsでWebサービスを作る～コーディング

node.js

Nuxt.jsでWebサービスを作るぞ！

ということで、前回プロジェクト作成から表示までを試しました。

今回はコーディングについてです。

Qiita APIを使う

サンプルに則ってまずはQiita APIを扱ってみます。

プロジェクト内の「pages/index.vue」をいじっていきます。

まず「script」のセクションです。
ここに処理を書いていきます。

とりあえずサンプルをコピペしましたが、エラーが発生しました。

まず発生したエラーが3種類。

修正したポイントは

Map型はこういうやつ

params: {
    page: 1,
    per_page: 10 // ここのカンマが不要
}

3つ目の「console.log()が使えない」旨が書かれたエラーは、解決方法がわからずとりあえずコメントアウト。

ログ出力なので、解決したいですね……

次に「template」のセクションです。
ここにページの構成を書いていきます。

ここはサンプル通りにコピペであっさり完了。

scriptと合わせて、こんな感じで表示されました。

ブラウザの表示

CSSを適用したいためsectionタグの箇所を

<section class="container">

と変更しました。

次に「style」のセクションです。
ここではページのスタイルを書いていきます。

こんな感じにしました。

<style>
.container {
  background: #333;
}

.box.media {
  margin: 10;
  background: #aaa;
}
</style>

これで表示がこのように変わりました。

styleの適用

ということで、Nuxt.jsでWebサービスを作るための、コーディングについてでした。

Vue.js初なんですが、見やすそうだし、ページごとの管理がしやすそうですね。
これが大規模になるとどうなるのか？と思うとわかりませんが……

とりあえずは何か作れるように頑張ってみたいと思います！

*1:Pythonでいう辞書型