Nuxt.js インストール手順バージョン 2.8.X

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

スポンサードリンク

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

そうすると、サイト情報やどのような仕様にするかいくつかの選択肢が出てきます。


と出てくるので

続けて入力してhttps://localhost:3000/  にアクセスすると以下の画面が現れる。
自分はnode8.11.1でインストールしようとしたが、エラーでだめだったのでnode10.15.3で実行しました。
参考にLIGを見たのですが、コンポーネントをインポートする箇所でだいぶ手間取る。
何が悪かったかというと
コンポーネントの一番外側の要素はひとつになっていなければいけないルールが存在するため(複数あるとエラー)、3要素をひとつの <div></div> で包んでいます。
というところも重要ですが、全体をtemplateでくるまないと行けないようです。これはインポート元も同じ。
これを踏まえ、例えばTheHeader.vueのコードは以下のようになります。

ここでPhpstomの設定。こちらが詳しかった。

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

bootstrapも入れてみました。
続いてFont Awesomeも入れました。

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


PWAをする場合は以下。

既存サイトの仮想ディレクトリにindex.htmlを置く方法

generateを実行した際にできるルートディレクトリを変更する方法です。デフォルトのままだとnuxt/以下のルートになっているため、サーバーにアップロードした際、画像などのパスが狂ってしまいます。それを修正するやり方です。
nuxt.config.jsに以下を追加します。

書くのは

の中です。
例の様に書きexample.com/example/newsite/にアップすると、問題なく表示することができます。

参考

もろもろ初期設定
  • ソースディレクトリの設定
headに関する設定
無料のプッシュ通知(未実装)