vue.js(nuxt.js)を理解していない初心者がポートフォリオを作る

初めに

Hello 2019, Hello vue.js.
この記事はフロントエンド初心者がvue.jsを使って作ったポートフォリオを披露する記事です。
今年の自身のテーマはフロントエンド元年ということで、普段サーバーサイドのJavaエンジニアですがフロント技術を身につけていきたいです。

環境整備

• vue-cliをのインストール

 npm install -g vue-cli

• starterテンプレートを使用してプロジェクトを作成

 vue init nuxt/starter nuxt-example

※どうやらnuxt/starterテンプレートは非推奨とのこと。
今後は npx create-nuxt-appを使いましょう。
nuxt-community/starter-template

• プロジェクトの実行

cd nuxt-example // プロジェクトのディレクトリに移動
npm install     // package.jsonを元にモジュールをinstall
npm run dev     // Nuxtをローカルで起動

これでhttp://localhost:3000/にアクセスすると画面が描画されていることを確認できます。

作成したもの

自身のポートフォリオを作成しました。
作成したものはGitHubPagesを使ってホスティングしています。
nuxt-portfolio

Carrierのページだけvue.jsらしいことをしていて、v-forで描画しているcarrierに、案件の年、概要とインデックスを保持しており、
対象の行にマウスをhoverすると案件詳細として定義していた、配列のインデックスに対応する文字列をmsg,msg2に描画します。
これ絶対正解じゃないやつー

carrier.vue（一部）

      <table class="carrier" width="90%">
        <tr>
          <th v-for='head in header' v-bind:key='head.item'>
            {{ head.item }}
          </th>
        </tr>
        <tr v-for="cal in carrier" v-bind:key='cal.key' v-bind:class='cal.index' v-on:mouseover="mouse">
          <td align='center'>{{cal.year}}</td>
          <td style="white-space: pre-wrap;">{{cal.desc}}</td>
        </tr>
      </table>
      <br />
      <div id='detail'>
        <h3>案件詳細</h3>
        {{msg}}<br />
        {{msg2}}
      </div>

Nuxt.jsの存在

どこにNuxt.js要素があるんだというところですが、今回感じたものとして、ルーティングが凄いなということに尽きます。
pagesディレクトリ配下にvueファイルを作成するだけで自動的にルーティングを解釈してくれるので、
例えばstruts.xml、例えばsqlMapConfig.xmlのようなファイルを自動的に作成してくます。
そのため、本来開発すべきvueファイルの実装に専念できるので気が楽だなという印象です。

Nuxt.js - ルーティング

今後

とりあえず動くモノは作れたので、次は猫本で体系的に学習、理解した上で、同じポートフォリオを作ってみます。
成果物の差分が出るので学習の成果がはっきり出るかと考えています。

参考にした記事

フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話
Nuxt.jsで作ったWebサイトをささっとGithub Pagesに公開する