クモのようにコツコツと

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

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

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

JS 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超入門」を参考に進めてみる。

※参考：Amazon CAPTCHA

まず、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