Nuxt.js

Nuxt.js

Nuxt.jsはVue.jsのフレームワークです。
Nuxt.jsにより.vueファイルを書くとルーティングなどの設定をせずに開発を進めることができ、
実装者はフロントエンドの開発に専念することができるようになしました。

設定なしにルーターを機能させるため、Nuxt.jsではファイルシステムに基づくルーティングを採用しています。
例えば「pages/hoge/piyo.vue」というファイルを設置した場合、
ブラウザーからは「https://domain/hoge/piyo」にアクセスすればpiyo.vueが表示される仕組みです。

idパラメーターを渡したい場合は「pages/hoge/_id.vue」と、ファイル名の前にアンダーバーを指定します。
これでrouter.jsは以下のように自動生成されます。

router: {
  routes: [
    {
      name: 'hoge-id',
      path: '/hoge/:id?',
      component: 'pages/hoge/_id.vue'
    },
  ]
}

では早速Nuxt.jsを使ってみましょう。
まずはプロジェクトの作成です。

npm init nuxt-app sample

これでsampleという名前のプロジェクトが作成されました。
次にプロジェクトを起動してみましょう。

cd sample
npm run dev

これでサンプルプロジェクトがhttp://localhost:3000で起動します。
停止にするはCtrl＋Cをタイプします。
次にVue.jsで使用したHelloWorld.vueをpages配下に配置します。

再びnpm run devするとaxiosが見つからないとエラーが出ますので、以下のコマンドを実行します。

npm install --save axios

再びnpm run devで起動します。
Springに挨拶して返事が返ってくれば成功です。
CrossOriginのエラーが出た場合は前回とポートが変わっていますので、
DemoControllerクラスの@CrossOriginの値を修正しましょう。
最後に、HelloWorld.vueの名前をindex.vueに変更しておきます。

続いてForm.vueとList.vueもコピーしてきましょう。
修正箇所は1カ所だけです。List.vueの12行目、router-linkを修正します。

<td><router-link :to="{ name: 'Form', params: { id: s.id}}">UPDATE</router-link></td>

以上でCRUDが完成しました。
もしパスがわからなくなった場合は/.nuxt/router.jsにルーターの設定が出力されていますので、参照してください。