はじめに

今回は僕の大好きなNuxt.jsを最小限の構成で構築していきたいと思います。他のパッケージを導入する方法はそれ用に記事を書いていますので、ここでは最小の構成で構築していきたいと思います。

構築手順

Step1. ディレクトリ作成

$ mkdir ~/your/workspace/directory/<my-project>

Step2. プロジェクト作成

$ yarn create nuxt-app <my-project>

いろいろ聞かれますので自分の作成したい環境に合わせて回答していってください。各質問の意味は公式サイトを見てもよくわからないので一応下に回答例を書いておきます。僕がこのブログを作ったときと質問が若干変わっていますが、だいたいこんな感じで答えています。間違えても後から変更出来ますので、もしわからなかったら下の例と同じように答えておけば変なことにはならないはずです。

# [プロジェクト名]
? Project name papadays.com

# [プロジェクトの概要]
? Project description my blog site

# [プロジェクト作者名]
? Author name papa

# [使いたいパッケージマネージャ]
# こだわりなければYarnがおすすめ
? Choose the package manager (Use arrow keys)
❯ Yarn 
  Npm
  
# [使いたいUIフレームワーク]
# 使いたいものを選べばOK
? Choose UI framework 
  None 
  Ant Design Vue 
❯ Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuetify.js
  
# [使いたいサーバーフレームワーク]
# これも使いたいものを選べばOK
? Choose custom server framework (Use arrow keys)
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro 
  
# [使いたいNuxt.jsモジュール]
# Axiosは非同期通信で使うモジュール。必須
# PWAはWEBサイトをスマートフォンアプリライクに使えるようになる技術。理由なければ入れておいてOK
? Choose Nuxt.js modules 
 ◉ Axios
 ◉ Progressive Web App (PWA) Support
 
# [使いたいLintツール]
# ESLintはJavaScriptのコードチェッカー。入れるべし
# Prettierはコードフォーマッター。入れるべし
# Lint staged filesはコミット前にLintでコードチェックしてくれる。入れるべし
? Choose linting tools 
 ◉ ESLint
 ◉ Prettier
 ◉ Lint staged files
 
# [使いたいテストフレームワーク]
# 使いたいものを選べばOK
? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA
  
# [レンダリングモード]
# SPAじゃないと絶対ダメなんだ！以外はUniversalでOK。よくわかんなかったらUniversal
? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App 

# [環境設定ファイル]
# VSCode使うなら入れるべし
? Choose development tools 
 ◉ jsconfig.json (Recommended for VS Code)

Step3. ディレクトリ構成の理解

$ cd <my-project>
$ ls -l

作成されたプロジェクトの中身を見てみると、/assetsや/components、/pagesなどのディレクトリがあります。これらのディレクトリはそれぞれ役割があり、その役割を理解してアプリケーションを開発する必要があります。公式サイトがわかりやすくまとめているので、こちらを見ておくのが無難かと。

Step4. Nuxt.js起動

$ yarn dev

起動したらlocalhost:3000にブラウザからアクセスすることで、初期状態のアプリケーションが表示されるはずです。これでNuxt.jsの環境が構築出来ました。

さいごに

今までコンポーネント指向に触れたことがある方はディレクトリ構造を理解するだけで手を動かし始めることが出来ると思いますが、そうでない方はまずはVue.jsの公式ガイドとNuxt.jsの公式ガイドを読んでみてください。Vue.jsとNuxt.jsの公式ドキュメントはとても充実していて、その上日本語もサポートしてくれているので読みやすいです。下手な参考書を読むよりよほど勉強になるのでぜひ読んでみてください。Nuxt.jsは比較的学習コストも低く、その上理解し始めるとどんどん素早く簡単にコーディング出来るようになります。せっかくの機会なのでぜひ学習してみてください。それでは、Have a nice Nuxt life!!