#はじめに
おはようございます。こんにちは。こんばんは。
ワタタクです。
今回はNuxt.jsについて見けいけたらいいなと書いています。
#Nuxt.jsとは？
公式サイトに詳しく書いていますが、Vue.js アプリケーションを構築するためのフレームワークです。
サーバーサイドレンダリングするアプリケーションの開発のために必要な設定があらかじめセットされているのが特徴です。
#サーバーサイドレンダリングとは？
Vue.jsなどでDOMの構築をクライアント側で行うと、サイトにアクセスした際に一瞬画面が表示されない状態になります。
サーバー側で初期状態のDOMレンダリングを完了した状態で返すことで、サイトにアクセスした際にすぐに画面を描画することができます。
これをサーバーサイドレンダリング(SSR)と呼びます。
#Nuxt.jsを使ってみよう
では、早速使ってみましょう。
今回も「vue-cli」を使います。
「vue-cli」がインストールされていない場合は、以下のコマンドを実行してvue-cliをインストールしてください。
$ npm install -g vue-cli
vue-cliがインストールされたら、以下のコマンドを実行すると、Nuxtのテンプレートプロジェクトが作成されます。
ここでは「sample」というプロジェクト名で作成します。
$ vue init nuxt-community/starter-template sample
sampleディレクトリに、プロジェクトが作成されます。
以下のコマンドを実行して、必要なライブラリをインストールします。
$ cd sample
$ npm install
開発サーバーを起動します。
$ npm run dev
localhost:3000でNuxtのサンプルアプリが起動します。
#ページの追加
従来Vue.jsでSPA作るときはVue-Routerを使っていました。
その際、componentを作成して、Vue-RouterでURIとcomponentをマッチングするための定義を記述していましたが、Nuxt.jsでは、pagesディレクトリにページ用のcomponentを配置します。
pagesディレクトリに*.vueファイルを配置することで、自動でルーティングの定義を行ってくれます。
例えば、
/pages/users/index.vueを作成するだけで、自動的に/usersのURIとマッチングしてくれて、
http://localhost:3000/users
にアクセスすると、作成した/pages/users/index.vueのページが表示されます。
##[TIPS]
ビューにあたる部分は/components /layouts /pages となる
このディレクリ名は変更不可
- components：
layoutsやpagesに使用できるコンポーネントファイル - layouts：
pages内のVueファイルが表示される（デフォルト以外にも作れる） - pages：ページごとのVueファイル、ここで作ったディレクトリ通りにルーティングが作られる
ページ間を遷移するためには <nuxt-link> コンポーネントの使用を推奨します。
あとはVue.jsの知識があれば、だいたいの事は出来ます。
Nuxt.jsを触る前に一通りVue.jsを勉強しといた方がいいかもしれませんね。
Vue.jsについての基礎(基本構文)←勉強の参考までに
#まとめ
従来のVue.jsでSPAを作る際は、自由度があるが故に、自分でVue-Routerをもってきたり、Vuexをもってきたり、最初のプロジェクトを作る時にはいろいろ手探りしながらやっていました。
それらがNuxt.jsには最初から含まれているので、フロントエンド開発に慣れていない方でもすごくとっつきやすいのでこっちの方が良いかもですねw。ルーティングが自動で生成されるのも手軽で良いですね。
#最後に
最後まで読んでいただきありがとうございました。
もし間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです。
次回はVuex(store)の使い方をやって行こうかな？
#追記(2019-10-31)
##サーバーアップ
以下のコマンドを叩く。
$ npm run generate
その後ビルドされたファイル(_nuxtディレクトリ,index.html)ができるので、それらをサーバーに置く。
#追記(2020-04-03)
##パラメータ受け取りの遷移
２種類の方法があります。
###パスからパラメーターを取得する
http://localhost:3000/post/12345/ にアクセスした時に12345の部分を取得したい。
以下のように行います。
pages/
--| post/
-----| _id.vue
<template>
<section>
<p>{{ $route.params.id }}</p>
</section>
</template>
###getパラメーターを取得する
http://localhost:3000/post/?id=12345``` にアクセスした時に12345``の部分を取得したい。
pages/
--| post/
-----| index.vue
<template>
<section>
<p>{{ $route.query.id }}</p>
</section>
</template>