Nuxt.jsのディレクトリ構造が気に食わない！

`npx create-nuxt-app nuxt-sample`のようにNuxtプロジェクトを生成すると、

```shell
$ ll -a
total 738
drwxr-xr-x 1 user 1049089      0 Aug 11 15:19 ./
drwxr-xr-x 1 user 1049089      0 Aug 11 15:14 ../
-rw-r--r-- 1 user 1049089    207 Aug 11 15:14 .editorconfig
drwxr-xr-x 1 user 1049089      0 Aug 11 15:14 .git/
-rw-r--r-- 1 user 1049089   1253 Aug 11 15:14 .gitignore
-rw-r--r-- 1 user 1049089   2789 Aug 11 15:14 README.md
drwxr-xr-x 1 user 1049089      0 Aug 11 15:14 components/
drwxr-xr-x 1 user 1049089      0 Aug 11 15:19 node_modules/
-rw-r--r-- 1 user 1049089   1201 Aug 11 15:14 nuxt.config.js
-rw-r--r-- 1 user 1049089 462662 Aug 11 15:19 package-lock.json
-rw-r--r-- 1 user 1049089    389 Aug 11 15:19 package.json
drwxr-xr-x 1 user 1049089      0 Aug 11 15:14 pages/
drwxr-xr-x 1 user 1049089      0 Aug 11 15:14 static/
drwxr-xr-x 1 user 1049089      0 Aug 11 15:14 store/
-rw-r--r-- 1 user 1049089    604 Aug 11 15:14 tsconfig.json
```

のように、プロジェクトルート直下に各ディレクトリが生成されます。
だた、これだと`dist`とか`.nuxt`、`node_modules`等のディレクトリと同じ階層になってしまって個人的にはすごい気持ち悪いので、nuxt-sample/src/のような構造にして、ビルド対象ファイルはその中に移動したいと思います。

# nuxt.config.jsの修正

公式リファレンスでソースディレクトリの場所を変更する方法が記載されているので、nuxt.config.jsにsrcDirで指定します。
https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-srcdir

```nuxt.config.js
import { resolve } from 'path';

export default {
  ・・・
  srcDir: 'src/',
};
```

これだけです。
あとはビルド対象のディレクトリ(componentsやpages等)をsrcに移動してやれば完了です！



# パスの修正

srcに移動するだけであれば上記で完了なのですが、このままだとimportの際のパスが`~/src/～`のようにsrcをつけないといけないので、パスの変更もしておきます

- nuxt.config.jsでエイリアスの設定

```nuxt.config.js
import { resolve } from 'path';

export default {
  ・・・
  srcDir: 'src/',
  alias: {
    '~/*': resolve(__dirname, 'src/*'),
  },
};
```


- tsconfig.jsonでパスの解決

```tsconfig.json
{
  "compilerOptions": {
    ・・・
    "paths": {
      "~/*": ["./src/*"]
    },
  ・・・
```

この辺のパスの解決については以前記事を書いたのでそちらをご参照ください

https://qiita.com/teracy55/items/1ac26626e88879f7a8a1



# 対応後のディレクトリ構造

- プロジェクトルートは以下のようになります
  - プロジェクト全体の構成や出力関連だけになってスッキリしてます

```shell
$ ll -a
total 751
drwxr-xr-x 1 user 1049089      0 Aug 11 15:59 ./
drwxr-xr-x 1 user 1049089      0 Aug 11 15:47 ../
-rw-r--r-- 1 user 1049089    207 Aug 11 15:47 .editorconfig
drwxr-xr-x 1 user 1049089      0 Aug 11 15:47 .git/
-rw-r--r-- 1 user 1049089   1253 Aug 11 15:47 .gitignore
drwxr-xr-x 1 user 1049089      0 Aug 11 15:59 .nuxt/
-rw-r--r-- 1 user 1049089     43 Aug 11 15:47 .prettierrc
-rw-r--r-- 1 user 1049089   2796 Aug 11 15:47 README.md
drwxr-xr-x 1 user 1049089      0 Aug 11 15:59 node_modules/
-rw-r--r-- 1 user 1049089   1393 Aug 11 15:59 nuxt.config.js
-rw-r--r-- 1 user 1049089 467032 Aug 11 15:52 package-lock.json
-rw-r--r-- 1 user 1049089    491 Aug 11 15:52 package.json
drwxr-xr-x 1 user 1049089      0 Aug 11 15:58 src/
-rw-r--r-- 1 user 1049089    516 Aug 11 15:58 tsconfig.json

```

- srcディレクトリ下です
  - 基本的にこの中をいじれば良いんだなというのが一目瞭然ですね。 

```shell
$ ll src -a
total 4
drwxr-xr-x 1 user 1049089 0 Aug 11 15:58 ./
drwxr-xr-x 1 user 1049089 0 Aug 11 15:59 ../
drwxr-xr-x 1 user 1049089 0 Aug 11 15:47 components/
drwxr-xr-x 1 user 1049089 0 Aug 11 15:47 pages/
drwxr-xr-x 1 user 1049089 0 Aug 11 15:47 plugins/
drwxr-xr-x 1 user 1049089 0 Aug 11 15:47 static/
drwxr-xr-x 1 user 1049089 0 Aug 11 15:47 store/
```