画像




Nuxt.jsの環境構築をするメモ。




普段SPAを開発する時はRiot.jsで構築してるのですが、他にもJSフレームワークが使えると開発の幅が広がると思ったのでVue.jsを試してみることにしました。

Nuxt.jsを利用すると開発時に便利そうなので、まずはNuxt.jsで環境構築してみたいと思います。




今回は、node v10.0.0 / npm v6.0.0のバージョンでインストール

画像




はじめに、Vue.jsのコマンドラインツール「vue-cli」をインストール


npm install -g @vue/cli-init


画像




今回は、テンプレートから「sample_prj」というプロジェクトを作成


vue init nuxt-community/starter-template sample_prj


画像




作成したプロジェクトディレクトリに移動して、各モジュールをインストール


cd sample_prj
npm install


画像




ディレクトリ構成

画像




準備ができたので、サーバーを起動


npm run dev


画像




http://localhost:3000」にアクセスしプロジェクトページが表示されればOK

画像




最近のフロントエンド開発って環境構築だけで疲弊するのですが、Nuxt.jsについては思っていた以上にさくっと環境構築が完了しました。次は、ディレクトリ構成を少しみてみようと思います。







Q&A