新規プロジェクトで Vue.js を使うなら NUXT がおすすめとの記事を見かけたので
html5experts.jp さんのページを参考に入門してみました。
必要なコマンドがインストールされていたら、新規プロジェクトの作成〜ルーティングしたページ表示まで 10 分ほどでできたので、おすすめされているのもたしかにな感じでした。
今回参考にさせていただいたページ
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
「NUXT とは」 からユースケースやデータバインディングなどなど、NUXT 初心者の私でもわかりやすい内容でとっても助かりました 
環境
- OS : macOS High Sierra 10.13.6
- node : v10.7.0
- npm : 6.2.0
- vue-cli : 2.9.6
NUXTの node.js バージョンについて（NUXT - モジュール より抜粋）
async/await は Node.js 7.2 より上のバージョンでしかサポートされていないことに注意してください。
備考：インストールコマンド
nodebrew: $ curl -L git.io/nodebrew | perl - setup
node/npm: $ nodebrew install-binary stable
vue-cli: $ npm install -g vue-cli
プロジェクト作成
$ vue init nuxt-community/starter-template sample
$ cd sample
$ npm install
$ npm run dev
ローカルサーバが起動したら http://localhost:3000 にアクセスしてサンプル画面が表示されたら OK です。
表示用ページの作成
GitHub のユーザー情報を参照する API からデータを取得してプロフィール画像を表示するページを作ります。今回は vuejs ユーザーのプロフィール画像を表示してみます。
API との通信用に axios をインストール
$npm install axios
表示用のページを作成
サンプルプロジェクトルート/pages ディレクトリ内に users ディレクトリを作成後に _id.vue という名前のファイルを作成します（ファイルの内容は参考にさせていただいたサイトと同じ内容です）。
このファイル構成によって自動的にルーティングが作成されてページが表示されるようになります。
<template>
<section class="container">
<img :src="`https://github.com/${user.login}.png`" :alt="user.name">
<h1>{{user.name}}</h1>
</section>
</template>
<script>
import axios from 'axios'
export default {
async asyncData ({ params }) {
const { data: user } = await axios.get(`https://api.github.com/users/${params.id}`)
return {
user
}
}
}
</script>
<style>
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
.container img{
margin-bottom: 20px;
border-radius: 50%;
overflow: hidden;
}
</style>
ファイルができたら、 http://localhost:3000/users/vuejs にアクセスして vuejs ユーザーの画像が表示されていたら OK です。
