1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

2019 7月・令和元年・Nuxt .js・LIFF動向

はじめに

この記事は、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/記事

公式https://nuxtjs.org/

ルーティングの追加と非同期データの取得

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と組み合わせて使用されることがユースケースとして増えている

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?