"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

Node.js・Nuxt.jsをWindows10にインストールして環境設定/自己流チュートリアル前準備

Nuxt.js(Vue.js)を、Windows10にインストールして使える環境を作ります。

実は、Nuxt.jsを理解するのに七転八倒した経験を踏まえて、こんなんがあったら助かったのにな・・を「自己流流チュートリアル」にまとめようと思ってたりします。

なので、今回は、それを念頭において、フレームワーク等もインストールします。

f:id:arakan_no_boku:20190508232312p:plain

 

インストール対象の説明と方針

 

Nuxt.jsを動かすには、Node.jsが必要です。

そのため、手順は以下になります。

① Node.jsのインストール・設定

② Node.jsに同梱のnpx・npmを利用してNuxt.jsをインストール・設定


Node.jsのインストール・設定 

 

まずはダウンロードです。

nodejs.org

こちらの「LTS(Long Term Support)推奨版」の方(10.15.3)を選びます。

f:id:arakan_no_boku:20190505090342p:plain

ダウンロードした.msiファイル(インストーラ)を起動して、インストールします。

Nextしてれば悩むところはないので、インストール過程は割愛します。

いちおう、Pathが通っていることを確認するために、コマンドプロンプトか、PowerShellを立ち上げて、以下のコマンドを実行しておきます。

  • node --version
  • npm
  • npx

Not foundでなければOKです。

 

Node.jsに同梱のnpx・npmを利用してNuxt.jsをインストール・設定

 

次はNuxt.jsです。 

ja.nuxtjs.org

Nuxt.jsは、一言で言えば「Vue アプリケーションを作成するフレームワーク」です。

Vue.jsをはじめ、モダンなWEB開発に必要なものがワンセットになっていて、個別に必要なものをインストール・環境設定の必要がなく、ルーティングとか非同期通信とか関連して必要な諸々の事柄のベストプラクティスがデフォルトで用意されているというところが魅力です。

 

create-nuxt-appでインストール

 

さて。

せっかくなので、さっと始められる足場ツール「 create-nuxt-app」を使います。

手順の中で、いろいろとフレームワークをどれにするか・・的な選択があります。

その選択肢にでてくるフレームワークについては別記事でまとめています。

arakan-pgm-ai.hatenablog.com

  

Step1

 

まずワーキングスペースを作ります。

適当にフォルダを作ります。

今回は「C:\01demos\00_nuxt」という名前にしてみました。

PowerShellコマンドプロンプトでもいいけど)を立ち上げて、上記をカレントフォルダにしておきます。

ツール「 create-nuxt-app」はカレントフォルダにプロジェクトを作るので、この手順はとても重要ですので、念のため。

プロジェクト名も必要なので、決めておきます。

今回は「demop」にします。

 

Step2

 

コマンドをうちこみ実行します。

npx create-nuxt-app demop 

プロジェクト名を聞いてくるので入力します。

次に description(説明)を入れろと言ってくるので、適当に「My first nuxt project」とでもいれてEnterします。

f:id:arakan_no_boku:20190508223704p:plain

次に、カスタムサーバーフレームワークを聞いてきます。

 

f:id:arakan_no_boku:20190508223955p:plain

今回は「none」にします。

サーバーサイドフレームワークは、簡単に言えば、Node.jsでWeb-Apiとかを効率的に開発したりするのに役にたつものですけど、自分はサーバーサイドはPythondjangoを使いたいと考えているので、今は不要です。

今度は今度は追加インストールするものを聞いてきます。

f:id:arakan_no_boku:20190511002750p:plain

矢印キーで動かして、スペースキーで選択します。

PWAサポートまで、今回試す範囲を広げる予定はないのでパス。

Linter/Formatter、Prettier もとりあえず、今回はパスしておきます。

Axiosは必要です。

表示用のデータを取得するのに、Web Apiを利用するつもりだからです。

次に、UIフレームワークを聞いてきます。

f:id:arakan_no_boku:20190508224835p:plain

矢印キーで選びます。

今回は「buefy」にしました。

理由は、Vue.jsとの親和性が高く、海外では高い評価をうけているように聞いたので試してみたかったからです。

次にテストフレームワークを聞いてきます。

f:id:arakan_no_boku:20190508224934p:plain

これは押さえとかないといけないので、どちらかは選んでおきたいです。

今回は「ava」を選びます。

これも自分の好みです。

どっちが優れているというようなものではなく、試してみた感触で、こちらが自分にはしっくりきたというだけの理由です。

次はレンダリングモードです。

f:id:arakan_no_boku:20190508225023p:plain

今回は「Single Page App」にします。

Universalにすると「サーバーサイドレンダリングSSR)」をしてくれます。

Single Page Appは、静的に保存するデプロイの選択肢が選べるようになります。

どっちでも良かったのですが、まず、クライアント側をきっちり押さえてから、次へ進むという段階を踏みたかったので、まずは、サーバーサイドレンダリングが動かない「Single Page App」モードを選択してます。

最後にパッケージマネージャーです。

f:id:arakan_no_boku:20190508225244p:plain

Auther nameをいれて。

パッケージマネージャは「npm」にします。

npmを選んだ理由は、自分は「yarn」みたいに「y」で始まる名前のコマンドが好きでないという好みだけの問題です。

npmを使ってインストールが行われます。

しばらくすると以下の画面になって終了です。

f:id:arakan_no_boku:20190508225506p:plain

実行の仕方を教えてくれてるあたり、気が利いてます。

早速、「To get started」の手順をやってみます。

npm run dev 

すると、クライアントサイドのコンパイルが動いて、以下の画面になります。

f:id:arakan_no_boku:20190508225845p:plain

書いてあるとおり、http://localhost:3000/ にアクセスします。

f:id:arakan_no_boku:20190508230216p:plain

おおーー。

環境はちゃんとできたみたいですね。

しかも、結構凝った初期画面です。

確認できたので、一旦「Ctrl+C」で先ほどの画面を終わらせておきます。

ちなみに、エクスプローラで、「C:\01demos\00_nuxt\demop」フォルダを見ると。

f:id:arakan_no_boku:20190508230813p:plain

しっかり、フォルダとファイルがはいってます。

インストールはできました。

ではでは。