Nuxtは最近流行りの静的サイトジェネレーターでもっとも支持されているフレームワークです。
開発環境が複雑化しているフロントエンド業界で、サクッとインストールしてすぐ開発にうつることが可能となります。
公式インストールガイドを参考にしました。
npm v8以上でインストール可能です。
スポンサードリンク
以下のコマンドをコンソールで入力。portfileの部分はなんでもいいけどプロジェクトに関した名前にする。
|
1 |
npx create-nuxt-app portfolio |
そうすると、サイト情報やどのような仕様にするかいくつかの選択肢が出てきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
To get started: cd portfolio npm run dev To build & start for production: cd portfolio npm run build npm start |
と出てくるので
|
1 2 |
cd portfolio npm run dev |
続けて入力してhttps://localhost:3000/ にアクセスすると以下の画面が現れる。
自分はnode8.11.1でインストールしようとしたが、エラーでだめだったのでnode10.15.3で実行しました。
参考にLIGを見たのですが、コンポーネントをインポートする箇所でだいぶ手間取る。
何が悪かったかというと
コンポーネントの一番外側の要素はひとつになっていなければいけないルールが存在するため（複数あるとエラー）、３要素をひとつの <div></div> で包んでいます。
というところも重要ですが、全体をtemplateでくるまないと行けないようです。これはインポート元も同じ。
これを踏まえ、例えばTheHeader.vueのコードは以下のようになります。
|
1 2 3 4 5 6 7 8 |
<template> <header class="header"> <div class="header-inner"> <h1>タイトル</h1> <p>テキスト</p> </div> </header> </template> |
ここでPhpstomの設定。こちらが詳しかった。
assetsフォルダの中にscssを作ります。/scss/style.scssという感じです。
|
1 2 |
npm install --save-dev node-sass sass-loader npm install bootstrap-vue |
bootstrapも入れてみました。
続いてFont Awesomeも入れました。
|
1 |
npm install --save-dev @fortawesome/fontawesome-free |
next.config.jsでCSSを読み込む
|
1 2 3 |
css: [ '@fortawesome/fontawesome-free/css/all.css', ], |
PWAをする場合は以下。
|
1 |
npm install @nuxtjs/pwa --save |
既存サイトの仮想ディレクトリにindex.htmlを置く方法
generateを実行した際にできるルートディレクトリを変更する方法です。デフォルトのままだとnuxt/以下のルートになっているため、サーバーにアップロードした際、画像などのパスが狂ってしまいます。それを修正するやり方です。
nuxt.config.jsに以下を追加します。
|
1 2 3 |
router: { base: ‘/examplep/newsite/' }, |
書くのは
|
1 |
export default{ |
の中です。
例の様に書きexample.com/example/newsite/にアップすると、問題なく表示することができます。
参考
もろもろ初期設定
-
ソースディレクトリの設定
headに関する設定
無料のプッシュ通知(未実装)