Nuxt.js 自習 1日目「create nuxt-app」

サーバーサイドVueフレームワーク、Nuxt.jsの自習1日目。

セットアップ

インストール

・node.jsの最新のLTS版をインストールします。

Node.js

・yarnをインストールします。

Installation | Yarn

インストール

create-nuxt-appコマンドでプロジェクトをインストールします。

create-nuxt-app/README.md at master 揃 nuxt/create-nuxt-app

yarn create nuxt-app <project-name>

インストールオプション

Nuxt.js modules

・Axios モジュール
　HTTPクライアントのaxiosモジュールをインストールできます。

・PWA
　Progressive Web Apps 用のnuxt/pwaをインストールできます。

・Content
　Markdownファイルなどをデータとして利用できるヘッドレスCMSのnuxt/contentモジュールをインストールできます。

プロジェクトディレクトリに移動して、yarn dev します。

cd <project-name>
yarn dev

パッケージが不足している場合は、コンソールに表示された通りに適宜インストールします。

例えば、json5パッケージのインストールは、プロジェクトのディレクトリにて、npm install json5 を実行します。

json5

ブラウザで localhost://3000 に接続します。

Nuxt.jsの初期画面が表示されます。

参考

Nuxt.js - ユニバーサル Vue.js アプリケーション

Vuetify — A Material Design Framework for Vue.js

Home

学び方

Nuxt.jsの概要 https://nuxtjs.org/docs/2.x/get-started/installation

ディレクトリ構成 https://nuxtjs.org/docs/2.x/directory-structure/nuxt