イイダリョウのブログ。【Vue.js】Nuxt.jsのプロジェクトを作成する2019-11-01【Vue.js】Nuxt.jsのプロジェクトを作成するJSVue.jsの続きです。前回はNuxt.jsのインストールと簡易ページを作成しました。ハローワールド的なペライチページでした。今回は本式なプロジェクトをつくってみる。Nuxt.js超入門」を参考に進めてみる。単行本この商品を含むブログを見る書籍では前回の作業から引き続きになっているが、いったんターミナルを閉じているので、まずデスクトップに移動。次にcreate-next-appを実行。nuxt_appはて、npxというコマンドは初見かも?npmと名前が似ているが。npxはnpmパッケージを簡単に実行できるコマンドです。具体的には次のようなことができます。Developers.IOふむふむ。実行するとなにやら処理中になる。(nuxt_app)お、成功したようだ!プロジェクト名はを入れてくれとプロジェクト名などは入力不要?書籍によるとデフォルトでも値が設定されているそうなのでプロジェクト名などは入力不要らしい。順番が違うが、次に作者名が聞かれた。(イイダリョウ)初期値で自分の名前が入っているのでこのまま次へ。次も書籍と順番が変わってパッケージマネージャを聞かれた。NpmYarnかNpmかとのこと。NpmはNode.jsのパッケージマネージャだね。Yarnとは?YarnはFacebook、Google、Exponent、Tildeによって開発された新しいJavaScriptパッケージマネージャーです。公式発表に記載されているように、Yarn開発者が直面したnpmの問題解決を目的としています。WPJふむ、良さそうではある。今回はとりあえず見慣れているNodeのNpmにしておこう。下矢印でNpmを選択。実行したら次にUIフレームワークを選べと。Vuetify.jsふむ、書籍とは質問の順番が異なるようだ。(書籍では最初の質問とのことだった)BootStrapやVuetifyなどは既知なフレームワーク。クモのようにコツコツと今回は初期の「None」で進んでみる。Micro「Express」はNode.jsのフレームワークだよね。あとはあまり聞かない名前。TechAcademyマガジン今回は「None」のまま進む。次にNuxt.jsモジュールを選べと。Nuxt.jsの拡張機能ね。ための認証モジュールです。NuxtJS4つ書いてあるが、ここではaxiosかPWAから選べと。Axiosは以前も触れたようにJSONデータとのやりとりに使う。クモのようにコツコツとPWAはブラウザで作るアプリみたいなやつ。以前Glideで作った。クモのようにコツコツと今回は「Axios」で次に進んでみる。lintツールを選ぶ次にlintツールを選べと。C言語のソースコードに対し、コンパイラよりも詳細かつ厳密なチェックを行うプログラムである。静的解析ツールとも呼ばれる。Wikipediaコードをチェックしてくれるツール。ESLintはよく聞く。Qiita今回は「ESLint」のまま進んでみる。次はテストフレームワークの選択。AVAジェスト?アヴァ?Jestは、Facebook社がOSSとして開発を進めている、JavaScriptのユニットテストのためのツールです。CodeGridJestはFacebookが作っているのか。Qiitaユニットテストの解説記事の冒頭にもAVAが挙げられている。IT(シンクイット)今回はひとまず初期値の「None」のまま進んでみる。次はレンダリングモード。Appサーバサイドレンダリング(SSR)かシングルページアプリケーション(SPA)か。SSRはNuxt.jsを使う目的のメインでもある。クモのようにコツコツと今回は初期値の「SSR」で進んでみる。デベロップメントツール次はデベロップメントツール。これはなんだろう?選択肢が一つしかない。CodeでES6を使う時に必要らしい。qiita.comこのまま次に進む。zeroプロジェクト生成!上記の質問を選択し終わると実行中になる。startやた!成功しましたと♪🎉プロジェクトを起動まずプロジェクトのフォルダ「nuxt_app」に移動する。dev処理中...こんな画面になる。成功したっぽい!ブラウザで下記のURLにアクセスする。http://localhost:3000/やた!初期画面!「Nuxt_app」フォルダの中にもファイルがたくさん入っている。最後にということで、Nuxt.jsの本式のプロジェクトをインストールできました!次回は、プロジェクトの中身を見て行ったり、何か触ってみたく思います。06:26Tweet関連記事2019-12-20【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行するVuexの続きです。前回はVuexストアのステートに保管したデータ...2019-12-03【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べたVue.jsの続きです。前回まではNuxt.jsのプロジェクトを見ていき...2019-11-12【Vue.js】Nuxt.jsのプロジェクトファイルを見てみるVue.jsの続きです。前回はNuxt.jsのプロジェクトを作成しました...2019-10-28【Vue.js】Nuxt.jsをインストールして簡易ページを作成したVue.jsの続きです。CLIをインストールしてみた。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。