開発環境NuxtvueNuxt.jsでさくっと静的サイトを作ってみよう2018-11-21こんにちは、みみです。先日、突貫工事でちょっとしたサイトを作る必要がありまして、折角なのでNuxt.js使ってみようかと思って、作ってみましたのでそのメモです。アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。公式と同じくかなり日本語化されているので特に私が再度説明することもないのですが。ぽくない、いわゆる全部入りなのでどうかなあとも思いますが、フレームワークとはそういうものなので、ともかく試してみました。最初のほんとのお試しはcreate-nuxt-appを使うとざっくり仕組みが分かって良いと思いますが、色々と盛り込まれ過ぎなので、スクラッチから開始します。サイトが動いています。どのファイルでも編集して保存すれば即反映されていきます。JSONを読み込ませて一覧表示してみる同じフォーマットの画像とテキストを10個程度を表示するだけだったので、テンプレートにJSONを読ませて一覧表示させるようにしました。こんな感じのフォーマットをpage/index.vueのtemplateタグ内に書いて、JSONも同じscriptタグ内に書いちゃう。これ最初はJSONファイルを分けようと思ったのですが、画像の読み込みでハマったので同じファイルの中で今回は済ませました。してインライン化されます。ディレクトリ下)にコピーされ、より良いキャッシュのためにバージョンハッシュを含む名前が付けられます。してしまうという力技で解決してしまったのだけれど、どうやるのがベストなのか知りたいところです。CSS(SASS)を別ファイル化するCSSも同じファイルに書けるのですが、開発しずらいし、コレまでのライブラリとかそのまま使いたいのでそれは別ファイル化しました。sassをassets以下に置いてnuxt.config.jsに指定すればOK。Nuxtは遷移アニメーションが色々使えて良いのですが、そんな訳でついCSSで済ませてしまってあんまり使いませんでした。静的ページを作るにはというわけで、だいたい出来たなーと思ったら、静的ページを生成してみましょう。ファイルが作成されます。dist内に出来たファイルを適当なサーバー(別にNetlifyとかである必要はないです。今借りてるレンタルサーバーに適当なサブドメイン設定してあげたりしても全然だいじょうぶ。iizo.ざっくりSPAとかSSGとかPWAとか何かそんな3文字見たり聞いたことあるぐらいの人でも、そういう感じのページがさくっと作れちゃう凄いやつです。深く考えずに思い付いたプロトタイプをバーっと作るのとかにも良いと思う。作り込むことも出来るし。流行る理由がわかった気がしました。この記事を書いた人mimi主に書いている人。