 |
新品価格 |
以下のコマンドをコンソールで入力。portfileの部分はなんでもいいけどプロジェクトに関した名前にする。
|
1 |
npx create-nuxt-app portfolio |
スポンサードリンク
|
1 2 3 4 5 6 |
To build & start for production: cd portfolio npm run build npm start |
|
1 2 |
cd portfolio npm run dev |
portfolioのところは先ほどつけたプロジェクトネームですね。
と出てくるので開発版をツクリタイ場合はnpm run devを実行します。
全て作成して納品する場合に
npm run build npm start
を実行するとスタイルシートや注意ですがすべてはしくされて不要なファイルも削除されたものが新規フォルダに出力されます。
コンポーネントをインポートする箇所は全体を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> |
SASS
SASSが必要ですね。assetsフォルダの中にscssを作ります。/scss/style.scssという感じです。
|
1 |
npm install --save-dev node-sass sass-loader |
bootstrap
bootstrapも入れてみました。
|
1 |
npm install bootstrap-vue |
Font Awesome
Font Awesomeも入れました。
ターミナルでインストール
|
1 |
npm install --save-dev @fortawesome/fontawesome-free |
next.config.jsでCSSを読み込む。
|
1 2 3 |
css: [ '@fortawesome/fontawesome-free/css/all.css', ], |
@がnodemoduleを指すようですね。
ざざっと設定してみました。
これは楽です。gulp4に移行しようと思ったのですがタスクを新たに組まないといけなかったり、開発が終了したプラグインがアッタリあったり、この先の運用はとても大変そうでした。ウェブバックもをも使われていると思いますがそれ単体だけではなく最近でフレームワークを使うことが主流になっているようです。
プログラミングにうとい自分には必要最低限のフロントエンドの環境がコマンドだけで、揃えることが出来るのは本当に大助かりです。次回はインストールだけではなくOGPやSEO対策についても調べていきたいと思います。
|
新品価格 |