雑なメモ書き

気楽にいきます

nuxtjsの入門メモ

nuxtjsが気になったので適当にいじったメモ。本当に入門してるだけ。 後で buld編は書く予定。

インストール

npx create-nuxt-app sample

全部defaultで解答していった

? Project name sample
? Project description My classy Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name hiroyukim
? Choose a package manager npm

成功したらしい。

  To get started:

    cd sample
    npm run dev

  To build & start for production:

    cd sample
    npm run build
    npm start

ディレクトリ直下は以下の様になっている

├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
├── plugins
├── static
└── store

開発サーバーの立ち上げ

とりあえず、立ち上げる

npm run dev
ℹ Preparing project for development                                                                                                                13:28:09
ℹ Initial build may take a while                                                                                                                   13:28:09
✔ Builder initialized                                                                                                                              13:28:09
✔ Nuxt files generated                                                                                                                             13:28:09

✔ Client
  Compiled successfully in 8.65s

✔ Server
  Compiled successfully in 7.59s

ℹ Waiting for file changes                                                                                                                         13:28:22

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.3.4                            │
   │   Running in development mode (universal)   │
   │   Memory usage: 129 MB (RSS: 223 MB)        │
   │                                             │
   │   Listening on: http://localhost:3000       │
   │                                             │
   ╰─────────────────────────────────────────────╯

構造

assets

LESS や SASS、JavaScript のようなコンパイルされていないファイル

> tree assets
assets
└── README.md

components

Vue.js のコンポーネントファイル

> tree components
components
├── Logo.vue
└── README.md

0 directories, 2 files

layouts

アプリケーションのレイアウトファイル

> tree layouts
layouts
├── README.md
└── default.vue

0 directories, 2 files

このテンプレートに従ってlayoutしていると考えられる

<template>
  <div>
    <nuxt/>
  </div>
</template>

middleware

アプリケーションのミドルウェア。現状はないからREADMEだけ。

> tree middleware
middleware
└── README.md

0 directories, 1 file

pages

アプリケーションのビュー及びルーティングファイル

> tree pages
pages
├── README.md
└── index.vue

0 directories, 2 files

templateとscriptがindex.vueのキモだと思われる

<template>
  <section class="container">
    <div>
      <logo/>
      <h1 class="title">
        sample
      </h1>
      <h2 class="subtitle">
        My classy Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
    </div>
  </section>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

設定

  • nuxt.config.js
  • このファイルにある設定を書き換えると色々出来るぽい