nuxtプロジェクトの作成セットアップ

## 何をしたか
nuxtのプロジェクトを立ち上げる時に毎回一々調べてから同じようなことをしているため、自分用のマニュアルとして書きました。

## 手順

1.　下記にある`setup_nuxt.sh`を実行

https://github.com/lakesizebyter/setup_scripts

2.　大体バックエンド側でrailsも立ち上げるため、`nuxt.config.ts`でportを4000に設定

```:nuxt.config.ts
server: {
  port: 4000
}
```

3.　`src`ディレクトリを作成し、その配下に諸々のディレクトリを移動

4.　`nuxt.config.ts`に下記を追加

```:nuxt.config.ts
srcDir: 'src/',
```

5.　`tsconfig.json`を修正

```diff_json:tsconfig.json
"paths": {
  "~/*": [
-   "./*"
+   "./src/*"
  ],
  "@/*": [
-   "./*"
+   "./src/*"
  ]
},
```

6.　`assets/scss`配下に下記2つを追加

```scss:_mixins.scss
@mixin large {
  @media screen and (min-width: 600px) { @content; }
}

@mixin small {
  @media screen and (max-width: 599px) { @content; }
}

@mixin inner {
  margin: 0 auto;
  width: 100%;
  padding: 0 16px;

  @include large {
    width: 600px;
  }
}
```

```scss:_colores.scss
$bg-color: #f6f6f4;
$border-gray: #dcdcdc;
```

7.　`nuxt.config.ts`で3の2つのファイルを読み込む

```js:nuxt.config.ts
modules: [
  '@nuxtjs/style-resources'
],
︙
styleResources: {
  scss: [
    '~/assets/scss/_mixins.scss',
    '~/assets/scss/_colores.scss'
  ]
}
```

8.　`Header.vue`を追加

```vue:Header.vue
<template lang="pug">
  header.header
    .header__inner
      p ヘッダー
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component
export default class Header extends Vue {}
</script>

<style scoped lang="scss">
.header {
  height: 56px;
  border-bottom: 1px solid $border-gray;
  box-shadow: 0 0 2px $border-gray;

  &__inner {
    @include inner;

    height: 100%;
    display: flex;
    align-items: center;
  }
}
</style>
```

9.　`Footer.vue`を追加

```vue:Footer.vue
<template lang="pug">
  footer.footer
    .footer__inner
      p.footer__copyright © 2021 フッター
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component
export default class Footer extends Vue {}
</script>

<style lang="scss" scoped>
.footer {
  height: 56px;
  border-top: 1px solid #dddddd;
  box-shadow: 0 0 2px #ddd;

  &__inner {
    @include inner;

    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  &__copyright {
    margin: 0;
  }
}
</style>
```

10.　`layout/default.vue`を修正

```vue:default.vue
<template lang="pug">
  div
    Header
    #wrapper
      .container
        Nuxt
    Footer
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import Header from '@/components/header/Header.vue'
import Footer from '@/components/footer/Footer.vue'

@Component({
  components: {
    Header,
    Footer
  }
})
export default class DefaultLayout extends Vue {}
</script>

<style lang="scss">
html {
  font-family:
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

p {
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

#wrapper {
  background-color: $bg-color;
}

.container {
  @include inner;

  padding-top: 64px;
  padding-bottom: 64px;
  background-color: #ffffff;
}

#wrapper,
.container {
  min-height: calc(100vh - 56px * 2);
}
</style>
```