ブログ構築 2. 開発環境にNuxt.jsを立ち上げる #02
2019年10月12日に更新

Nuxt.jsのプロジェクトを作成する

この記事では

Nuxt.jsを公式サイトにそってインストールしていきます。

インストール - Nuxt.js

それではターミナルに移動して、コマンドを実行していきましょう。

Nuxt.jsのインストール

cd コマンドで自分のプロジェクト管理ディレクトリに移動しましょう。

$ cd Desktop/nuxt_app

yarn create コマンドを使えるようにする

まず、yarn global に create-nuxt-appをインストールします。

$ yarn global add create-nuxt-app

もし下記のようなエラーが出たらこの記事を参考にしてみてください。
yarnコマンドエラー対応 An unexpected error occurred: "https://registry.yarnpkg.com/flatmap-stream/-/flatmap-stream-0.1.2.tgz: Request failed “404 Not Found”

Nuxtプロジェクトの作成

プロジェクトを作成していきます。「frontend」の部分は自身のプロジェクト名に置き換えてください。

$  yarn create nuxt-app frontend 

😯いきなり「yarn create nuxt-app fontend」コマンドでもいいんですね。
上記2つのコマンドの省略記法みたいです。
yarn create - yarn

プロジェクトの設定をする

上のcreateコマンドを実行するといくつか質問されますので答えていきましょう。

もし失敗しても「control」 + 「C」で最初からやり直すことができますので、落ち着いて実行していきましょう。

プロジェクトの名前はこれででええか?

? Project name (frontend) 
  • Yes => Enterキー
  • NO => 書き換えてEnterキー

変更しない場合はそのままEnterキーを押します。

プロジェクトの説明はこれでええか?

? Project description (My shining Nuxt.js project)

はい、OKです。 -> Enter!!

作成者はこいつか?

? Author name (andou)

はい、文句ありません。 -> Enter!!

パッケージマネージャーはどっちよ?

? Choose the package manager (Use arrow keys)
❯ Yarn 
 Npm 

矢印キーで選択します。

今回はYarnを選択していきます。 -> 矢印を合わせてEnter!!

UIフレームワークを選べや

? Choose UI framework (Use arrow keys)
❯ None 
 Ant Design Vue 
 Bootstrap Vue 
 Buefy 
 Bulma 
 Element 
 iView 
 Tachyons 
 Tailwind CSS 
 Vuetify.js 

UIフレームワークとは、cssを簡単に扱えるようにしたツールです。

Noneを選ぶと、フレームワークを導入しません。後からでも導入できますのでご安心を。

今選ぶと初期設定をNuxtさんが行ってくれますので便利です。好きなものを選びましょう。

個人的にマテリアルデザインが好きなので -> Vuetify.jsを選択してEnter!!

サーバーフレームワークはどれよ?

? Choose custom server framework (Use arrow keys)
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro 

こめんなさい。よく分かりません。 -> None(導入しない)を選択してEnter!!

モジュールを選びなさい

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support

Axiosを選択していきます。

Axiosとは、HTTP通信を簡単に行えるツールです。

今回は、contentfulで作成したブログ記事を、このAxiosを使って取得しNuxtに表示します。



spaceキーを押して、

? Choose Nuxt.js modules 
❯◉ Axios
 ◯ Progressive Web App (PWA) Support

マークがついたら -> Enter!!

リントするツールは?

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier

ESLintとは…

ごめんなさい。この方の説明には敵わないので委託します。

ESLint 最初の一歩

spaceキーでESLintにマークをつけて、

? Choose linting tools 
❯◉ ESLint
 ◯ Prettier

マークがついたら -> Enter!!

テストフレームワークいる?

? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA 

プログラミングコードが正しく実行できているか、テストを行うツールです。

導入する方は選択しEnterを押してください。

この記事ではテストに触れないので導入しません。

None(いりません) -> Enter!!

Nuxtのモードどっちにする?

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App 

今回はブログを作成しますので、Universalモードを選択します。

モードの違いについてはこの記事に書きましたので参考にして下さい。

NuxtjsのUniversalモードとSPAモードの大きな違い

これでNuxtの厳しい質問責めから解放され、プロジェクトを作成することができます。

プロジェクトファイルを確認してみよう

ターミナルで移動したディレクトリの中を、macのフォルダーアプリで確認してみましょう。

2019-07-27 01-42-52

指定したプロジェクト名「frontend」のなかにファイルやディレクトリがたくさん作られていますね。

このファイル一式がNuxt.jsのプロジェクトです。

次回予告

次の記事ではNuxtプロジェクトに"Hello Nuxt"を表示します。

お疲れ様でした。

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
ブログ構築
1. 今回作るアプリケーション
#01
Nuxt.jsとContentfulで作るマイブログ
今日のTweet
スポンサー広告