Nuxt.jsが流行っているらしいので使用してみた件

最近でもないのかな？JS由来のフレームワークやらライブラリやらがフロントエンドの主流になってきてるらしいですね。
なので今回、自分自身学習のアウトプットも兼ねてQiitaで情報発信していこうと思います。
不慣れなところもあるとは思いますが、何卒よろしくお願いします。

そもそもNuxt.jsってなんすか。

vue.jsの機能をふんだんに盛り込んだフレームワークという認識でいいと思います。
（SEO対策に強いとかSSRとかいろいろあるけど詳しくは公式ドキュメントを見てね）
Nuxt.js公式サイト

Nuxt.jsで開発を進めていくにあたってNode.js環境が必須なので、インストールがまだの方はこちらの記事を参考にされてみてください。

インストールが終わったら、下記のコマンドをお手元のCLI（Mac:コンソール, Win:コマンドプロンプト）にて実行してみましょう。

Iterm2

npx create-nuxt-app <namespace> //namespaceは任意の文字

対話形式でいろいろ聞かれます。

あとの項目はEnter連打で大丈夫です。

などがありますので、これらを踏まえた上で選択してみてください。

ここまでくればやや時間を要しながら、appの作成が完了したと思います。

iTerm2

cd <namespace> //自分のappの名前

でディレクトリに入り、

iTerm2

yarn dev //npmの人は npm run dev

で実行します。(正式には開発モードと言ってローカルで変更した値を即時にビルドして実行してくれる便利なやつ。)
デフォルトではポート3000番が開かれてますのでwebブラウザからlocalhost:3000にアクセスしてみましょう。

しっかり表示されてますね。ひとまず安心。

作成したディレクトリに入ると様々なフォルダが作成されていると思います。
何が何だかわからなくて挫折してしまいそうになりますが、グッと堪えてざっくりと概要を理解していきましょう！！

.nuxt 自分たちが書いたコードをえっちらおっちら実行可能なコードに直してくれているところ。
assets 今後cssなどを入れるためのところ
components vue.jsは基本的にコンポーネント（部品）で管理していきます。その部品を記述するところです。コンポーネント指向がいまいちわからないよ。という方向けに下に参考文献貼っておきます。
layouts ページ全体の共通部分をここに記述します。（eg. header footer）
middleware レンダリングされる前に実行したい関数の置き場所(認証されてないユーザーへのlogin画面へのリダイレクトなど。)
node_modules 先人たちのありがたい知恵が詰まった場所。yarn add xxxとかするとここに入るよ。
pages これが本当に便利。この中に新しくファイルを作ると、そこに勝手にパスを通してくれる。
plugins 全体を通して使用したい関数などを記述する。
static faviconや画像などをここに置いておく。
store アプリケーションを通してのデータの保持。login情報などに主に使用される。
test テストに関する記述がある。

とまあこんな感じでゆるっと理解しておけば、いずれ役に立つかと思います。

こんな感じでどしどし開発を進めてみてください。

これから機能ごとに記事をいくつかアップしていこうと考えてます。

もしよければそちらも参考になさってください。

ご視聴ありがとうございました(_ _)