[NuxtJS]NuxtJS 入門

NuxtJS でのプロジェクトの作成方法を説明していきたいと思います。
今回は SPA ( Single Page Application )で Web アプリを作っていきたいと思います。

前提条件

node : 最新版を使用します。
npm : 最新版を使用します。

Node.js と npm は事前にインストールしておく必要があります。
Node.js のインストール方法は下の記事か本家サイトを参考にインストールしてください。

CodeLab

2017.08.24

[Node.js]Mac に Node.js をインストールする

https://codelab.website/mac-nodejs-install

AngularJS の勉強してみようと思って、環境構築の方法を調べてたら、 Node.js をインストールする必要があるみたいなので、実際にインストールした時の手順をまとめました。AngularJS の環境構築には Node.js の他に npm の設定なども必要ですが、 npm の設定方法については、また別の機会に説明したいと思います。環境について今回、 Node.js をインストールした環境は下記の通りです。macOS Sierra 10.12.6Homebrew 1.3.1Node.js とはhttps://nodejs.org/ja/JavaScript の実行環境そのものになります。PHP とか Python みたいにサー...

Node.js

Node.js

https://nodejs.org/ja/

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Node.js がインストールできたら下記のコマンドを実行して npm をインストールします。

$ npm install -g npm

NuxtJS のプロジェクトを新規に作成する

下記のコマンドを実行して NuxtJS のプロジェクトを作成します。

$ npm init nuxt-app <project-name>

するとプロジェクトの作成が開始され、色々設定を確認されるので、自身の環境に応じた設定を選択していきます。

$ create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in nuxt-sample
? Project name: (nuxt-sample) # プロジェクト名(デフォルトでOK)
? Programming language: # 今回はTypeScriptを選択します
  JavaScript
❯ TypeScript
? Package manager: # パッケージマネージャーはNpmを選択
  Yarn
❯ Npm
? UI framework: # UIフレームワークはVuetify.jsを今回は選択しました
  None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Oruga
  Primevue
  Tachyons
  Tailwind CSS
  Windi CSS
  Vant
  View UI
❯ Vuetify.js
? Nuxt.js modules: # 今回はAxiosとPWAモジュールを有効にします
 ◉ Axios - Promise based HTTP client
❯◉ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS
? Linting tools: # あくまでサンプルなのでESLint,Prettierのみ選択しておきます
 ◉ ESLint
❯◉ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint
? Testing framework: # テスティングフレームワークはJestを選択
  None
❯ Jest
  AVA
  WebdriverIO
  Nightwatch
? Rendering mode: # 今回はSingle Page Appを選択します
  Universal (SSR / SSG)
❯ Single Page App
? Deployment target: # Staticを選択します
  Server (Node.js hosting)
❯ Static (Static/Jamstack hosting)
? Development tools: # とりあえずjsconfig.jsonだけ選択しておきます
❯◉ jsconfig.json (Recommended for VS Code if you are not using typescript)
 ◯ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)
? Continuous integration: # CIツールはGithub Actionsを選択
  None
❯ GitHub Actions (GitHub only)
  Travis CI
  CircleCI
? What is your GitHub username? (ユーザ名)
# ユーザ名を確認されるので表示されているユーザ名で問題なければそのままEnter、違うユーザを使用したい場合はユーザ名を入力する
? Version control system: (Use arrow keys) # Gitを選択します
❯ Git
  None

プロジェクト作成時に設定した内容は後から変更可能です。自分の開発にあわせた設定を選択しプロジェクトを作成すれば良いです。

🎉  Successfully created project nuxt-sample

  To get started:

    cd nuxt-sample
    npm run dev

  To build & start for production:

    cd nuxt-sample
    npm run build
    npm run start

  To test:

    cd nuxt-sample
    npm run test

  For TypeScript users.

  See : https://typescript.nuxtjs.org/cookbook/components/

こんな感じのメッセージが表示されればプロジェクトの作成に成功しています。

動作確認してみる

下記のコマンドを実行すれば始められるみたいです。

To get started:

  cd nuxt-sample
  npm run dev

コマンド実行してみます。

# 作成したプロジェクト名のディレクトリに移動
$ cd nuxt-sample

# 実行！！
$ npm run dev

するとこんな感じで実行されます。

> nuxt-sample@1.0.0 dev /Users/koichiezato/Projects/nuxt/nuxt-sample
> nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                                                                                                                 17:26:57
ℹ Initial build may take a while                                                                                                                                                                                                                                                                                    17:26:57
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                                                                                                                                                                 17:26:57
✔ Builder initialized                                                                                                                                                                                                                                                                                               17:26:57
✔ Nuxt files generated                                                                                                                                                                                                                                                                                              17:26:57

✔ Client
  Compiled successfully in 6.35s

No issues found.                                                                                                                                                                                                                                                                                                    17:27:04
ℹ Waiting for file changes                                                                                                                                                                                                                                                                                          17:27:04
ℹ Memory usage: 410 MB (RSS: 2.52 GB)                                                                                                                                                                                                                                                                               17:27:04
ℹ Listening on: http://localhost:3000/                                                                                                                                                                                                                                                                              17:27:04

この状態で「 http://localhost:3000/ 」へアクセスします。