Nuxt.jsで新規プロジェクトのlocalhost:3000にアクセスするまでの手順[pug][sass][fontawesome][googlefonts][normalize]

私がいつもNuxt.jsでプロジェクトを作るときの初期設定の手順がだんだん固定化されてきたので、まとめてみました。
pug,sass,fontawesome,googlefontsに加えて、normalize.scssも入った、個人的全部入りです。
自分でも使っていくつもりなので、更新されることもあるかと思います。

# 環境

- Mojave 10.14.3（18D109）
- node.js v10.11.0
- yarn 1.10.1

# 手順

##1. nuxt.jsでプロジェクト作成

```sh
$ yarn create nuxt-app test_nuxt_app
```

```test_nuxt_app``` の部分には自分のプロジェクトの名前を入れて、適宜読み替えてください。
色々と設定項目出てきますが、とりあえずこんな感じにしておきます。
![スクリーンショット 2019-03-24 11.01.42.png](https://qiita-image-store.s3.amazonaws.com/0/131949/76093bc1-05e8-0719-02ca-4117adb0edd2.png)

実はこれでプロジェクト自体は完成です。
コマンド実行したディレクトリに ```test_nuxt_app``` という名前のディレクトリがあるので、移動して、サーバを起動させてみます。

```sh
$ cd test_nuxt_app
$ yarn dev
```

![スクリーンショット 2019-03-24 11.18.41.png](https://qiita-image-store.s3.amazonaws.com/0/131949/08d8e50a-94a4-1b09-1fc7-6a9946e8970c.png)

起動するとターミナル上ではこんな感じです。
powerlineとかアイコンフォントとか、色々ツッコミどころはありますが、とにかく当初の目的である、 ```localhost:3000``` にブラウザからアクセスしてみましょう。
ちなみに、2019年3月24日現在ではnuxt.jsの最新バージョンは2.5.1のようです。

![FireShot Capture 005 - test_nuxt_app - localhost.png](https://qiita-image-store.s3.amazonaws.com/0/131949/110e0c1e-59dd-d994-a34f-e8f5ac6bffda.png)

簡単ですね。

##2. git管理
余談です。
ここまでのプロジェクトをgitでリポジトリを作って管理しましょう。
新しく[ShoutaWATANABE/nuxt_test_app](https://github.com/ShoutaWATANABE/nuxt_test_app)というリポジトリを作りました。
ここにコミット・プッシュします。

```sh
$ git add -A
$ git commit -m "[add] yarn devまで"
$ git remote add origin https://github.com/ShoutaWATANABE/nuxt_test_app.git
$ git push -u origin master
```
これで完了です。
![FireShot Capture 006 - ShoutaWATANABE_nuxt_test_app - github.com.png](https://qiita-image-store.s3.amazonaws.com/0/131949/643b861a-efa0-6b05-e996-86bf010ae2f0.png)


##3. 各種パッケージのインストール
さて、本番はこれからです。
以下のコマンドでまとめてパッケージをインストールします。

```sh
$ yarn add -D pug@2.0.3 pug-plain-loader node-sass sass-loader @nuxtjs/style-resources
$ yarn add nuxt-webfontloader nuxt-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
```

インストールが無事に完了したら、 ```nuxt.config.js``` を以下のように編集します。
※デフォルトコメントアウトは除外してあります。

```js:nuxt.config.js
import pkg from './package'

export default {
  mode: 'universal',
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  loading: { color: '#fff' },
  css: [{ src: '~/assets/scss/_normalize.scss', lang: 'scss' }], //normalize
  plugins: [{ src: '~/plugins/global-components.js', ssr: true }], //コンポーネントを一括読み込み
  modules: [
    ['nuxt-webfontloader'], //googlefonts
    'nuxt-fontawesome', //fontawesome
    '@nuxtjs/style-resources', //共通スタイルシート読み込み
    '@nuxtjs/axios',
    '@nuxtjs/pwa'
  ],
  webfontloader: { //googlefonts
    google: {
      families: ['Josefin+Sans']
    }
  }, //googlefontsここまで
  fontawesome: { //fontawesome
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['fas']
      },
      {
        set: '@fortawesome/free-brands-svg-icons',
        icons: ['fab']
      }
    ]
  }, //fontawesomeここまで
  axios: {
  },
  build: {
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}
```
##4. 各種ファイルの作成・編集
インストールしたパッケージが使えるように、それぞれ関係するファイルの作成・編集をします。

### pages/index.vue
```vue:pages/index.vue
<template lang="pug">
  section.container
    div
      logo
      h1.title test_nuxt_app
      h2.subtitle My transcendent Nuxt.js project
      .links
        a.button--green(
          href="https://nuxtjs.org/"
          target="_blank"
        ) Documentation
        a.button--grey(
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
        )
          font-awesome-icon(:icon="['fab', 'github']")
          |GitHub
</template>

<style lang="scss" scoped>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Josefin Sans', 'Quicksand', 'Source Sans Pro', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>
```
### plugins/global-components.js
```js:plugins/global-components.js
import Vue from 'vue'

import Logo from '~/components/Logo.vue'

Vue.component('Logo', Logo)
```
### assets/scss/_normalize.scss

```scss:assets/scss/_nomalize.scss
html {
  -webkit-text-size-adjust: 100%;
  overflow: auto;
  height: 100%;
  font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.8;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

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

サーバを再起動して、ブラウザの画面を確認してみましょう。
![FireShot Capture 008 - test_nuxt_app - localhost.png](https://qiita-image-store.s3.amazonaws.com/0/131949/7f8889d6-b2d0-f77c-6ffc-88517db6d19a.png)

タイトルのフォントが変わって、line-heightも広くなっています。
logoのコンポーネントはindex.vueでは読み込みを明記していませんが、しっかりグローバルコンポーネントとして読み込まれています。
また、githubへのリンクにfontawesomeのアイコンフォントを追記したものも、きちんと表示されていますね。

![スクリーンショット 2019-03-24 12.42.20.png](https://qiita-image-store.s3.amazonaws.com/0/131949/d16e72b2-b0a0-d9c8-dad7-8005394a6b75.png)