クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Vue.js】Nuxt.jsをインストールして簡易ページを作成した

Vue.jsの続きです。前回までVue CLIをインストールしてみた。今回はNuxt.jsをインストールしてみる!途中、何度かエラーが起こったが、調べながらなんとか進めた。それでは行きましょう!

【目次】

前回の記事
※参考:【Vue.js】Vue CLIのダッシュボード(GUIツール)を開く - クモのようにコツコツと

Nuxt.jsでできること
※参考:【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など) - クモのようにコツコツと

package.jsonファイルを作る

Nuxt.jsのインストールについても、これまでと同様に書籍「Vue js & Nuxt.js超入門」を参考に進めてみる。

※参考:https://www.amazon.co.jp/Vue-js-Nuxt-js超入門-掌田津耶乃/dp/4798056596

まず、Nuxt.jsをインストールしたいフォルダを作り、その中に「package.json」というファイルを作る。中にはこのように書く。

{
    "name": "my-app",
    "scripts": {
        "dev": "nuxt"
    }
}
  • 連想配列「name」キーの値は「my-app」
  • 連想配列「scripts」キーの中身も連想配列
    「dev」キーの値は「nuxt」

ここでdevというスクリプトを作っているようだ。値がnuxt。

ところでpackage.jsonってなんだっけ?

npmプロジェクトの情報管理しているのが package.json というファイルです。このファイルを手動で編集したり npm コマンドを通して更新していきます。

※参考:npmのpackage.jsonと依存関係を理解しよう! - bagelee(ベーグリー)

なるほど!これはnuxt側ではなくnpm側の設定ファイルか。npmとnuxtを紐づける役割かな。

ターミナルでフォルダに移動

ターミナルを開いて、nuxt.jsをインストールしたい場所に移動。

$ cd Desktop
$ cd (ディレクトリ名)

cdコマンドにて。最初にデスクトップに行って、次に先ほどpackage.json作ったフォルダに行く。

パッケージをインストール

次にパッケージをインストールする。

$ npm install --save nuxt

npmのinstallコマンドでnuxtを保存

処理中…

インストール完了!
f:id:idr_zz:20191028004231j:plain

おや?なんか「npmのバージョンを上げてくれ」的な表記がでてる…

nodeのバージョンを上げる

こちらの記事に従って、バージョンを上げてみた。

※参考:【Nuxt.js】npm run dev後にエラー出る時【対処法】 | Tarokenlog

$ npm install -g nTerminal

npmコマンドでnターミナルをインストール

$ sudo n latest

nからnode.jsを更新

念のため先ほどのファイルは消して、もう一回package.json作成とnuxtをインストールをしてみた。

今度はスムーズにインストールが終わった。

フォルダの中身を確認

フォルダの中身を見てみる。
f:id:idr_zz:20191028004228j:plain

  • ルート直下にはpackage-lock.jsonというファイルが増えている
  • node_modulesフォルダの中はすごい数のフォルダが…

package-lock.jsonってなんだろう。開いてみると先程書いたpackage.jsonよりたくさんの設定がある。

買い物に例えて分かりやすく言うと

package.jsonは買うものリスト
100円のりんごを買いたいと書かれている

package-lock.jsonは実際に買ってきた領収書
実際には120円のりんごを買いましたと書かれている

※参考:【Node.js】package.jsonとpackage-lock.jsonについて簡単にまとめる - Qiita

ふむふむ。処理の結果の記録みたいな感じかな?

index.vueファイルを作る

次にpagesというフォルダを作り、中にはindex.vueというファイルを作る。

index.vueにはこう書く。

<template>
    <section>
        <h1>こんにちは、なくすと</h1>
        <p>うまくいけばこのテキストが表示されるはず!たぶんされると思う。されるんじゃないかな。まちょと覚悟はしておけ。</p>
    </section>
</template>

index.vueにはtemplateタグで囲んだパーツを直書きしてOK!以前やったVue CLIプロジェクト作成と同様。

※参考:【Vue.js】Vue CLIのプロトタイプとプロジェクトを作る - クモのようにコツコツと

プロジェクトを実行→エラー!

さあいよいよプロジェクトを実行する!

$ npm run dev
  • npmのrunコマンドでdevプロジェクトを実行

処理中をしばらく待つ…完了…しない!?

エラーになった。。

npm ERR! missing script: dev

「devなんてスクリプトはありませんよ!」と。いやいや、先程package.jsonに書きましたが何か?

あ!よく見たら先ほどのpackage.json内のキー名がscriptsではなくscriptと書いていた。。

scriptsと書き直してリベンジ!

$ npm run dev

完成した!…っぽいのだが…何やら注意書きが?

 WARN  No pages directory found in /Users/(ユーザー名)/Desktop/(ディレクトリ名). Using the default built-in page.

「ページが見つかりません?」いやいや、pages作ったよ?

下記にアクセスしてみる。

http://localhost:3000/

f:id:idr_zz:20191028014139j:plain

ありゃ?作ったページが表示されず、Vueの出来合いのページが表示された。。

あ、そうか!pagesフォルダをルート直下ではなくnode_modulesの中に作ったからかも?

pagesフォルダをルート直下に移動して再度アクセス。

http://localhost:3000/

んー惜しい。出来合いのページに対して作ったページがチカチカ点滅してる。変化はあったが、うまく処理できてないようだ。

プロジェクト実行→成功!

もう一回、最初からやってみるか!pagesも最初からルート直下に置いてっと…

プロジェクト実行!

$ npm run dev

処理をしばらく待つと…今度は…成功!
f:id:idr_zz:20191028012818j:plain

下記にアクセス

http://localhost:3000/

やた!ページが表示された! f:id:idr_zz:20191028012728j:plain

最後に

ということで、nuxt.jsのインストールとプロジェクトの作成、実行まで出来ました!

コマンドの結果がエラーになったら、慌てずにエラー内容をGoogle翻訳してみると、解決のキーワードが見つかりそうです。

エラーは大体は自分の書き間違いなんだが、バージョン違いや別機能との干渉もあり得る。

さて、このままではまだ単なるハローワールド。これからnuxt.jsならではの機能を体験していきたく思います。それではまた!


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com