@seo-maru  2020/10/01更新

Nuxt.js要点まとめ


フォルダ構成

pages

メインのvueファイル 

componentsコンポーネント
layoutsレイアウトのベースとなるファイル(default.vue)を格納
nuxt.config.jsヘッダーやその他設定を定義する
assets画像などを配置
staticNuxtの制御外の静的ファイル


ルーティング

pagesフォルダ配下に設定したファイル名で自動ルーティングされる。

動的URL

/books/1 のように動的なURLの場合は、
/books/_id のようにファイルの先頭にアンダーバーをつけると、
以下のパラメーターのように受け取りができる

{{ $route.params.id }}

複数の動的パラメーターを受け取りたい場合はフォルダにもアンダーバーをつける。
/books/_category/_id


Nuxtにおけるモジュールとプラグインの違い

モジュール.. Nuxtの拡張ツール。公式や野良モジュールがある。

プラグイン.. Nuxtとは直接関係ないが、Nuxtに組み入れて使えるツール。


Vue.js

算出プロパティ(computed)


通常のメソッドと違い、computedはキャッシュされる

https://jp.vuejs.org/v2/guide/computed.html

ライフサイクル

mounted, updatedなど、イベントリスナーみたいなやつ。
https://qiita.com/japboy/items/b67bae0bac1aeefb2680


Vuex(データストア)

Vuexを使用。

storeフォルダの下にstateの定義ファイルを置く。

Vuex入門

https://vuex.vuejs.org/ja/guide/

ストアの基本

"ストア" は、基本的にアプリケーションの 状態(state) を保持するコンテナです。
ストアの状態を直接変更することはできません。明示的にミューテーションをコミットすることによってのみ、ストアの状態を変更します。
これによって、全ての状態の変更について追跡可能な記録を残すことが保証されます。

通常、アプリケーションごとに1つしかストアは持たない。



デバッグ

Vue.js devtools と言うChromeのアドオンを使うと便利。



タイトルとURLをコピーしました