はじめに
この記事は、WebBenchというプログラミングを「アクティブラーニング」形式で、
学ぶ勉強会を実施している筆者が分かりやすくプログラミングの技術を伝達するために作成しました。
過去に何回か、セミナーを都内で実施しております。
団体の説明などはこちら→Web Bench 公式 https://twitter.com/bench_web
note→https://note.mu/kaji_____/n/n50c684f7eb6b
Nuxt.jsとは、何ぞや
Nuxt.js（ナクストと読みます）とはユニバーサルなVue.jsアプリケーションを構築するためのフレームワーク
＊UI構築のためのJSライブラリと思っていただければ大丈夫です。
＊React.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。
UIの描画サポート、SSRをはじめとした様々なサポートを行ってくれるものとなります。
＊SSR(サーバサイドレンダリング)とは「(元々ブラウザ上でしか動かなかった)JavaScriptをサーバー内部で実行して、HTMLを生成すること」を指します。
引用・参考資料・Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
環境セットアップ
Node.jsのインストール
自分のPCのターミナルで $ node –vでバージョン確認できます
【Mac】 Homebrewを使う場合→brew –vでバージョン確認
$ brew update
$ brew install node.js
【Windows】http://nodejs.org/ja/から最新版をDL
vue-cliを利用
$ npm install -g vue-cli # 既にvue-cli を導入されているかたについて は不要です
$ vue init nuxt-community/starter-template nuxt_sample
サンプルプロジェクトのセットアップ
$ cd nuxt_sample
$ yarn
$ yarn dev
環境セットアップが難しいかた
Code sandboxというサービスを利用
ブラウザ上で動くエディタ
npm package対応している。
こちらでも十分に演習することは可能です
以下・参考URL/記事
ルーティングの追加と非同期データの取得
Nuxt.js 上での開発における babel の対応文法のソース（設定プリ セット）https://github.com/vuejs/babel-preset-vue-app
参照URL https://html5experts.jp/potato4d/24346/
Laravel+NuxtでLIFFアプリを作ってみた
Laravel Vue.js LINE LIFF
LIFFとは
LINEアプリ上で動くフロントエンドのフレームワーク。
こちらもNuxtと組み合わせて使用されることがユースケースとして増えている