フルスクラッチでnuxtの環境構築していろいろ動かすまでの道のり

プロジェクトファイルを作成する

$ mkdir my-app
cd my-app

package.json を作成する

つくったプロジェクトファイル配下に、下記ファイルを作成する。

package.json

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

nuxtのパッケージインストールする

$ npm install --save nuxt

nuxtのいろんなパッケージがインストールされます。package.jsonにもnuxtのバージョンなどが追記されます。

$ cat package.json
{
  "name": "cto.ac",
  "scripts": {
    "dev": "nuxt"
  },
  "dependencies": {
    "nuxt": "^2.1.0"
  }
}

シンプルなvueファイルを作成してみる

myapp/pages/index.vueを作成します。

$ mkdir pages
$ touch pages/index.vue

index.vue

<template>
  <h1>my-app</h1>
</template>

ブラウザで確認する

$ npm run dev

http://127.0.0.1:3000/ にアクセスすると表示されます。

vueファイルを2つつくって遷移させてみる

index.vueを修正して、さらにこのindex.vueをコピーしてabout.vueファイルを作成します。

pages/index.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <nuxt-link to="/about">about</nuxt-link>
  </div>
</template>

<script>
export default {
  asyncData() {
    return {
      title: 'My app'
    }
  }
}
</script>

pages/about.vue

<template>
  <div>
  <h1>{{ title }}</h1>
  <nuxt-link to="/">top</nuxt-link>
  </div>
</template>

<script>
export default {
  asyncData() {
    return {
      title: 'about'
    }
  }
}
</script>

これで、 http://127.0.0.1:3000/ と http://127.0.0.1:3000/about を行き来できます。

nuxt.config.jsファイルは必要かどうか？

設定 - Nuxt.jsによれば、

Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしていますが nuxt.config.js で設定を上書きすることができます。

とあります。デフォルトの設定を上書きしたり追記するときに作ればいいでしょう。