目次
- はじめに
- Nuxt.js(Vue.js)を開発・実行確認できる環境構築
- 1.バージョン管理ツールのインストール
- 2.Node.jsのインストール・設定
- 3.Nuxt.jsの開発プロジェクトを生成
- とりあえず動かしてみる
はじめに
リライトで、目次を追加しました。
内容は2019年5月当時のまま変更しておりません。
Nuxt.js(Vue.js)を開発・実行確認できる環境構築
Nuxt.js(Vue.js)を、Windows10にインストールして使える環境を作ります。
まずは、必要なフレームワーク等をインストールします。
Nuxt.jsを動かすには、Node.jsが必要です。
Node.jsをインストールするには、バージョン管理ツールが必要です。
そのため、手順は以下になります。
- バージョン管理ツールのインストール
- Node.jsのインストール・設定
- Nuxt.jsの開発プロジェクトを生成
1.バージョン管理ツールのインストール
Node.jsはダウンロードして、直接インストールすることもできます。
でも、直接インストールは後でバージョンアップとかで手間がかかるので、バージョン管理ツールを使ったインストールを行います。
バージョン管理ツール「nvm-windows」はこちらのサイトからダウンロードします。
nvm-setup.zipです。
これを解凍して、インストーラ「nvm-setup.exe」を動かします。
2.Node.jsのインストール・設定
nvmがインストールできたら、CMDでも立ち上げて以下を実行します。
nvm list available
そうすると、以下のように利用可能なバージョンがリストされます。
利用するのは「LTS(Long Term Support)」です。
上記だと「10.16.3」が最新なので、それをインストールします。
nvm install 10.16.3
インストールできたら、上記のメッセージ通り、
nvm use 10.16.3
を実行します。
これで、以下のコマンドが使えるようになっているはずです。
ためしに実行しておきます。
- node --version
- npm
- npx
Not foundでなければOKです。
3.Nuxt.jsの開発プロジェクトを生成
次はNuxt.jsです。
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を使ってインストールが行われます。
しばらくすると以下の画面になって終了です。
実行の仕方を教えてくれてるあたり、気が利いてます。
とりあえず動かしてみる
早速、「To get started」の手順をやってみます。
カレントディレクトリにプロジェクト名のフォルダができているので、そこにCDします。
今回の場合なら「 cd demop」ですね。
そのうえで以下のコマンドをうちます。
npm run dev
すると、クライアントサイドのコンパイルが動いて、以下の画面になります。
書いてあるとおり、http://localhost:3000/ にアクセスします。
おおーー。
環境はちゃんとできたみたいですね。
しかも、結構凝った初期画面です。
確認できたので、一旦「Ctrl+C」で先ほどの画面を終わらせておきます。
ちなみに、エクスプローラで、「C:\01demos\00_nuxt\demop」フォルダを見ると。
しっかり、フォルダとファイルがはいってます。
インストールはできました。
ではでは。