初めてのNuxtプロジェクト

現在の常駐先のプロジェクトにてNuxt.jsによる開発を行うことになり、実験的にNuxtプロジェクトをインストールしてみた。
なお、この内容は公式ドキュメントを参考にしている。

Contents

Nuxt導入の手順
Nuxtプロジェクト導入
最後に

Nuxt導入の手順

Nuxtプロジェクトの導入にはコマンドで質問に答えていく形式と、package.jsonを作成してスクラッチでインストールする方法の２通りある。
今回はコマンドを使用してインストールしてみた。

yarn create nuxt-app 【App名】でインストール
いくつかの質問に回答する
立ち上げる

これだけ。笑

次からは実際のコマンドと実行結果を貼り付けていく。

Nuxtプロジェクト導入

yarn create nuxt-app 【App名】でインストール

$ yarn create nuxt-app testApp

※yarnコマンドを使用するためにはyarnのインストールが必要

yarn create v1.19.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

warning Your current version of Yarn is out of date. The latest version is "1.19.1", while you're on "1.19.0".
info To upgrade, run the following command:
$ brew upgrade yarn
success Installed "create-nuxt-app@2.11.1" with binaries:
      - create-nuxt-app
[#####################################################################] 340/340
create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in testApp

いくつかの質問に回答する

実行結果に続けてアプリ作成に必要な質問をされるので一緒に回答する。

? Project name testApp
? Project description My brilliant Nuxt.js project
? Author name Shoji miyuki
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)

Warning: name can no longer contain capital letters

🎉  Successfully created project testApp

  To get started:

	cd testApp
	yarn dev

  To build & start for production:

	cd testApp
	yarn build
	yarn start

✨  Done in 124.28s.

立ち上げる

作成されたディレクトリに移動して下記のコマンドでローカルサーバを立ち上げる。

$ cd testApp
$ npm run dev

> testApp@1.0.0 dev /Users/shojimiyuki/work/project/testApp
> nuxt


   ╭──────────────────────────────────────────╮
   │                                          │
   │   Nuxt.js v2.10.2                        │
   │   Running in development mode (spa)      │
   │                                          │
   │   Listening on: http://localhost:3000/   │
   │                                          │
   ╰──────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                                 11:45:12
ℹ Initial build may take a while                                                                                                                                                                                                    11:45:12
✔ Builder initialized                                                                                                                                                                                                               11:45:12
✔ Nuxt files generated                                                                                                                                                                                                              11:45:12

✔ Client
  Compiled successfully in 2.67s

ℹ Waiting for file changes                                                                                                                                                                                                          11:45:16
ℹ Memory usage: 189 MB (RSS: 266 MB)                                                                                                                                                                                                11:45:16

ここでhttp://localhost:3000にアクセスするとこんな画面に！

ローカルサーバを落としたい時はcontrol + CでキャンセルすればOK。

最後に

とても適当な駆け足で書いていったが、アプリを作成して立ち上げるのはとても簡単ということが分かる。
あとはディレクトリの構造や基本文法など、これから学習していくのでまた知識がついたら備忘録として残しておく。