ばーろぐわにる

SIerからWEB系？インフラエンジニアにジョブチェンジした見習いの備忘録。投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。

Nuxt.jsをインストールしてつかってみる

Nuxt.js

Nuxt.jsとは

  • Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。
    • 本文ママ

何が嬉しい？

  • クライアントサイド、サーバサイドのディストリビューションを抽象化する
  • SPA(Single Page Application)をささっと作れる
  • 静的に生成されたVueアプリケーションが作れる

インストール

GitHubを参考にすすめたらHello worldまで出た。

Nuxt.js公式サイトをもとに雛形アプリケーションのインストールを進めてみる

create-nuxt-app

Nuxt.jsの雛形アプリケーションを秒で作ってくれる

https://github.com/nuxt/create-nuxt-app

$ npx create-nuxt-app mytest

npx はローカルにインストールしたNode.jsのパッケージを簡単に実行してくれる。Node.jsほとんど使ったことないけどこれ使わないとパッケージを実行するのはめんどくさいらしい。また、ローカルにインストールしてないパッケージもダウンロードして実行できる。コマンド実行後にダウンロードしたパッケージは自動で削除されるらしい。ここに詳しく書いてある

あとは使いたいServer Framework, UI Frameworkなどを聞かれるのでポチポチすすめる。恥ずかしながらほとんど初めて聞く名前でしたもっと勉強します。axiosっても初めて聞いた。

npm run dev

そんなこんなでインストールが終わったら、サンプルプロジェクトを起動。

$ cd ./mytest
$ npm run dev

まず npm run ってなんなんだろうと思って調べたらわかりやすい説明がこちら。

npm run dev でpackage.json で定義されたスクリプト(コマンド)である dev が実行される

package.json の中身をみてみるとこんな感じ

$ grep dev ./package.json
     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",

cross-env はクロスプラットフォームで環境変数を設定できるツール。これでWindowsだろうとLinuxだろうと同じコマンドで環境変数を設定してくれる。

環境変数を設定した後、nodemonってやつが呼び出されてる。こいつはアプリケーション内の変更を検知すると自動でNode.jsを再起動してくれる。Gracefull Shutdownもできるらしい。

nodemonは通常カレントディレクトリしか見ないが、 —watch オプションで監視対象を追加できる。このオプションで追加したディレクトリのサブディレクトリまで再帰的に監視してくれるので —watch ./lib/* とか記載しなくていい。というか記載したらうまく動かないとのこと。

テストページが起動したのでアクセスしたらこんな感じ

f:id:oneal-desu:20181230175207p:plain

感想

フロントエンドの知識が皆無ということがばれる。Nuxt.jsってここが便利だわー！とか言える状況じゃなかった。勉強して出直します。

メモ