"BOKU"のITな日常

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

Nvm・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

でも、直接インストールすると、後でバージョンアップとかで手間がかかりました。

なので、バージョン管理ツールを使ったインストールを行います。

バージョン管理ツール「nvm-windows」はこちらのサイトからダウンロードします。

github.com

nvm-setup.zipです。

これを解凍して、インストーラ「nvm-setup.exe」を動かします。

インストールできたら、CMDでも立ち上げて以下を実行します。

nvm list available

そうすると、以下のように利用可能なバージョンがリストされます。

f:id:arakan_no_boku:20190828231509p:plain

利用するのは「LTS(Long Term Support)」です。

上記だと「10.16.3」が最新なので、それをインストールします。

nvm install 10.16.3

f:id:arakan_no_boku:20190828231841p:plain

インストールできたら、上記のメッセージ通り、

nvm use 10.16.3

を実行します。

これで、以下のコマンドが使えるようになっているはずです。

ためしに実行しておきます。

  • 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 

いろいろ、オプションを聞いてきます。

バージョンによって質問してくる内容や順番は違うみたいです。

なので、あくまで参考ベースですが、今回の入力内容を書いておきます。

もし、自己流チュートリアルを続けてみていただけるなら、あわせておいてもらうほうがやりやすいと思います。

さて。

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

? Project name

上記の場合だと「demop」ですね。

description(説明)を入れろと言ってきます。

? Project description

これは適当に「My first nuxt project」とでもいれてEnterします。

Auther(作者)も適当に名前をいれます。

? Author name

この辺までは適当でも問題ないです。

このへんから、あわせてインストールするライブラリ・フレームワークなどをきいてきます。

arakan-pgm-ai.hatenablog.com

以下、自分が今回選んだものだけをあげていきますが、もう少し説明が必要な場合は上記の記事も参考にしてください。

カスタムサーバーフレームワークを選ぶように効いてきます。

? Choose custom server framework

今回は「none」にしています。

サーバーサイドフレームワークは、簡単に言えば、Node.jsでWeb-Apiとかを効率的に開発したりするのに役にたつものなのですが、自分は使いません。

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

? Choose Nuxt.js modules

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

Axiosは必須です。

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

? Choose UI framework

矢印キーで選びます。

自分は「buefy」にしました。

理由は、Vue.jsとの親和性が高く、自分の好みだからです。

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

? Choose test framework

自分は「ava」を選んでます。

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

? Choose rendering mode

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

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

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

パッケージマネージャーです。

? Choose the package

自分は「npm」にしています。

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

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

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

f:id:arakan_no_boku:20190508225506p:plain

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

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

カレントディレクトリにプロジェクト名のフォルダができているので、そこにCDします。

今回の場合なら「 cd demop」ですね。

そのうえで以下のコマンドをうちます。

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

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

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

ではでは。