コマンドを通して更新していきます。bagelee(ベーグリー)なるほど!これはnuxt側ではなくnpm側の設定ファイルか。npmとnuxtを紐づける役割かな。ターミナルでフォルダに移動ターミナルを開いて、nuxt.jsをインストールしたい場所に移動。(ディレクトリ名)cdコマンドにて。最初にデスクトップに行って、次に先ほどpackage.json作ったフォルダに行く。パッケージをインストール次にパッケージをインストールする。処理中...インストール完了!おや?なんか「npmのバージョンを上げてくれ」的な表記がでてる...nodeのバージョンを上げるこちらの記事に従って、バージョンを上げてみた。念のため先ほどのファイルは消して、もう一回package.json作成とnuxtをインストールをしてみた。今度はスムーズにインストールが終わった。フォルダの中身を確認フォルダの中身を見てみる。ルート直下にはpackage-lock.jsonというファイルが増えているnode_modulesフォルダの中はすごい数のフォルダが...package-lock.jsonってなんだろう。開いてみると先程書いたpackage.jsonよりたくさんの設定がある。処理の結果の記録みたいな感じかな?index.vueファイルを作る次にpagesというフォルダを作り、中にはindex.vueというファイルを作る。index.vueにはこう書く。<p>うまくいけばこのテキストが表示されるはず!たぶんされると思う。されるんじゃないかな。まちょと覚悟はしておけ。CLIプロジェクト作成と同様。処理中をしばらく待つ...完了...しない!?エラーになった。dev「devなんてスクリプトはありませんよ!」と。いやいや、先程package.jsonに書きましたが何か?あ!よく見たら先ほどのpackage.json内のキー名がscriptsではなくscriptと書いていた。page.「ページが見つかりません?」いやいや、pages作ったよ?下記にアクセスしてみる。http://localhost:3000/ありゃ?作ったページが表示されず、Vueの出来合いのページが表示された。あ、そうか!pagesフォルダをルート直下ではなくnode_modulesの中に作ったからかも?pagesフォルダをルート直下に移動して再度アクセス。http://localhost:3000/んー惜しい。出来合いのページに対して作ったページがチカチカ点滅してる。変化はあったが、うまく処理できてないようだ。dev処理をしばらく待つと...今度は...成功!下記にアクセスhttp://localhost:3000/やた!ページが表示された!最後にということで、nuxt.jsのインストールとプロジェクトの作成、実行まで出来ました!コマンドの結果がエラーになったら、慌てずにエラー内容をGoogle翻訳してみると、解決のキーワードが見つかりそうです。エラーは大体は自分の書き間違いなんだが、バージョン違いや別機能との干渉もあり得る。このままではまだ単なるハローワールド。これからnuxt.jsならではの機能を体験していきたく思います。CLIのプロトタイプとプロジェクトを作るVue.jsの続きです。CLIをインストールしてみました。CLIをインストールしてみる(CDN、Nuxe.jsとの違い)Vue.jsの続きです。前回はNuxt.jsで何ができるか調べました。今...2019-09-18【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など)Vue.jsの続きです。前回まではVue.jsのUIフレームワーク、Vueti...2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。