Go to Qiita Advent Calendar 2024 Top
LoginSignup
20
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@mt877

【Nuxt.js】サイト構築前にやること

Last updated at Posted at 2020-05-25

静的サイトを作成する際、create-nuxt-app（プロジェクト作成）後に行う環境設定を備忘録としてまとめています。
都度、更新・変更するかもです。

目次

  1. ESLintを追加する
  2. SASS（SCSS）の使用
  3. 共通JSの読み込み
  4. html/head/bodyタグの編集（サイト共通）
  5. ローカルサーバーのホスト・ポート番号を変更
  6. build設定
  7. 画像の保存先について

ESLintを追加する

全てのJavaScriptとVueファイルをlintします。除外したいファイルは.gitignoreに定義します。
Nuxt.jsではESLintの設定は.eslintrc.jsonではなく、.eslintrc.jsで設定します。

各種パッケージをインストール。

npm install -D babel-eslint eslint eslint-loader eslint-plugin-vue

.eslintrc.jsを作成しオプション等を設定・記述する。

.eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  globals: {
    "$": false,
    "jQuery": false
  },
  // *.vueファイルをlintにかけるために必要
  plugins: [
    'vue'
  ],
  rules: {
    'indent': ['error', 2],
    'linebreak-style': ['error', 'unix'],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always'],
    'no-console': ['warn'],
    'no-unused-vars': ['warn'],
    'vue/max-attributes-per-line': 'off',
    'vue/singleline-html-element-content-newline': 'off'
  }
};

package.jsonにlintタスクを追加します。

package.json
"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
}

開発中、保存時に自動でESLintを実行するにはnuxt.config.jsに以下を追記してください。

nuxt.config.js
build: {
  extend(config, ctx) {
    // 保存時にESLintを実行
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce: "pre",
        test: /\.(js|vue)$/,
        loader: "eslint-loader",
        exclude: /(node_modules)/
      })
    }
  }
}

参考URL：開発ツール - NuxtJS

Sass（SCSS）の使用

必要なパッケージをインストール。

LibSass（node-sass）を使う場合

% npm install -D node-sass sass-loader

Dart Sass（sass）を使う場合

% npm install -D sass sass-loader fibers

インストール・設定後、styleタグにlang属性を追加すれば認識してくれます。

hoge.vue
<style lang="scss">
  .hoge {
    &__child {
    }
  }
</style>

.browserslistrcをルートディレクトリに追加

browserslistを参考にコンパイルの対象ブラウザを記述してください。

.browserslistrc
last 2 version
Firefox ESR
Chrome 28
not dead

共通SCSSを読み込み

サイト共通で読み込みたいCSSがある場合はnuxt.config.jsにパスを記述します。

nuxt.config.js
export default {
  css: [
    { src: '@/assets/scss/style.scss', lang: 'scss' },
  ]
}

SCSSをグローバル化

SCSSの変数やmixinを各コンポーネントで使用したい場合は「@nuxtjs/style-resources」をインストール。

@nuxtjs/style-resources

URL：@nuxtjs/style-resources

% npm install -D @nuxtjs/style-resources

nuxt.config.jsにモジュールと該当ファイルのパスを記述します。

nuxt.config.js
export default {
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: [
      '@/assets/scss/_var.scss',
      '@/assets/scss/_mixin.scss',
    ]
  }
}

共通JSの読み込み

  1. 外部リソースの読み込み
  2. staticから読み込み
  3. pluginsから読み込み
  4. middlewareから読み込み
  5. 外部リソースの読み込みについて補足

外部リソースの読み込み

外部プラグイン・CDN読み込みたい場合はこれ

  • async：非同期
  • defer：遅延
  • body：</body>の直前に追加
nuxt.config.js
export default {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', async: true, defer: true, body: true },
      { src: 'https://polyfill.io/v3/polyfill.min.js?version=3.52.1' },
    ]
  }
}

参考URL：外部リソースを使うには？ - NuxtJS

staticから読み込み

webpackで処理されることを意図しないファイルを読み込む場合はこれ。
外部リソースと同じ方法で読み込みます
staticフォルダに該当ファイルを追加してnuxt.config.jsにパスを記述します。

nuxt.config.js
export default {
  head: {
    script: [
      { src: 'js/common.js', body: true }
    ]
  }
}

pluginsから読み込み

Vueアプリケーションがが初期化される前にインポートしたい場合はこれ。
webpackで処理したい自作のJSを読み込ませる場合、この方法を利用しています。
pluginフォルダに該当ファイルを追加してnuxt.config.jsにパスを記述します。

  • mode：clientクライアントサイドで実行。serverサーバーサイドで実行
nuxt.config.js
export default {
  plugins: [
    { src: '@/plugins/common.js', mode: 'client' }
  ]
}

参考URL：API: plugins プロパティ - NuxtJS

middlewareから読み込み

Vueアプリケーションでルーティングが行われるタイミングで何かしたい場合はこれ。
今のところ具体的な用途がわからない。

外部リソースの読み込みについて補足

個人的な手法ですが、リソースのリクエストを減らす目的で、開発時に外部プラグインと自作JSを統合しています。
pluginsフォルダにimportフォルダを追加し、フォルダ内に外部プラグインのソースコードなどを入れておきます。
あとは自作JSの最初に該当ファイルをimportしておけば、トランスパイルで統合されたファイルが書き出されます。

hoge.js
import './import/jquery.js';
import './import/slick.min..js';

外部プラグインにはESLintを動作させたくないので、動作範囲からimportフォルダを除外します。
.eslintignoreを作成し、除外記述を追加します。

.eslintignore
plugins/import/*

html/head/bodyタグの編集（サイト共通）

個人的に追加した要素だけ記述しています。

  • titleTemplate：タイトルタグのテンプレート
  • htmlAttrs：htmlタグの属性指定
  • bodyAttrs：bodyタグの属性指定
nuxt.config.js
export default {
  head: {
    titleTemplate: '%s | SAMPLE SITE',
    htmlAttrs: {
      lang: 'ja',
      class: ['html-class']
    },
    bodyAttrs: {
      class: ['body-class']
    }
  }
}

ローカルサーバーのホスト・ポート番号を変更

ローカルIPアドレスでアクセスできるようにして、仮想環境や別デバイスで確認できるように設定します。

nuxt.config.js
export default {
  server: {
    port: 3000,
    host: '0.0.0.0'
  }
}

参考URL：https://ja.nuxtjs.org/faq/host-port/

build設定

postcss

SCSSコンパイルの設定です。

  • autoprefixer：autoprefixerでgridをIEに対応させています。
nuxt.config.js
export default {
  build: {
    postcss: {
      preset: {
        autoprefixer: { grid: true }
      }
    }
  }
}

参考URL：API: build プロパティ - NuxtJS

babel

babelの設定です。

  • targets：ビルドのターゲットを指定します。
    • serverビルドとclientビルドでターゲットの初期値が異なります。serverビルドではnode: 'current'、clientビルドではie: '9'になります。
    • envTargetでは各ビルドのターゲットを定義しています。client側に空のオブジェクトを定義しておけば.browserslistrcの設定を参照してくれます。
  • useBuiltIns：polyfillの処理方法を設定します
    • usageまたはentryを指定するとcore-js（polyfillライブラリ）でpolyfillが補完されます。
    • usageは必要なpolyfillだけを自動で判別してインポートしてくれます。
    • entryは個別に手動でpolyfillをインポートします。
  • corejs：core-jsの読み込みバージョンを指定します。
nuxt.config.js
export default {
  build: {
    babel: {
      presets({ envName }) {
        const envTarget = {
          server: { node: "current" },
          client: {},
        };
        return [
          [
            require.resolve('@nuxt/babel-preset-app'),
            {
              targets: envTarget[envName],
              useBuiltIns: "usage",
              corejs: { version: 2 }
            }
          ]
        ]
      }
    }
  }
}

参考URL - 1：Babel7.x時代のpolyfillの設定方法とuseBuiltInsの仕組み
参考URL - 2：Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法

画像の保存先について

環境構築から脱線しますが、画像リソースの保存先としてassetsフォルダとstaticフォルダの使い分けを補足しておきます。
基本的に、webpackで処理したいファイルはassets、それ以外はstaticで使い分けています。

assetsフォルダ

こちらに格納したファイルはデータURL（Base64）に変換、インライン化されます。
webpackで処理したいファイルはこちらに格納します。

assetsフォルダの画像参照方法

最初にエイリアスを記述するのがポイントです。

hoge.vue
<img src="~/assets/images/image.png">
<img src="@/assets/images/image.png">
hoge.scss
background: url("~assets/images/image.png");
background: url("~@/assets/images/image.png");

staticフォルダ

webpackで処理したくないファイルはこちらに格納します。

staticフォルダの画像参照方法

hoge.vue
<img src="/images/image.png">
hoge.scss
background: url("/images/image.png");

参考URL - 1：アセット - NuxtJS
参考URL - 2：【Nuxt.js】imgファイルの指定方法について

20
30
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
20
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?