【2019年5月】 Nuxt.jsインストールとカスタマイズ。(webサイト構築用)

最近Nuxt.jsを使ってサイト制作をちょこちょこやってます。なかなか楽しい。
自分なりの環境構築の手順と、追加の設定をまとめておきます。

開発環境

MacOS 10.14.4
Node.js v12.2.0

Nuxt.jsをインストール

任意のディリクトリで下記コマンドを実行する。

npm init nuxt-app <project-name>

参考:インストール – Nuxt.js

Nuxt.jsをカスタマイズ

Sassをコンパイル可能にする

コンパイラとローダーを追加する。

npm install --save-dev node-sass sass-loader

 

foundationなcssを設置

サイト全体で効かせたい共通デフォルトのcssはfoundation.scssに書きたい。
foundation.scssを作成し、nuxt.config.jsに以下のように追記

export default {
  css: [
    '@/assets/scss/foundation.scss'// プロジェクト内のSCSSファイル
  ]
}

ress(リセットCSS)をインストール

リセットCSSにressを採用。下記コマンドでインストール。

npm install --save ress

nuxt.config.jsに以下のように追記。

export default {
  css: [
    'ress',// Node.js モジュールをロードする
  ]
}

各コンポーネントで共通のsass変数やmixinを使えるようにする

style-resources-moduleプラグインを使って実現する。
下記コマンドでインストール。

yarn add @nuxtjs/style-resources

variables.scss、mixin.scssを作成し、nuxt.config.jsに以下のように追記

modules: ['@nuxtjs/style-resources'],
styleResources: {
  scss: [
    '@/assets/scss/variables.scss',
    '@/assets/scss/mixin.scss'
  ]
}

参考:《Nuxt.js》Sassの共通の変数やmixinを一括で各コンポーネントに読み込む方法。 – Qiita

アプリケーションの起動

サーバーを起動し、nuxtサイトを表示させる

npm run dev

上記コマンドを実行しブラウザでhttp://localhost:3000にアクセスする。
ファイル監視、ホットリロードも動作する。

デプロイ

静的ファイルを生成する

下記コマンドで静的なファイルが生成できる。

npm run generate

その他

コンポーネントごとにCSSにスコープをつける

<style scooped>

コメントをどうぞ!