SE_BOKUのまとめノート的ブログ

SE_BOKUが知ってること・勉強したこと・考えたことetc

Windows10でNuxt.js(Vue.js)を開発・実行確認できる環境を構築/Nvm・Node.js・Nuxt.js(Vue.js)

f:id:arakan_no_boku:20190508232312p:plain

目次

はじめに

リライトで、目次を追加しました。

内容は2019年5月当時のまま変更しておりません。

Nuxt.js(Vue.js)を開発・実行確認できる環境構築

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

まずは、必要なフレームワーク等をインストールします。

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

Node.jsをインストールするには、バージョン管理ツールが必要です。

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

  1. バージョン管理ツールのインストール 
  2. Node.jsのインストール・設定
  3. Nuxt.jsの開発プロジェクトを生成


1.バージョン管理ツールのインストール 

Node.jsはダウンロードして、直接インストールすることもできます。

nodejs.org

でも、直接インストールは後でバージョンアップとかで手間がかかるので、バージョン管理ツールを使ったインストールを行います。

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

github.com

nvm-setup.zipです。

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

 

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

nvmがインストールできたら、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です。

 

3.Nuxt.jsの開発プロジェクトを生成

次はNuxt.jsです。 

ja.nuxtjs.org

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

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

さて。

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

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

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

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

以下、自分が今回選んだものだけをあげていきます。

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

? 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」より好きだという好みだけの問題です。

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

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

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

ではでは。