lisz-works

技術と興味の集合体

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

【スポンサーリンク】

node.js

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

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

www.lisz-works.com

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

Qiita APIを使う

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

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

scriptを編集

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

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

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

  1. error Delete ';' prettier/prettier
  2. error Delete ',' prettier/prettier
  3. error Unexpected console statement no-console

修正したポイントは

  1. script内の「;(セミコロン)」が不要
  2. Map型*1の最終要素は、「,(カンマ)」が不要
  3. 解決方法不明……ひとまずコメントアウト

Map型はこういうやつ

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

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

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

templateを編集

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

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

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

ブラウザの表示

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

<section class="container">

と変更しました。

styleを編集

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

こんな感じにしました。

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

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

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

styleの適用

あとがき

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

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

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

www.lisz-works.com

*1:Pythonでいう辞書型