Nuxt.jsを触ってみた
Nuxt.jsとやらをよく耳にするので
触ってみた
前に行った勉強会でもNuxt.jsに関する発表があったので
まぁ触っておいてもいいだろうという温度感
install
言われるがままにやると入ります
主に触った機能
ルーティング
pages/ 配下にvueコンポーネントを追加すると
その名前のルーティングを作ってくれるというもの
便利っぽい
また動的なURLにも対応している(ex: /user/1/ みたいな)
_id.vueとかいうファイル名にすると出来る
script側でバリデーションやパラメータとして値を利用することが出来る
非同期処理
ページをレンダリングする前に
値を取得しておきたいとかいう事象はよくある気がする
そんな時に必ず戦わなくちゃいけないのが非同期処理
こいつがいつまでたっても苦手でどうしたものかと思ってたところ
Nuxt.jsは便利なメソッドを持っていた
asyncData ({ params }) {
}
というメソッドの中にレンダリングする前に
処理を済ませておいて欲しい事を書いておけば
あとはNuxt.jsさんがよしなにしてくれる最高
静的ファイルの書き出し
SSRが売りでもあるNuxt.jsさん
SEO対策のために静的HTMLを書き出してくれる
npm run generate のコマンド一発で終了
作ったもの
ともあれ触らないとわからないでしょということで作ったもの↓
Vuexも標準搭載なので
でっかいの作るぞーってなってもいい感じまとめ上げれる
わからないこと
↑のを使っていて問題が１つあってどうしようってなってる
今回element-uiを使おうとしたけども
Nuxt.jsのVueのバージョンと合わずwarnigが発生する
回避するためにVueのバージョンを指定する必要があるのだが
どこに書けば...?となってしまった
package.jsonを見てもnuxt.jsをinstallしているし
Vueはnuxt.jsの内部からインストールされているから
じゃあどこに記述すれば？？？という
困った状況
もうちょいやてみるかーと思ってる
