Nuxt.jsのセットアップ2019-07-09Nuxt.js(Vue.js)やFirebaseを使った静的サイトやWEBアプリケーションの制作・開発の記事を書いていきたいと思います。最初はシンプルな静的サイト制作方法を書きます。環境について前提としてNode.jsがインストールされているものとします。nodejs(12.4.0)まずはセットアップさっそく制作を開始しましょう。nuxt.jsはコマンドライン1行で必要なものをサクっと準備してくれます。コマンド入力後、いくつか質問されるので必要に応じて入力や選択をしてください。今回はシンプルに何もオプションを使わずにセットアップしました。379個のパッケージを18.064秒でインストールしました。startこれで制作の準備が完了しました。サーバーを起動してみましょう。devこんな具合にNuxt.jsのロゴが表示されていたら成功です。Vueのルールや書き方についてNuxt.jsの良いところは、Vue.jsのお作法がひと目みたらわかるようになっているところだと思います。15px;}</style>こんな感じになっていると思います。1つのvueファイルの中にそのコンポーネントで必要なコードとscript、styleを書けば良いという事が一目瞭然です。/>で呼び出せば良いという事も分かりやすいです。この大文字小文字の作法をしらなくて、誰もが「あれ?」と最初にハマりがちなのですが、わかりやすくて良いですね。CSSとはCSSの影響範囲をコンポーネントの中だけに限定する方法です。scoped>とstyle要素にscopedを追加するだけでOKです。red;}</style>index.vueをこんな感じにしてみます。両方のh1要素が赤色になってしまいます。Logo.vueのstyle要素にscopedを指定してみます。Logo.vueのh1要素のみ赤くなりました。red;}といった具合にセレクターへ属性を挿入してくれているんですね。コンポーネントの中だけにスタイルが適用されるようになっています。ちなみにindexが親でLogoが子といった関係なので、逆にindexのほうにscopedを指定しても子のコンポーネントに影響してしまうので注意が必要です。次は共通のcssと読み込みについて書きたいと思います。