前のパートに戻る 完了して次のパートへ  

  1-2 welcom ページを表示してみよう

この章では Nuxt アプリケーションを開発者モードで起動し、ブラウザで welcome ページを表示します。

開発モードで起動する


先程設定したアプリケーションの名前のディレクトリが出来ていると思うので、そのディレクトリに移動します。

$ cd chat

アプリケーション配下に移動したら、次のコマンドを実行してください。

$ npm run dev
% npm run dev                                                                                                                           [~/git/work/tech-pit/test/chat][master]

> [email protected] dev /Users/frostnday/git/work/tech-pit/test/chat
> nuxt

✔ ~/tailwind.config.js created                                                                                                                       nuxt:tailwindcss 02:01:10
✔ ~/assets/css/tailwind.css created                                                                                                                  nuxt:tailwindcss 02:01:10

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

ℹ Preparing project for development                                                                                                                                   02:01:12
ℹ Initial build may take a while                                                                                                                                      02:01:12
✔ Builder initialized                                                                                                                                                 02:01:13
✔ Nuxt files generated                                                                                                                                                02:01:13

✔ Client
  Compiled successfully in 15.39s

ℹ Waiting for file changes                                                                                                                                            02:01:31
ℹ Memory usage: 324 MB (RSS: 399 MB)                                                                                                                                  02:01:31
ℹ Listening on: http://localhost:3000/

ビルドに成功するとhttp://localhost:3000/で起動します。早速ブラウザで確認してみましょう。

このような welcome ページが表示されていれば OK です。

npm run dev を実行している場合は、ソースコードを変更したら自動で build 処理が走り、変更点を反映してくれます。 うまく反映されない場合などは、 ctl + c で一旦止めてもう一度 npm run dev で最初から build を行うと良いでしょう。

以上で今回のパートは終了です。

お疲れ様でした。

議論

0 質問

このコースの評価は?