「入門」Nuxt.jsチュートリアル

Nuxt.jsで簡単な記事取得可能なSPAサイトを制作します。

目次

環境構築

Nuxt.jsの開発環境の制作方法は以下の2つがあります。

  • パッケージ化されたものを簡単インストール
  • 手動でインストール

今回は手動でインストールする方法を紹介します。

簡単インストールの方はコマンド1つで簡単にインストールする事ができますが、パッケージされたものになり、カスタマイズの自由度が手動よりも低くなってしまいます。

何かしら案件でNuxtを使用する場合、カスタマイズを行いたいという事は多々ありますので、手動でインストールする方が何かと便利です。

事前に必要なもの

  • nodeのインストール
  • yarnのインストール

Nuxt.jsはnode環境で動作しますので予めnode.jsをインストールしてください。

インストールされていないかたは以下を参考にインストールしてください。

開発環境作りに必要なモノをインストールする

node.jsをインストールするとnpmも一緒にインストールできます。

npmを使用してNuxtを動かす事も可能ですが、今回はyarnを使用して構築していきますのでyarnもインストールします。

yarnのインストール方法は以下を参照ください。

開発環境作りに必要なものをインストールする

プロジェクトディレクトリにpackage.jsonを制作

プロジェクトのディレクトリを制作したらpackage.jsonファイルを制作します。

package.jsonには以下のコードを記載しましょう。

{"name":"my-app","scripts":{"dev":"nuxt","build":"nuxt build","generate":"nuxt generate","start":"nuxt start"}}

3行目のscriptに記載されているものが実行するタスクの名前になります。

devというタスクを実行する事で開発環境がlocalhost:3000で立ち上がります。

Nuxt.jsをインストール

以下のコマンドをターミナルへ入力し、nux.jsをインストールします。

yarn add nuxt

インストールするとpackage.jsonに自動的にインストールしたパッケージの情報が記載され、node_modulesにNuxt.jsがインストールされます。

必用なディレクトリの制作

Nuxt.jsでは各ディレクトリが重要な意味を持ちます。

名前と役割が決まっており、例えば、pagesというディレクトリの中に記載したものが必ずwebページに表示されます。

さらにpagesの中のディレクトリ構造はそのままwebサイトの階層構造となります。

このように、Nuxt.sjではディレクトリ構造を自動的に判断しプログラムが構成されますので、各ディレクトリの役割とルールを知る必要があります。

ディレクトリ構造について[公式ページ]

ディレクトリ名説明
pagespages配下のディレクトリ構造がwebサイト自体の構造を表し、その中で.vueファイルを制作し、各ページを構築します。
componentsvueコンポーネントファイルを定義します。
assets画像、css、jsライブラリなどを格納します。
layoutpagesの親となり、共通で使用するコンテンツを格納します。
pluginsvueアプリケーションがインスタンス化する前に実行するプラグインを格納します。
storeアプリケーションの状態(データ)を格納します。

上記テーブルに記載しているディレクトリはたいてい必要になっていきます。

他にもいくつかNuxtが用意しているディレクトリはあります。詳しく知りたい方は以下から確認する事ができます。

ディレクトリ構造について[公式ページ]

環境の立ち上げと各コマンド

これで開発環境が整いました。

環境を立ち上げ開発を始めましょう。

開発環境の立ち上げは以下のコマンドで可能です。

yarn dev

Nuxtには他にも以下のコマンドが用意されています。

コマンド説明
yarn dev開発環境の立ち上げ
yarn build本番用のファイルの生成
yarn start本番ファイル生成後、本番サーバーを起動します。

記事取得アプリを制作する

ここからは記事取得を行うアプリを制作します。

SPAとルーティングについて触れるため、ページは以下の3ページを制作しましょう。

  • index.vue–サイトのトップページ
  • Articles–記事一覧ページ
  • Single–記事詳細ページ

デモ

  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

プログラムちょと書ける。
いまはバリ島でスクール作っている。
プログラムちょっとできる。

目次