javascript web技術 ツール

Nuxt.js インストール手順


Nuxtは最近流行りの静的サイトジェネレーターでもっとも支持されているフレームワークです。
開発環境が複雑化しているフロントエンド業界で、サクッとインストールしてすぐ開発に映ることが可能となります。
公式インストールガイドを参考にしました。
npm v8以上でインストール可能です。

Vue.js & Nuxt.js超入門

新品価格
¥3,240から
(2019/6/3 00:36時点)

以下のコマンドをコンソールで入力。portfileの部分はなんでもいいけどプロジェクトに関した名前にする。

そうすると、サイト情報やどのような仕様にするかいくつかの選択肢が出てきます。
いつでも変更できるので、エンター連打で構いません。すると以下の画面がでてきます。


portfolioのところは先ほどつけたプロジェクトネームですね。
と出てくるので開発版をツクリタイ場合はnpm run devを実行します。
全て作成して納品する場合に
npm run build     npm start
を実行するとスタイルシートや注意ですがすべてはしくされて不要なファイルも削除されたものが新規フォルダに出力されます。

npm run deを入力したらhttp://localhost:3000/  にアクセスすると以下の画面が現れます。
自分はnode8.11.1でインストールしようとしたが、エラーでだめだったのでnode10.15.3で実行しました。
Nuxt.js

インストール完了画面

コンポーネントをインポートする箇所は全体をtemplateでくるまないと行けないようです。これはインポート元も同じ。
これを踏まえ、例えばTheHeader.vueのコードは以下のようになります。

SASS

SASSが必要ですね。assetsフォルダの中にscssを作ります。/scss/style.scssという感じです。

bootstrap

bootstrapも入れてみました。

Font Awesome

Font Awesomeも入れました。
ターミナルでインストール

next.config.jsでCSSを読み込む。

@がnodemoduleを指すようですね。

ざざっと設定してみました。
これは楽です。gulp4に移行しようと思ったのですがタスクを新たに組まないといけなかったり、開発が終了したプラグインがアッタリあったり、この先の運用はとても大変そうでした。ウェブバックもをも使われていると思いますがそれ単体だけではなく最近でフレームワークを使うことが主流になっているようです。
プログラミングにうとい自分には必要最低限のフロントエンドの環境がコマンドだけで、揃えることが出来るのは本当に大助かりです。次回はインストールだけではなくOGPやSEO対策についても調べていきたいと思います。

Vue.js & Nuxt.js超入門

新品価格
¥3,240から
(2019/6/3 00:36時点)

-javascript, web技術, ツール