Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Repro Tech Hands-on : Nuxt.js

Matsuo Obu
December 16, 2018

Repro Tech Hands-on : Nuxt.js

Repro Tech Hands-on : Nuxt.js (2018-12-16) での解説資料。ハンズオンに使用したリポジトリはこちら ( https://github.com/mqtsuo02/nuxt-handson )

Matsuo Obu

December 16, 2018
Tweet

More Decks by Matsuo Obu

Other Decks in Technology

Transcript

  1. アンケート (1) 普段どの分野で仕事をされていますか? - マネジメント - 要件定義(SE) - デザイン -

    フロントエンド(Web) - フロントエンド(アプリ) - バックエンド - インフラ - その他
  2. Vue.jsはUIライブラリ、Nuxt.jsはフレームワーク  Vue.js   + Vue Router, Vuex, Vue Server Renderer, vue-meta, …

      + Webpack, Vue Loader, ...   + 独自のカスタマイズ   = Nuxt.js - SPA、サーバーサイドレンダリング、静的サイト生成がすぐできる - ビルドプロセスに悩まなくて済む
  3. .vueファイルについて 単一ファイルコンポーネント (Single File Components) - Webpack と Vue Loaderによって解析される

    - <template> と <script> と <style> - <script>でデータを処理して、<template>に渡して表示する
  4. <template>について - HTMLのタグをそのまま使用することができる - <script>のdataを表示するときは、{{ hoge }}  ( マスタッシュ記法 )

    - ディレクティブで様々なDOM操作を行うことができる ( v-for, v-if, v-bind, v-on, v-model ) - タグの属性に対してdataを使う場合は v-bind という機能を使う - ライブラリのタグを埋め込んだりする。<router-link>とか<nuxt /> - 自分で作ったコンポーネントを埋め込んだりする。<hoge-list />
  5. <script>について - JavaScriptで処理を書く - export default { … } の中にdataや関数を書いていく

    - Vue.jsのライフライクルイベントとNuxt.jsのライフライクルイベントに応じた処理をか ける。( beforeMount とか asyncData とか ) - 外部モジュールを使用するときはimportして使う - コンポーネントを使うときは、importしてcomponentsで指定すると<template>で使 用可能となる