【備忘録】Nuxt2をcreate nuxt appした後に行なった環境まわりの整理など

## はじめに
`create nuxt app`を実行して、Nuxtプロジェクトを立ち上げた後、実際に開発するまでに行なった開発まわりの設定を残しました。

今回はプロジェクトはSPAモードなので、SSRを使ったプロジェクトでは動作しない可能性があります。
※だいたいはSSRでも動くはずです。
参考：[Qiita - Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら](https://qiita.com/nishinoshake/items/f42e2f03663b00b5886d)

`create nuxt app`コマンド実行時に多くの質問があり、プロジェクトの初期設定を自動で行なってくれます。こちらの記事がたいへん参考になりました。
参考：[Qiita - 【Nuxt.js】create-nuxt-appのすすめ 〜create-nuxt-appの質問に負けたくないあなたへ〜](https://qiita.com/cheez921/items/fdfd224099f686e3173d)

## 環境

- Nuxt.js 2.14.3 （SPAモード）

##srcディレクトリの設定を変更する
デフォルトプロジェクトのディレクトリ構成は、設定ファイルやnode_modulesと同じディレクトリに開発用コードがあって違和感がありました。馴染みのある`src`フォルダに開発用のコードを置くようにディレクトリ構造を変更しました。

- [Qiita - nuxt.js(v2)の作業ディレクトリを整理](https://qiita.com/amishiro/items/9c31a3a9424de27efe28)
- [Nuxt公式 - API: srcDir プロパティ](https://ja.nuxtjs.org/api/configuration-srcdir/)

## tsconfig.jsonのベースURLを変更する
Typescript利用時に`~`を使用したルートからパス指定が静的なチェックにひっかかってしまっため、ベースのURLを変更しました。

```tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}
```

```Sample.ts
import { Const } from '~/class/const';

export class SampleClass {
}
```

[Qiita - Nuxt.js v2.5 + TypeScriptでプロジェクトをはじめる](https://qiita.com/keiichirosoeda/items/e72caf2e8bc0d0a68b70)

## CSSプリプロセッサ（SASS,SCSSなど）を使う
コンポーネントのスタイルに、素のCSSではなく`sass`などのCSSプリプロセッサを使いたい場合はsass-loaderを使います。
[Nuxt公式 - CSS プリプロセッサを使うには？](https://ja.nuxtjs.org/faq/pre-processors/)

```s.vue
  <style lang="scss">
    .wrap {
      display: flex;
      .content {
        flex-grow: 1;
      }
    }
  </style>
```

## スタイルの変数をコンポーネントで使いたい

```Header.vue
  <style lang="scss">
    .bg {
      background-color: $header-color;
    }
  </style>
```
こんな感じでスタイルの変数を利用したいときは、`style-resources-module`を使用することでimportなしで変数などを利用可能とすることができます。
[GitHub - nuxt-community/style-resources-module](https://github.com/nuxt-community/style-resources-module)

変数を定義したファイルを作成する。

```src/assets/style/variables.scss
// アプリ全体の背景色
$header-color: #f1ffef;
```

NPMなどでパッケージを追加した後、`nuxt.comfig.js`ファイルに作成したファイルを指定する。

```nuxt.comfig.js
export default {
  buildModules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: [
      '@/assets/style/variables.scss',
    ],
  },
}
```





sass-resources-loaderは使用できなくなっているので使わない。
[Qiita - Nuxt.js v2.4.0以上でnuxt-sass-resources-loaderを使ってはいけない](https://qiita.com/tsukue/items/e3565d889ebe7b078748)



## グローバルCSSファイルの作成
`nuxt.confif.js`のCSSプロパティにグローバルで読み込むCSSファイルを指定する。`sass`や`scss`なども使えます。
[Nuxt公式 - API: css プロパティ](https://ja.nuxtjs.org/api/configuration-css/)

```nuxt.confif.js

export default {
  css: [
    '@/assets/style/global',
  ],
}
```




## ESLint＆Prettierの設定
コードスタイルのチェックは複雑なので参考リンクだけ記載します。
[Qiita - Vue/NuxtでESLintを活用(ひとまず導入編)](https://qiita.com/fj_yohei/items/16f48237c401219c460b)
[Qiita - nuxt.js(v2)のインストール〜ESLint設定まで](https://qiita.com/amishiro/items/9cd8007d46f91c8b5da2)

## 環境変数の設定
AxiosのベースURLの設定など環境周りの設定値を`.env`ファイルで管理したい際に、[Nuxtのdotenv](https://github.com/nuxt-community/dotenv-module)を使って環境まわりの固定値設定用ファイルを利用した。

[Qiita Nuxt.jsにおけるenvファイルの利用(初学者向けハンズオン)](https://qiita.com/fj_yohei/items/c77bff6f0177b4ff219e)

`Context`に`isDev`プロパティを使って開発と本番で判定が可能。
[Nuxt公式 - API: コンテキスト](https://ja.nuxtjs.org/api/context/)

## Vuexのローカルストレージ化
Vuexで保持している値はページに保持しているだけなのでリロードによってクリアされますが、永続化したい場合には`vuex-persistedstate`を利用します。
指定したストアのデータをセッションストレージやローカルストレージに保持します。設定を行えば通常のVuexと同じように使うことができます。

参考[Qiita - nuxt.jsを使う時にlocalStorageでstoreを永続化する](https://qiita.com/sakapun/items/a0cf5698751ae70c8088)

```plugins/localStorage.ts
import { Context } from '@nuxt/types';
import createPersistedState from 'vuex-persistedstate';

export default ({ store }: Context) => {
  createPersistedState({
    // ストアAとBをローカルストレージに保持するし永続化
    paths: [
      'storeA',
      'storeB',
    ],
  })(store);
};

```

```nuxt.connfig.js
export default {
  plugins: [
    '@/plugins/localStorage', // プラグインに指定する
  ],
}
```



## 起動時実行ファイルの設定
アプリ起動時に走らせたい処理があったので、初期処理用のファイルを作成しました。`nuxt.config.js`の`plugins`に指定すると起動時に実行されます。

```plugins/init.ts
import Vue from 'vue';

// vue-js-modalのカスタムタグを有効化
Vue.use(VModal);

```

```nuxt.config.js
export default {
  plugins: [
    '@/plugins/init', // プラグインに指定して起動時に実行する
  ],
}
```

## Chrome拡張機能のVue.js DevToolsをインストール
ChromeのDevToolにVueのタブが表示され、Vueコンポーネントの階層やデータの参照、変更などが可能となります。Vue.jsの開発では必須です。
[Chromeウェブストア - Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?hl=ja)

## VSCode上でコードデバックの追加
VSCodeのソースコード上で付けたブレークポイントで止めるための設定です。
下記記事のVSCodeのChromeデバック用プラグインをインストールして、Webpackのソースマップを変更しました。
[【備忘録】Nuxt.jsのインストールからデバッグ環境構築まで(SPA編)]
(https://qiita.com/MasahiroBW/items/2e65ae0c46e942065390)

## Code Spell Checkerの導入とホワイトリストの作成
プロジェクト用のスペルチェックを導入して、スペルチェックを働かせます。日本語のローマ字はチェックにひっかかってしまいPROBLEMSに表示される警告が増えてしまうので、ホワイトリストを作成してチェック対象外とします。

```.vscode/settign.json
{
  "cSpell.words": [
      "okan",
      "oton",
    ]
}
```

# おわり
Nuxt.jsはVue.jsの使いやすさを残しつつ、規則に従うことでプロジェクトに一定の秩序を持たせることができるので、Vue.jsを使う際はできるだNuxtを使いたいです。

Nuxtのセールスポイント？のSSRや静的ファイルのジェネレータを使わない、シンプルなSPAだけでも使いやすいフレームワークです。